The variable form (as in form.prop('action')) is not defined. You can access the form element by using this.
Solution 1 :
Problem :
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.
Comments
Comment posted by Patrick Evans
You store your serialized form data in
Comment posted by mehmet
Thanks for your help. I fixed the mentioned variable problems, but still the flask application dont take anything when pressed the button. I’m checking via request.form if the request method is POST. That main issue so far isn’t fixed.
Comment posted by mehmet
Thanks for your help. I fixed the mentioned variable problems, but still the flask application dont take anything when pressed the button. I’m checking via request.form if the request method is POST. That main issue so far isn’t fixed.
Comment posted by Đinh Carabus
It seems to work fine for me. Check the
Comment posted by mehmet
When i check the console, it says “Uncaught TypeError: $.ajax is not a function”. Maybe something messed up with my jquery scripts?
Comment posted by mehmet
yea in my layout template i was using a slim version of jquery that doesnt include ajax. bothered me for days …