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>
Related
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
});
I need to do something to use the ruby cgi to output something.
As such form must be submitted first followed by the js to alter the element values.
Using the form.submit() does not work in my case.
Using the simple below example below to output the click me values after submitting the form.
When the form.submit() function is run,the js will not work on click me.
Form onsubmit method cannot be used as it calls the javascript function first before submitting the form(Must submit the form first then call the JS function to carry out something)
Any idea to resolve this:
NOTE:MUST SUBMIT FIRST
$(document).on('click','#afterbutton',function() {
var form = document.getElementById("myForm");
//form.submit();
document.getElementById("test").innerHTML = "afterbutton";
});
$(document).on('click','#beforebutton',function() {
var form = document.getElementById("myForm");
//form.submit();
document.getElementById("test").innerHTML = "beforebutton";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="submit" value="formSubmitbutton" id="submit"><br>
<button id="beforebutton">beforebutton</button><br>
</form>
<button id="afterbutton">afterbutton</button><br>
<p id="test">click me</p>
OK easy problem , you make a simple mistake when you give an input the id submit you override the form.submit method if you look at the console in the devtool you'll see something telling you that
form.submit is not a function
so to solve this problem change the id of your first input instead of submit to something else like submit123
<input type="submit" value="formSubmitbutton" id="submit123"><br>
look at the code below and tell me what you think
$(document).on('click','#afterbutton',function(event) {
event.preventDefault();
var form = document.getElementById("myForm");
form.submit();
document.getElementById("test").innerHTML = "afterbutton";
});
$(document).on('click','#beforebutton',function(event) {
event.preventDefault();
var form = document.getElementById("myForm");
form.submit();
document.getElementById("test").innerHTML = "beforebutton";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="submit" value="formSubmitbutton" id="submit123"><br>
<button id="beforebutton">beforebutton</button><br>
</form>
<button id="afterbutton">afterbutton</button><br>
<p id="test">click me</p>
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...
});
});
});
I use a JavaScript to load new pages on my webpagepage. looks like this:
function loadpage(page,div) {
$.get(page, function(data) {
$(div).html(data)
});
};
So when i submit my form, I want to use that function to load the php-page you normally would set as your "action" attribute in the form-tag. So how do I get the form to POST or GET(doesen't really matter) all its content and use the function.
Now, when I write:
<form action="javascript:loadpage('bla.php','#content');" method="post">
...
</form>
it loads bla.php the way i want it to but no data is being passed byt the POST...
Is there a solution to this problem? Thank you very much in advance.
see form.onsubmit event
Using your method, you would do it as follows:
Javascript:
function loadpage(page, div, form) {
var GETdata = '';
if ( form ) GETdata = $(form).serialize();
$.get(page, GETdata, function(data) {
$(div).html(data)
});
};
HTML:
<form action="javascript:loadpage('bla.php','#content', this);" method="post">
...
</form>
A better way would be to use non-obtrusive Javascript. Remove the inline javascript:
<form id="theForm" action="" method="post">
...
</form>
and bind your event handler from within your Javascript code:
$('#theForm').submit(function(e){
e.preventDefault();
loadpage('bla.php','#content', this);
});
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" ...