I am using Jquery Query Builder inside HTML form
<script type="text/javascript">
......
......
var filter_json2 = <%=jsonArray%>;
console.log(<%=jsonArray.toString()%>);
$(document).ready(function(){
$('#rule_div').queryBuilder({
plugins:['bt-tooltip-errors'],
filters:filter_json2
});
$('#btn_reset').on('click', function () {
$('#rule_div').queryBuilder('reset');
});
$('#btn_set').on('click', function () {
$('#rule_div').queryBuilder('setRules', rules_basic);
});
$('#btn_get').on('click', function () {
var result = $('#rule_div').queryBuilder('getRules');
if (!$.isEmptyObject(result)) {
//alert(JSON.stringify(result, null, 2));
$("#jsonRule").val(JSON.stringify(result, null, 2));
console.log(result);
}
});
});
......
......
</script>
......
......
......
......
<form action="/jspfile.do" method="post">
......
......
other fields in form
......
......
<tr>
<td></td>
<td>
<div id="rule_div">
<button class="btn_set" id="btn_set">Set Rules</button>
<button class="btn_get" id="btn_get">Get Rules</button>
<button class="btn_reset" id="btn_reset">Reset</button>
</div>
<input type="hidden" id="jsonRule" name="jsonRule" value="">
</td>
</tr>
</form>
when I select something from Query Builder and hit get rules button I am getting json rules but page is getting refreshed and whatever I have selected is getting erased..
This is not the case with demo I am referring [https://querybuilder.js.org/demo.html]
Can anyone please suggest me , How can I prevent selected data from query builder from erasing after refresh?
You are in a form, and any untyped button in a form is a submit button.
if you add type="button" to your buttons it should stop them from submitting your form.
Another solution is indeed to always call preventDefault
$('#btn_get').on('click', function (e) {
e.preventDefault();
// custom action here
});
Related
I have a problem where jQuery validate is not working when the submit button is placed outside the form tags (which is required form my Cordova mobile app). As soon as .validate is called, the execution stops.
My HTML is set-up this way:
<form id="form-cart" >
// All form fields here
</form>
<ons-bottom-toolbar>
<button class="button" onclick="addToBasket();" data-trn-key="add_to_basket">
Add to Basket
</button>
</ons-bottom-toolbar>
And the function is then called as:
function addToBasket()
{
$.validate({
form : '#form-cart',
borderColorOnError:"#FF0000",
onError : function() {
},
onSuccess : function() {
// Run ajax on success
}
};
sNavigator.pushPage("confirmation.html", options);
return false;
}
});
}
How can I get this working so that it validates and calls ajax even if the button is outside of the form tags?
According to jQuery validation plugin documentation there are two different methods:
validate() – Validates the selected form.
valid() – Checks whether the selected form or selected elements are valid.
So you should set up the form validation with .validate method outside your function and check if form is valid inside your function (see code example below):
$('#form-cart').validate({
});
function addToBasket() {
if ($('#form-cart).valid())
//do you onSuccess stuff
}
}
Try this :
<form id="form-cart" >
// All form fields here
// Don't give <input type="submit"> here
</form>
<ons-bottom-toolbar>
<button type="submit" id="submitBtn" class="button" onclick="addToBasket();" data-trn-key="add_to_basket">
Add to Basket
</button>
</ons-bottom-toolbar>
and
$(document).ready(function () {
$("#submitBtn").click(function () {
$("#form-cart").submit();
});
});
I have a script which dynamically generates form elements with their corresponding ID, for e.g.
response from MySQL db says - 4, then
<form ID="form0">
<Input>....
<Button type="submit>....
</form>
<form ID="form1">
<Input>....
<Button type="submit>....
</form>
<form ID="form2">
<Input>....
<Button type="submit>....
</form>
<form ID="form3">
<Input>....
<Button type="submit>....
</form>
once this list of forms are generated, I have an AJAX code which detects the submit buttons and send the input values off to db via PHP page, something like this below,
$(document.body).on('submit', '#form' ,function(e){
e.preventDefault();
var postData = $("#form").serialize();
$.post("../../../functions/processing.php",postData,function(data, status){
var selectedData = JSON.parse(data);
$.each( selectedData, function( i, val ) {
// do something here...
});
});
});
So my question is that, for the list of forms, I have to somehow generate multiple of this AJAX code for form0, form1, form2, form3.. and because I can't anticipate how many forms will be generated, I can't just write one AJAX code like the one above.. is there anyway to dynamically generate AJAX codes for dynamically generated multiple forms?
Give the form a class that identifies it as a form to be handled by your AJAX handler. Then, inside the handler, reference this to get the form element that is being submitted.
<form ID="form0" class="js-ajax-form">
<input>....
<button type="submit>....
</form>
Handler
$(document).on('submit', '.js-ajax-form' ,function(e){
e.preventDefault();
var postData = $(this).serialize();
$.post("../../../functions/processing.php",postData,function(data, status){
var selectedData = JSON.parse(data);
$.each( selectedData, function( i, val ) {
// do something here...
});
});
});
Instead of redirecting the user to a new page, I want to add an overlay over the form. Somehow, the following code returns the overlay twice.
AJAX
$(document).ready(function ()
{
$('#form_informations').submit(function ()
{
$.get('php/formulaires.php', $(this).serialize(), function (data)
{
$('#form_informations').append('<div id="conf_informations" class="confirm"><p><img src="img/check.png" /><br /><?=FORMULAIRE_SAUVEGARDE;?></p></div>');
});
return false;
});
});
The id #form_informations is only used once.
For now, the second overlay is not created in php/formulaires.php because the file is empty as I have not started parsing the data.
Why is this happening? I don't see where this second overlay is coming from.
This is the HTML form:
HTML Form
<form id="form_informations" method="post" enctype="multipart/form-data">
<!-- form here -->
<input type="submit" name="submit_general" value="Save" />
</form>
May be you can add some code like this in the submit function
if(!$("#conf_informations").size()) {
$.get... //your get request here
}
Final solution
if(!$("#conf_informations").length()) {
$.get... //your get request here
}
I have 3 forms I would like to submit with one button:
<form id="#formEditUsername">
//Code
</form>
<form id="#formEdituseremail">
//Code
</form>
<form id="#new_password_form">
//Code
</from>
<button type="submit" class="btn btn-success" id="btnUpdate">Save</button>
I understand that the best way to do this is probably Ajax, but am unsure how I would do this; create two AJAX functions for the first two forms and then call the functions when the third is submitted?
Try this
$(document).ready(function() {
$("#btnUpdate").click(function() {
$.post($("#formEditUsername").attr("action"), $("#formEditUsername").serialize(),
function() {
$.post($("#formEdituseremail").attr("action"), $("#formEdituseremail").serialize(),
function() {
$.post($("#new_password_form").attr("action"), $("#new_password_form").serialize(),
function() {
alert('All forms submitted');
});
});
});
});
});
As #Jari mentioned, you can simply collect data from first two forms and submit them all together.
Note: this aproach requires input name attributes to be unique among all three forms.
Simple example of AJAX call:
var firstFormData = $("#formEditUsername").serialize();
var secondFormData = $("#formEdituseremail").serialize();
var thirdFormData = $("#new_password_form").serialize();
$.post(
URL, // target URL of your choice
firstFormData + secondFormData + thirdFormData
);
<form id="#formEditUsername" class="frmToSubmit" method="post">
//Code
</form>
<form id="#formEdituseremail" class="frmToSubmit" method="post">
//Code
<form>
<form id="#new_password_form" class="frmToSubmit" method="post">
//Code
</from>
<script type="text/javascript">
$(document).ready(function() {
$("#btnUpdate").click(function() {
$(".frmToSubmit").submit();
});
});
</script>
I have a form which looks like this
#using (Html.BeginForm("ActionMethod","MyController FormMethod.Post)) {
<button type="submit" value="Generate" name="action" class="button" id="btnGenerate">Generate Form</button>
<button type="submit" value="Confirm" name="action" class="button" id="btnConfirm">Confirm</button>
}
and my javascript looks like this
<script type="text/javascript">
$(function () {
var genOverlay = jQuery('<div id="overlay"><div class="innerblock box-shadow"><p>Please remember to print the registration form and sign both copies.</p><div><a id="btnClose" href="#" class="button">Close</a></div></div>');
var confirmOverlay = jQuery('<div id="overlay"><div class="innerblock box-shadow"><p>Changes can not be made to this record once it has been confirmed. Are you sure you would like to confirm this form?</p><div> <a id="btnConfirmConfirmation" href="#" class="button">Confirm</a> <a id="btnCancel" href="#" class="button button-red">Cancel</a></div></div>');
$('#btnGenerate').click(function () {
genOverlay.appendTo(document.body);
return false;
});
$('#btnConfirm').click(function () {
confirmOverlay.appendTo(document.body);
return false;
});
$('#btnConfirmConfirmation').live('click', function () {
// Need help on submitting the form with the input button value of btnConfirm.
// $('#btnConfirm').submit(); does not work
// return true;
});
$('#btnClose').live('click', function () {
genOverlay.remove();
});
$('#btnCancel').live('click', function () {
confirmOverlay.remove();
});
});
</script>
How would i go about implementing btnConfirmConfirmation click on the overlay to just submit the form normally with the action value of "Confirm"?
Thanks for any help
The .submit() method only applies to <form> elements. You could add an id to your form:
<form id="myForm" ...>
Which, as you're using HtmlHelper to create it would be achieved with:
#using (Html.BeginForm("ActionMethod","MyController", FormMethod.Post, new { id = "myForm" })) { ...
And then call the submit method (documented here) on that:
$('#btnConfirmConfirmation').live('click', function () {
$('#myForm').submit();
});
Or you could go to the form for your button by finding the closest ancestor form element for the button:
$('#btnConfirmConfirmation').live('click', function () {
$(this).closest('form').submit();
});
closest method is documented here.
submit is an event handler of the form element. This should work:
$('#btnConfirm')[0].form.submit()
//All form elements have a property called "form" which refers to the parent form
If you've attached an identifier to your form, use this:
$('#formId').submit(); //<form id="formId" ...
$('form[name="formName"]').submit(); //<form name="formName" ...