onClick 事件将使用 PHP-Codeigniter 保存单击的锚点名称

Question

我有 4 个链接，每次单击其中一个链接时，它都会自动增加优先级编号的值，这是它的代码

<div id ="qnum" style = "text-align: center; font-size: 5em; margin-top: 0px"></div>
<div class = "container" style = "text-align: center; margin-top: 100px;">
<form id="getTicketForm" name="getTicketForm" method="post" action="">
    <input type="text" name="hiddenqnum" id="hiddenqnum" value="">
    <a href="#" onClick="getPnumber()" style = "font-size: 3em;" name = "transaction" value = "payment" id = "payment">Payment</a><br />
    <a href="#" onClick="getPnumber()" style = "font-size: 3em;" name = "transaction" value = "landtax" id = "landtax">Land Tax</a><br />
    <a href="#" onClick="getPnumber()" style = "font-size: 3em;" name = "transaction" value = "spl" id = "spl">Special Lane</a><br />
    <a href="#" onClick="getPnumber()" style = "font-size: 3em;" name = "transaction" value = "bpld" id = "bpld">BPLD</a><br />
    </form>
</div>

这是函数getPnumber()

<script type="text/javascript">
//display Priority Number
    var num = 1;
    var queue = ('0000'+num).slice(-4);;
    document.getElementById("qnum").innerHTML = "Your Priority Number is" +  "<br>" + queue;
//if button is clicked, queue will increment
    function getPnumber() {
        num += 1;
        var queue = ('0000'+num).slice(-4);;
        document.getElementById("qnum").innerHTML = "Your Priority Number is" + "<br>" + queue;

        
        document.getTicketForm.hiddenqnum.value = queue;
       
    };

</script>

我在那部分没有问题，但我也想将链接的值和优先级编号保存到数据库中 这是我的脚本，

function save(){

$(document.ready)(function(){
    $('#getTicketForm').click(function(){
        var qnumber = $("input[name=hiddenqnum]").val();
        var transaction = $().val();
     
            $.ajax({
                url:'<?php echo base_url(); ?>main/queue',
                type: 'POST',
                data: {
                    qnumber : qnumber,
                    transaction : transaction
                },
                success : function(data){
                    console log.(data);
                }
            })
    });
});
};

</script>

稍后我会将链接的 onclick 更改为函数 Onclick() 这是

<script>
function onClick(){
 getPnumber();
 save();
};
</script>

我希望您能帮助我保存链接值和优先级，同时它在单击后仍会自动递增。 顺便说一句，我正在使用 php-codeigniter 无论如何我的问题是我的函数 save() 我无法保存到我的数据库中，我在从隐藏文本中获取优先级编号并将其传递给 var qnumber 时也遇到了问题

Answer 1

您也可以使用 jQuery 来实现这一点。此外，您还需要添加一个输入字段来跟踪 transaction 值。我还为您的 Ajax 调用添加了一个新按钮。

给你 -

<div id="qnum" style="padding:10px 20px;background:yellow;height:50px;color:#000;"></div>
<div class="container" style="padding:10px 20px;text-align:left;border:1px solid #ddd">
  <form id="getTicketForm" name="getTicketForm" method="post" action="">
    <input type="text" name="hiddenqnum" id="hiddenqnum" value="" /><br />
    <input type="text" name="hiddentransaction" id="hiddentransaction" value="" /><br />
    <a href="#" name="transaction" value="payment" id="payment">Payment</a><br />
    <a href="#" name="transaction" value = "landtax" id="landtax">Land Tax</a><br />
    <a href="#" name="transaction" value = "spl" id="spl">Special Lane</a><br />
    <a href="#" name="transaction" value = "bpld" id="bpld">BPLD</a><br />
    <button type="button" id="savetodb">Save to db</button>
  </form>
</div>

JS：

var num = 1;

$(document).ready(function(){
  var queue = ('0000'+num).slice(-4);
  $("#qnum").html("Your Priority Number is :"+ queue);

  $("a[name=transaction]").each(function() {
    $(this).on("click", function(e){
      e.preventDefault();
      getPnumber($(this).attr('id'));
    });
  });

  $('#savetodb').on('click', function(e){
    e.preventDefault();
    var qnumber = $("input[name='hiddenqnum']").val();
    var transaction = $("input[name=hiddentransaction]").val();

    $.ajax({
      // Do your ajax call using qnumber, transaction value here
    });

  });

});

function getPnumber(transaction) {
  num += 1;
  var queue = ('0000'+num).slice(-4);;
  $("#qnum").html("Your Priority Number is :"+ queue);
  $("input[name='hiddenqnum']").val(queue);
  $("input[name='hiddentransaction']").val(transaction);
};