Question posted in
You can find the official documentation here.

How can I submit a <li> with a form inside? – Jquery ajax

I am using an AJAX response from a database to generate an accordion list of products.

The response is parsed and a set of list items similar to the one below is assigned to a var called ‘products’ and appended to a div inside of the accordions tag using $("#my_div").append(products).

Everything works flawlessly within my form with the important exception that submits seems to submit, but the AJAX never triggers. Any ideas?

$('.form').on('submit', function(e) {
    e.preventDefault();
    var sku = $("#sku").val();
    var product = $("#prod_01").val();
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: ajaxurl,
    nonce: nonce,
    data: {
        action: 'doSomething',
        sku: sku,
        product: product,
        }
     }).done(function(response) {
        // process my response 
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="accordion-item">
   <h3 class="accordion-thumb">Option1</h3>
   <div id="id_01" class="item">
      <form id="Form_01" class="form" method="post">
        <h3>Blue Car</h3>
        <input id="sku" name="sku" type="hidden" value="1001">
        <input id="prod_01" name="prod_01" type="hidden" value="blue car">
        </div>
        <button id="Btn_01" type="submit" class="">Select This product</button>
      </form>
   </div>
</li>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For the curious! I resolved the issue. It had to do with the way it was all being rendered in the DOM. I ended up modifying my form submit to compensate. I changed it from $('.form').on('submit', function(e) to $(document).on('submit', '.form', function(e) and that resolved the issue.


  2. 0

    Please check my snippet, it seems to work just fine. I’m sending the request to a dummy page which just returns my requested parameters. Your htlm structure included a closing div tag which was in the wrong place. I cant help you with nonce, maybe the flaw is there.

    $('.form').on('submit', function(e) {
    e.preventDefault();
    var sku = $("#sku").val();
    var product = $("#prod_01").val();
    console.log(sku);
    console.log(product);
    $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://httpbin.org/post',
    data: {
        action: 'doSomething',
        sku: sku,
        product: product,
        }
     }).done(function(response) {
        console.log(response);
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="accordion-item">
   <h3 class="accordion-thumb">Option1</h3>
   <div id="id_01" class="item">
      <form id="Form_01" class="form" method="post">
        <h3>Blue Car</h3>
        <input id="sku" name="sku" type="hidden" value="1001">
        <input id="prod_01" name="prod_01" type="hidden" value="blue car">
        <button id="Btn_01" type="submit" class="">Select This product</button>
      </form>
   </div>
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search