i have an event that submits automatically,
i already put url and method: POST on <form> tag, so i just called $('#myform').submit()
and after that submit, it will redirect to another page for that respond,
what I asked here, i want to do something after it submitted successfully, I was using setTimeout but we don't know when the page redirect, right? it because of the internet connection as well, so how do u handle this ??
$('#myform').submit() will auto submit the form.
What you need to do is :-
$('#myform').submit(function() {
// DO STUFF HERE...
return true; // return false to cancel form submission
});
Now perform the action and return true.
Related
I have a simple React app that has a form in it and upon the user clicking submit, post the form to a server. Simple enough.
But React is firing the AJAX call multiple times (4-5 usually) in immediate succession, creating all sorts of issues. I don't know why - I assume it has something to do so React's lifecycle, but I am not sure.
I am using axios as a AJAX library, so perhaps the problem is with that library (I think not though).
Here is the method that fires the code:
submitEvent(event) {
event.preventDefault();
const apiQueryString = `api/event?${qs.stringify(this.state)}`;
if (this.state.event_title === undefined) {
alert('Event title is required!');
} else {
axios.post(apiQueryString)
.then((result) => {
this.state.id = result.data[0];
store.dispatch({
type: 'ADD_SINGLE_EVENT',
event: this.state,
});
alert('Success creating event!');
this.setState({}); // clear out old values
browserHistory.push('/');
})
.catch((error) => {
console.log(error);
alert('Error with database! See console for output.');
});
}
And this is the button that fires this function:
<button onClick={this.submitEvent} className="btn btn-primary">Submit</button>
The entire file's source code is here, and the working page is here.
Thanks for any help you can offer.
The problem was with the middleware. In the method that handled this AJAX request on the backend, a new item was being inserted into the database on the successful callback of req.getValidationResult(). This success callback was being called twice, resulting in multiple database inserts.
I would move the submission from the button to the form. Any button inside a form will trigger the form to submit on click, unless that button has type=button attribute. In your case the button click would cause the form to submit, which would then submit a form GET request to your current page.
Your submitEvent method is already preventing the default event, which should stop the native form submit from happening.
<form onSubmit={submitEvent}>
// this button is inside form so clicking it will trigger form submit
<button className="btn btn-primary">Submit</button>
</form>
If you have only one button in your form and you don't specify it's type (button/submit) by default it will be a submit button.
So it is better to use onSubmit instead of onClick here.
<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.
I am using validationEngine to validate a form that is also launching a please wait modal.
Here's the code I am using to do this:
$("#main_form").validationEngine({
onValidationComplete: function(form, status){
if(status) {
ShowProgressAnimation();
form.validationEngine('detach');
form.submit();
}
}
});
The issue I am having is I have a script that launches window.onbeforeunload.
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
});
Normally it would ignore form submissions, but in this case because of the form.submit it's not.
Is there a proper way to detect this and stop the window.onbeforeunload from loading if it detects the form.submit?
Thanks!
EDIT:
I also forgot to add I think this issue only exists in IE.
The given script does not launch window.onbeforeunload, it just assigns a function to it.
If you want to prevent form submission, you need to return false in the submit handler:
$("form").submit(function(e){
window.onbeforeunload = UnPopIt;
return false;
});
I wrote the following code to post data with jQuery, It's working fine, but without return false;, the code didn't work, I found this return statement after 1 full day of searching...
Could somebody please tell me, what is the use of return false; after the end of $.post?
I am a newbie in jQuery and would like to get a better understanding of this.
$("#formid").submit( function () {
$.post(
'ajax.php',
$(this).serialize(),
function(data){
$("#result").html(data);
$("#result").fadeIn('slow');
}
);
return false;
});
The return false; here is not used for $.post method of AJAX instead it is used to prevent the form(#formid) submission which can cancel your AJAX request
If you remove the return false;, you will see that the browser continues to submit the form (not using AJAX). Returning false will prevent the browser from doing the default action, resulting in only the AJAX call occurring.
A similar result can be gotten by calling preventDefault() on the event object passed into the submit event.
For example:
$("#formid").submit( function (event) {
$.post(
'ajax.php',
$(this).serialize(),
function(data){
$("#result").html(data);
$("#result").fadeIn('slow');
}
);
event.preventDefault();
});
Return false stops the default form action from being executed whenever a user clicks the submit button. Only the jQuery part is executed. Else, the whole page would have been reloaded upon form submission.
You can read about that on the.submit() page on jQuery API.
There's the following paragraph:
when the form is submitted, the message is alerted. This happens prior
to the actual submission, so we can cancel the submit action by
calling .preventDefault() on the event object or by returning false
from our handler. We can trigger the event manually when another
element is clicked:
The return false is actually preventing the default action that is form submit. If you don't write that statement, your form is getting submitted.
I have a form that uploads a file and targets an iframe on the page. When the user clicks submit, I want the file contents to "clear" out.
I tried this
$('#imageaddform').submit(function(){
$('#imagefile').val('');
});
But it clears the form before the submit, so nothing is ever uploaded.
Is how do I clear after submit?
If you have no other handlers bound, you could do something like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
$('#imagefile').val(''); // blank the input
});
Lonesomeday's solution worked for me but for Google Chrome I found it would still submit empty form data unless I added a timeout like this:
$('#imageaddform').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
setTimeout(function(){ // Delay for Chrome
$('#imagefile').val(''); // blank the input
}, 100);
});
You could do something like this:
$('#imageaddform').submit(function(){
setTimeout(function() {
$('#imagefile').val('');
},100);
});
How are u submitting the form? if this is normal form post then then page wont exist in that case i am wondering if u are looking to clear the form before the page refreshses so that when the user comes back he doesn't see the values populated.
If the form is submitted by ajax then you can
function(){
$('form1')[0].submit();
clearForm();
}
Did i miss the question?