Why doesn't javascript read changes in selector attribute?

Question

JavaScript

The situation is this. There is a form, it has a button, various fields, including a hidden input field with name="queue". Here is the form code:

<form class="cme text-center" id="f-2" name="MyForm">
        <div class="white big-p"><strong>Если еще остались вопросы...</strong></div>	
        <input data-queue="second" type="text" class="form-control" name="name" placeholder="Ваше имя">
        <input data-queue="first" type="text" class="form-control" name="phone" id="phone" placeholder="Номер телефона">
                <input name="type" type="hidden" value="2" />
                <input name="queue" type="hidden" value=true />
        <button id="send_button_s-0" data-queue="Может еще немного о себе?" class="cme-btn btn btn-danger">Заказать консультацию!</button>
        <div id="alert-1" class="white mini-p"></div>
        <div class="callme-result"></div>
      </form>

This form has a button that calls a function within which there is an AJAX request, in the callback of which the code is executed that reads / changes the value attribute of the input field, which is discussed above. Here is the code for the part of the function where the AJAX request is made and the callback is called:

jQuery.getJSON(folder + 'lib/send.php', { // отправка данных
      contentType: 'text/html; charset=utf-8',
      cs 		: cs,
      os 		: os,
      ctime : cnt,
    }, function(i) {
      cmeMsg(form, i.cls, i.message);
      if (i.result=='success' && !Boolean($(e).closest('form').find('input[name="queue"]').val())) {
        setData('callme-sent', i.time);
        form.find('.cme-btn').attr('disabled', 'disabled');
        dl('cmeHide', 4);
        dl('cmeClr', 5);
      } else if (i.result=='success' && Boolean($(e).closest('form').find('input[name="queue"]').val())) {
                $(e).closest('form').find('input[name="queue"]').val("false");
                $(e).parent().find('input[data-queue="first"]').each(function(){
                    $(this).slideToggle();
                });
                $(e).parent().find('input[data-queue="second"]').each(function(){
                    $(this).slideToggle();
                });
                $(e).html($(e).attr("data-queue"));
            }
    });

How it should work: the user presses a button that processes the form fields, and then they are sent to the server in a php script, where these fields are processed, sent by mail, and so on. In this case, the code follows the path where Boolean($(e).closest('form').find('input[name="queue"]').val()) will return true. After that, this value is changed to false, which is in the code above:
$(e).closest('form').find('input[name="queue"]').val("false");
And even when viewed in the Inspector, this value changes.
However, when the user clicks the button again after he fills in the next fields in the form, the interpreter reaches the condition in the code, where the value Boolean($(e).closest('form').find('input[name="queue "]').val()) in theory should already be considered as false - after all, even in the Inspector we see that this is so, but here's the problem - the value is again read as true there. I suspect that the callback and the asynchrony of the code are to blame here, but I can’t understand exactly how this affects - after all, in theory, the callback should have worked a hundred times already, which we see in the Inspector, and this is also expected by the code itself.

Please tell me how to overcome this problem.

Answer 1

Try writing prop instead of attr
And here you can write data instead of attr and remove the "data-" prefix:
$(e).html($(e).data("queue"));