I did a jQuery form (form1) which bring another form(form2) in that page through ajax.
Now I want to submit the form2 data through ajax.
But whenever I click the button, it submit the whole page. I mean the whole page reloads.
$(document).ready(function() {
$("#form2").submit(function() {
$(this).ajaxSubmit({
beforeSubmit: function(before) {
$('.loading_result').html('Loading...');
},
success: function(dd) {
$('.loading_result').html(dd);
}
});
return false;
});
});
All the JavaScript codes in the parent page. I don't have any JavaScript codes in ajax pages
//
page.php
* There is a form (form1) in this page.
* All the jQuery functions are inside the page.php
When the form1 is submitted, it brings data from page2.php // It works good.
** page2.php gives form2.
Now when i submit the from2 (which is also in page.php after the ajax request) it does not trigger the jquery function inside page.php
Instead of binding the form submit on $(document).ready, I usually just include an "onclick" event to the form's button:
<button type='submit' onclick='MyAjaxFunction();return false;'>Submit</button>
The return false; portion of the onclick will prevent the form from submitting.
This is because the form is being submitted in the traditional sense. This is the default action of the submit event. You need to suppress this:
$("#form2").submit(function(evt) {
evt.preventDefault(); //<-- prevent the event's default action
//code here...
Related
I noticed one pecular thing. When there are several submit buttons in your HTML form like so:
<button type="submit" name="submit_button", value="b1"></button>
<button type="submit" name="submit_button", value="b2"></button>
<button type="submit" name="submit_button", value="b2"></button>
..and you do this:
var $form = $('#my_html_form');
$form.submit(function() {
if (!checkPassed && !hasRequiredValue) {
bootbox.confirm('Are you sure that you don\'t need <strong>{requiredValue}</strong> parameter?', function(result) {
if (result) {
checkPassed = true;
$form.submit();
}
});
return false;
}
});
the field submit_button does not get submitted at all, it's just not present in the request data.
Would there be a way to force JS to submit data together with the value of the submit button clicked?
I will only add that if the form is submited with PHP and not JS, the submit_button field is present and has the value of b1, b2, or b3 - depending on which button was clicked.
P.S. I just thought that the source of the problem might be that I'm using <button> instead of <input>. However, as I said, it's all good with PHP.
Only a successful submit button will be included in the form data.
A successful submit button is one that is used to submit the form.
Your JavaScript runs on the submit event and:
Always cancels the submission of the form
Sometimes submits the form with JS
Since you are submitting the form with JS instead of the submit button, none of the submit buttons are successful.
Change your JS so that it:
Sometimes cancels the submission of the form
Such:
$form.submit(function() {
// Add a NOT condition here
if (!<someCondition>) {
return false;
}
return true;
});
Regarding the update:
OK, so you are always canceling the submission, and using a DOM based widget to ask for confirmation.
In that case, you need to capture the value of the submit button separately.
The information isn't exposed to the submit event so you need to do it on the click event of the submit button.
Add a hidden input to your form:
<input type="hidden" name="submit_button">
Then add another event handler:
$form.on("click", '[name="submit_button"]', function (event) {
$form.find('[type="hidden"][name="submit_button"]').val(
$(this).val()
);
});
Yes you can get the value of the button
$('button').click(function(event) {
var button = $(this).data('clicked', $(event.target));
var value = button.val();
});
Here you go.
$("button[name=submit_button]").click(function() {
alert($(this).val());
});
Fiddle: http://jsfiddle.net/tw698hvs/
I have a form that I want to use jquery for validation of the form before I submit. If I click on one of the buttons, I have it save the data via an ajax call. For the other button I want to submit the form, but not have it go through ajax, just do a submit the old fashioned way and go to that page.
I had the submitHandler in my validate() function, which works great for doing the ajax stuff, but what about for the other button where I don't want to use ajax? Do I remove the submitHandler portion from the validate() function? If so, then how should I set up for using ajax? Do I put it in the event handler for the click on that button? If so, how should I set it up?
Can't you just create 2 different functions or just one parameterized with a boolean to indicate whether to send ajax request or just submit the form? the latter may be done using the JQuery submit function.
I think the best way is to bind a personal event
$('form').on('submitajax submit', function(e){
if(e.type === 'submitajax'){
//ajaxstuff
}
else{
//classic stuff
}
})
And your ajax button will trigger the submitajax event
Your validation function can be like this:
function bar( ajax )
{
var valid = true, fooForm = $('#fooForm');
// do validation stuff
if( !valid ) return;
if( ajax ){
$.post(fooForm.attr('action'), fooForm.serialize());
}else{
fooForm.submit();
}
}
And your buttons:
<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />
You need check JavaScript events on submitting form.
Just consider form:
<form class="js-form">
<a class="js-save">Save</a>
<input type="submit" value="Submit"/>
</form>
$('.js-from').on('click', function(event){
if (event.target === event.currentTarget){
# Triggers on click submit input that triggers as part of form and target same
# Call ajax stuff
} else {
# Triggers on click link witch is fired as click as not a part of form
# Call other ajax or link stuff
}
});
One function for cheching if form submit on submit button or link that can do any thing other
I figured it out. In my ajax button click event handlers, I needed to add
event.preventDefault();
Then I could add the $.ajax() call to the one where I wanted to call ajax, and to the other one just did the submit normally.
Thank you for all of your responses, it was an interesting exercise and I learned a bit more about the intricacies of this type of coding.
<script>
//jQuery('#frmSearch').click(function() {
jQuery(function(){
jQuery('#frmSearch').on('click', function(e){
e.preventDefault();
jQuery.ajax({
type: 'POST',
url: 'mutualfundsprices/do_price_archive.php',
data: jQuery('#frmSearch').serialize(),
success: function(data) {
jQuery('#DisplayResult').html(data);
}
});
return false;
});
});
</script>
the above is my JavaScript to display a different PHP page but after loading the result, the result disappears.
What is wrong with my code?
I guess #frmSearch is a form on your DOM, right?
My guess is that the form is being submitted twice, once using your onclick function (ajax), and then the second may reload the page so that your AJAX-loaded HTML disappears. But I may be out of line here.
You are assigning an onclick, which is quite uncommon for forms. But still, e.preventDefault and return false; on an onclick event won't prevent the form to submitting if you ever click on the submit button. You might want to use the onsubmit event of the form instead, or, better yet, avoid having a submit button but rather have a normal button if you want to handle form submissions always using AJAX in your callback function.
Just want to get a concept clear here.
suppose i have this html page:
<script>
function_1()
{
... posts a form via ajax
};
</script>
<body>
<div class='car'>
</div>
</body>
On an event I prepend() this form (which I get via ajax) to the above <div class='car'>
<form method='post'>
...
<button type='submit' value='post' />
</form>
The idea is to submit this form via ajax by calling the function_1 function on pressing the submit button.
Does this work? Because when I submit the form it is not calling the function_1, its just posting it via regular Http post.
When we append() or prepend() elements to DOM, do they have access to javascript right away?
Thank you
You are appending those form elements during run time, so you have to register events for it by using event-delegation. And by the way it is a submit button, so whenever you are clicking on it, it will simply invoke its default action, that is submitting the form. So you should use e.preventDefault() to prevent its default behaviour or you should need to change the type of that button from submit to button
Try,
<script>
$(document).ready(function(){
function function_1()
{
... posts a form via ajax
};
$(document).on("click", "input[type='submit']", function(e) {
e.preventDefault();
function_1()
});
});
</script>
You need to use a delegated event handler, for example:
$(document).on("submit", "#your-form-id", function(e) {
e.preventDefault();
// AJAX code
});
Then, the handler will be called on submit regardless of when the form is appended, as long as the form exists.
I tried to implement a file upload process in my grid.
I chose to use the jquery.iframe-post-form plugin.
Most solutions post the data of the form and after the upload file.
In order to post all data of a form at once (Lastname, ...) + photo, I replaced the submit button of the form (sData) by mine.
$(formid).removeAttr('onsubmit');
$(formid).iframePostForm({ ... });
I attached code to this new button (click event). I changed the submit button id , so jqGrid will not attach its click event .
$('#sData').attr('id', 'mysubmit')
.click(function(e)
{
...
$(formid).submit();
})
Therefore I changed the behaviour of jqgrid: no beforeSubmit event, no afterSubmit event, no afterComplete event !
How to fire after all the afterSubmit event for getting back errors ?
How about just overriding the default behavior of the button?
Do your custom stuff the submit the form?
$(document).ready(function () {
$(":button").click(function (event) {
event.preventDefault();
//Do Stuff then submit the form
$('form').submit();
});
});