Display prompt before ajax submit

Question

I'm trying to get a user entering the reason for updating qty before ajax submits the qty to db.

This is jquery code which sends qty change to the php script which updates db. For some reason, I can't stop ajax and display a prompt for a user to display so he could write a reason why he is updating qty. Can someone tell me why prompt is not being displayed?

<form name="form1" id="form1" method="POST" action="update_qty.php">
<input type="text" name="update_qty" class="update_qty" id="qty" value="<?php echo $sales_value['qty'] ?>"><?php echo ' Kom'; ?>
<input type="hidden" name="article_id" id="article_id" value="<?php echo $sales_value['article_id']; ?>">
<input type="hidden" name="sales_plan_id" id="sales_plan_id" value="<?php echo $sales_plan_id; ?>">
<input type="hidden" name="product_mix_id" id="product_mix_id" value="<?php echo $product_mix_id; ?>">
</form>

    //Update qty on article
$(document).ready(function() {

    $('.update_qty').on('change', function() {

        var message = prompt("Upišite razlog za izmjenu količine:");
        alert(message);
        //e.preventDefault();
        var article_id = $("#article_id").val();
        var sales_plan_id = $("#sales_plan_id").val();
        var update_qty = $(this).val();
        var product_mix_id = $("#product_mix_id").val();


        if (message != "" || message != NULL) {
            $.ajax({
                type:'POST',
                url:'update_qty.php',
                data:{ article_id: article_id, sales_plan_id: sales_plan_id, update_qty: update_qty, product_mix_id: product_mix_id, message: message },
                success:function(data) {
                    alert(data);
                }
            });
        } else {
            e.PreventDefault();
            return false;
        }

    });

});

Your code works fine [here](https://codepen.io/Bes7weB/pen/KeaGNo?editors=1011). Any error in console? — Louys Patrice Bessette, Jun 10 '18 at 10:57
If you add a `console.log("hello");` right before `//e.preventDefault();`, do you see it in console when blurring? — Louys Patrice Bessette, Jun 10 '18 at 11:11
Yes, I can see it. It's strange if I change event to "change" than prompt is displayed but only for the first row. When is an event "blur" than it's not displayed at all? — Budimir, Jun 10 '18 at 11:22
Are you looping in PHP, to create the rows? An ID must be unique. So if you use the same ID on each row, that's the problem. — Louys Patrice Bessette, Jun 10 '18 at 11:38
Yes, it's same ID on each row. Loop is in php. How do I fetch dynamic ID with on change event? — Budimir, Jun 10 '18 at 11:42
Use a class. Replace all `id="update_qty"` with `class="update_qty"` and then use `.update_qty"` as a selector for the script. You have to look for the other ids too... [**Read this**](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) — Louys Patrice Bessette, Jun 10 '18 at 11:44
OK, I did that and is working, but now I have a problem that I don't know which row I'm updating? How to get the value of the row that is changed? — Budimir, Jun 10 '18 at 11:52
change `var update_qty = $("#update_qty").val();` with `var update_qty = $(this).val();` — Masoud Keshavarz, Jun 10 '18 at 11:54
Use `$(this)` and [`.find()`](https://api.jquery.com/find/) method. — Louys Patrice Bessette, Jun 10 '18 at 11:54
OK, that is solved. Only one more thing that is not working. How to pass prompt message to php? You can see my updated code which is working now. — Budimir, Jun 10 '18 at 11:57
I just saw that hidden fields are not fetched anymore. I get only first row for them? How do I dynamicly fetch hiddent fields same as I did with update qty? — Budimir, Jun 10 '18 at 12:05

jasinth premkumar · Answer 1 · 2018-06-10T12:21:39.257

0

try like this using beforesend.

Update:

    $(document).ready(function() {
var message;

      $('#update_qty').on('blur', function() {

    //e.preventDefault();
    var article_id = $("#article_id").val();
    var sales_plan_id = $("#sales_plan_id").val();
    var update_qty = $("#update_qty").val();
    var product_mix_id = $("#product_mix_id").val();



      $.ajax({
        type:'POST',
        beforesend:con(),
        url:'update_qty.php',
        data:{ article_id: article_id, sales_plan_id: sales_plan_id, update_qty: update_qty, product_mix_id: product_mix_id },
        success:function(data) {
          alert(data);
        }
      });


  });

});

function con(xhr){
    message=prompt('enter reason');
    if(message==''){
     xhr.abort();

     }
    }

edited Jun 10 '18 at 12:21

answered Jun 10 '18 at 11:30

jasinth premkumar

1,430
1
12
22

No, prompt is not displaying. It goes to update_qty.php – Budimir Jun 10 '18 at 11:40
by mistake i used `;` instead of `:` and by changing this too old method wont work so use updated working method – jasinth premkumar Jun 10 '18 at 12:08

Display prompt before ajax submit

1 Answers1