Develop Reference

How to prevent form resubmit on refresh while form is submitting

I'm using nodeJs, handlebars, and JavaScript to submit a form with the post action but form submission is taking time due to a lot of data to store in DB son while the form is submitting if someone refreshes the page it creates duplicate data in DB.
can you tell how can I prevent this from happening?
I create a button to submit the form and submit using Js like this.
function sumitform() {
var myform = document.getElementById("myForm");
myform.submit();
}
<form id="myForm" action="/path/toNodePostApi" method="post">
<input name="name" value="{{{data}}}">
<input id="btnsubmit" class="btn" type="button" value="submit" onclick="sumitform()">
</form>

You can disable the button after is pressed, but this is not going to hold the user form "refresh" the page and re-submit the values.
In my case I do a "Working or Submitting" icon while doing it, but you will have to validate on the server side. This will only let the user know, that the page is working on something a wait before hitting refresh.

You could ask the user to confirm they want to leave (or reload, in this case) the page:
window.onbeforeunload = function() {
return true;
};
In addition you could store the data in session. Check to see if there is data in session on page load. If it is there, the page was reloaded and you can make an api call to take appropriate action on the server to remove the previously sent data (or prevent it from being sent again from the client in the first place).

document.getElementById("myForm").addEventListener("click", function(event){
event.preventDefault()
});
It prevent from reloading on button click
Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

Javascript Form Submit causing website to break

So I'm having an issue submitting a form. Basically once the form is submitted the entire site wont work until I clear the cash and refresh the browser.
The form tag is
<form action="cart.php" method="post" name="AutomaticReorderForm">
The form was initially being submitted like
function saveAutomaticReorder()
{
document.AutomaticReorderForm.action = "/store/save_automatic_order.php";
document.AutomaticReorderForm.submit();
}
which has a javascript call to this function in the href of the button.
I tried jquery like so
$("#saveAutomaticReorder").click(function() {
$('form[name="AutomaticReorderForm"]').attr("action", "/store/save_automatic_order.php");
$('form[name="AutomaticReorderForm"]').submit();
});
These both submit the form fine. In the php page at the very top i put in die(); which killed the page before any php was run but then it still gave me the same problem of breaking the whole site. Im not sure where to go from here does anyone have an idea about what could be causing this issue? Thanks

Using JQuery to self-submit a form

I'm trying to use JQuery to submit a form on the same page within a DIV. It works fine, however whenever I submit the form, it reloads the form script. For example
add-album.php contains the form and PHP logic
index.php contains include("add-album.php") within the DIV tag.
While on index.php, I will fill in the form details and click 'submit' which then redirects to add-album.php. How can I prevent this from happening?
JQUERY Code:
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#container").load(this.href);
});
});
PHP _SELF form:
<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
Thanks in advance

Just prevent form from submitting:
$('form').bind('submit', function(e){
e.preventDefault();
return false;
});

The action of the form is the address of the current script because you set it to $_SERVER['PHP_SELF']. It's a little tricky, though - it's going to be the script that runs that code, which may or may not be the one loaded directly by the browser.
This means that when you submit, either manually or with jQuery, you are going to send the data and request to whatever corresponds to $_SERVER['PHP_SELF']. If you want to arrive somewhere else, you probably want to set the action of the form to be something besides this "current script" value. In this case, add-album.php is the file that is calling <?php echo $_SERVER['PHP_SELF'] ?>, so you get add-album.php in the action.
To see what I mean, look at the rendered code of the index.php page. You will see that the form tag renders with action="add-album.php" or something similar. That's why add-album.php loads when you submit. You may find that setting the action with a static value is what you want. You left out one important detail - where do you want to send the form data?

Struts action should be open as popup onclick of a href link

I have a form on my jsp,
<form action="test1_action" name="test" method="post" id="test">
also I have two different link link1, link2 here,
onclick of link1 I should submit test1_action action
$('#link1').click(function() {
document.forms['test'].action='test1_action';
document.forms['test'].submit();
});
This works perfect for me.
what My expectation is when I click the second link popup should open with different action something like follows below.
$('#link2').click(function() {
document.forms['test'].action='**different_action**';
document.forms['test'].submit();
});

You are using jQuery so there is no need for manual DOM traversal:
$('#link1').click(function() {
$('#test').attr('action', 'test1_action').submit();
});
$('#link2').click(function() {
$('#test').attr('action', 'test2_action').submit();
});
The action attribute defines the page to which the form sends its contents, most commonly a page that interfaces with the server in some way (PHP, JSP, etc.).
What do you mean by "popup"?

You can use window.open() to open a window with a specific name, and then use that name as the target for the form submit.
$('#link2').click(function() {
window.open("","test2win","directories=no,status=no,width=600,height=700,top=0,left=0");
$('#test').attr({
'action' : 'test2_action',
'target' : 'test2win'
}).submit();
});
I'm not sure that the above will work in all browsers though. If not, you might have to just forget the window.open() step and just submit the form with target=_blank and then set the size from within the page being returned from the submit.

Submit a form in the background

How can I submit a form to a third-party website without it causing the page to reload (i.e. in the background)?
For some background, I'm trying to programmatically log a user into their google account in the background.
I can programmatically log them in using the following:
var div = document.createElement("div");
div.innerHTML = FORM_HTML;
var form = div.getElementsByTagName("form")[0];
form.action = "https://www.google.com/accounts/ServiceLoginAuth";
form.GALX.value = FORM_GALX; // dynamically obtained using AJAX
form.Email.value = USER_EMAIL;
form.Passwd.value = USER_PASSWORD;
form.submit();
This logs me in and opens up my Google dashboard. How can I prevent form.action from redirecting me?
Please note that this div is never actually added to a document, which is preferable but not required.

you can set the target to submit the form to an IFRAME
like that
<form target="transFrame" method="POST" action="http://...." ></form>
<iframe style="" name="transFrame" id="transFrame"></iframe>

You need to use AJAX to generate XMLHttpRequest best using any popular JS library such as jQuery, Prototype JS or Mootools.

you can use ajax or jquery for request to submit form in background if you want to submit form to secure connection i think they want allow submit form in this way..