submit button not working on jquery ajax based webpage

Question

I'm trying to get all the values inserted from my search page and feed it to the flask application I'm building. Although all the buttons and functions in my webpage works like .add, .remove, .main_search, the submit button won't take action. Here's the base of the code:

{% extends "layout.html" %}
{% block content %}
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <br />
    <div class="container">
      <h4 align="center">Select Main Category</h4>
      <br />
<!--        id="contact-form"-->
      <form method="POST" id="insert_form" action="/search2">
          <div class="about-center section-center">
          <div class="btn-container">
              <div class="col-sm-5">
              <button class="btn btn-info main_search" name="main_search" id = "s_r" data-id="s_r">S_R</button>
              <button class="btn btn-info main_search" name="main_search" id = "c_h" data-id="c_h">C_H</button>
               </div>
          </div>
          </div>
        <div class="table-repsonsive">
          <table class="table table-bordered" id="item_table">
            <thead>
              <tr>
                <th>Category</th>
                <th>Conjunction</th>
                <th>Enter Item Name</th>
                <th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></button></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
          <div align="center">
<!--              <button class="btn btn-info" id="contact-form-button" type="submit">submit</button>-->
            <input type="submit" name="submit_all_form" id="contact-form-button" class="btn btn-info submit" value="Insert" />
          </div>
            <span id="error"></span>
        </div>
      </form>
    </div>
<!--    </section>-->
  </body>
<script>
$(document).ready(function()
{
    var main_search_type = '';
    var count = 0;
    $(document).on('click', '.main_search', function ()
    {
        if (count == 0)
        {
            main_search_type = $(this).data("id");
        }
        else
        {
            if ($(this).data("id") != main_search_type)
            {
                main_search_type = $(this).data("id");
                $('#item_table tbody').empty();
                count = 0;
            }
            else
            {
                main_search_type = $(this).data("id");
            }
        }
    });


    $(document).on('click', '.add', function () {
        var all = '';
        var conjArray = ["And", "Or"];
        count++;
        var html = '';
        html += '<tr>';
        if (main_search_type == "s_r") {
            html +=
                '<td><select name="search_option_summary"' + count + 'id="summary_option" class="form-control">' +
                '<option selected="selected" value="phylum">Phylum</option>' +
                '<option value="genus">Genus</option>' +
                '</select></td>'
        } else if (main_search_type == "c_h") {
            html +=
                '<td><select name="search_option_c"' + count + 'id="c_option" class="form-control">' +
                '<option selected="selected" value="c_type">c type</option>' +
                '<option value="genus">Genus</option>' +
                '</select></td>'
        } else {
            html += '<td><select name="item_category[]" class="form-control item_category" data-sub_category_id="' + count + '' +
                '"><option value="">Select Category</option><?php echo fill_select_box($connect, "0"); ?></select></td>';
        }
        html +=
            '<td><select name="conj_option"' + count + 'id="conj_option" class="form-control">' +
            '<option selected="selected" value="and">And</option>' +
            '<option value="or">Or</option>' +
            '</select></td>';

        html += '<td><input type="text" name="item_name[]" ' + count + 'class="form-control item_name"  placeholder=' + main_search_type + '  ></td>';

        html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td>';
        $('tbody').append(html);
    });

    $(document).on('click', '.remove', function () {
        $(this).closest('tr').remove();
        count--;
    });
  $('#insert_form').on('submit', function(event)
  {
    event.preventDefault();
    var form = $('#insert_form');
    var form_data = $(this).serialize();
             $.ajax
        ({
            url: form.prop('action'),
            type: form.prop('method'),
            data: form_data,
            success:function(data)
        {
         $('#error').html('<div class="alert alert-danger">'+url+'</div>');
        }
        })

     return true;
      });
});

</script>

{% endblock content %}

I'm trying to add input boxes to html with add button to build a query with conjunctions, then take all the form data to feed sqlalchemy db for efficient querying.

Answer 1

The variable form (as in form.prop('action') ) is not defined. You can access the form element by using this .

submit button not working on jquery ajax based webpage

Question

1 answers

solution1
0 ACCPTED 2020-10-09 11:31:35

submit button not working on jquery ajax based webpage

Question

1 answers

solution1 0 ACCPTED 2020-10-09 11:31:35

solution1
0 ACCPTED 2020-10-09 11:31:35