Событие 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 (), которая

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

Я надеюсь, вы могли бы помочь мне сохранить значение и приоритет ссылок, пока они автоматически увеличиваются после нажатия. кстати, я все равно использую php -codeigniter, моя проблема в моей функции save (), я не могу сохранить в своей БД, у меня также есть проблема в получении номера приоритета из скрытого текста и передаче его в var qnumber

Answer 1

Вы можете достичь этого, используя jQuery. Также вам нужно добавить еще одно поле ввода для отслеживания значения transaction. Я также добавил новую кнопку для вашего Ajax вызова.

Здесь вы go -

<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);
};