Develop Reference

HTML/JS Form being submitted twice

I am using node.js/express to create a webpage.
I currently have a form with some input and a submit button which is trigger by the click of another button currently on the page
This is the code for my form:
<form name= "form" id="form-id" action="http://localhost:1337/process_post" method="POST">
<input type="hidden" name="hiddentext" id="textarea"/>
<input hidden type="submit" name="submitbutton" id="submit_button"/>
</form>
This is my button (which triggers the submit for the form to be clicked during the onclick event)
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id')" />
This is my JS script to click the submit button
function load_page(formId){
document.getElementById("submit_button").click();
}
The issue I have is that the form is being submitted twice. I am unsure why this happens and how to fix the issue. Any tips?

You need to return false in your onclick attribute so as to prevent the default action, which is to submit the form (which you're already doing). Like this:
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id');return false;" />

submit form by button using form.js plugin

I am using this plugin to submit form with file upload.
Usually my forms are posted (without using this plugint) using:
<button id="send">Send</button>
and using js like this:
$('#send').click(function(){
ajaxSubmit();
});
This plugin is looking for the usual
<input type="submit" value="Send">
to send the form so that I can keep my buttons instead of the default buttons. My point is to update my click function to trigger form submitting via this plugin.
The plugin is initialized via:
$("#myForm").ajaxForm(options);
Any help?
My actual workaround is to style input buttons like my standard buttons but I'd prefer to keep all my code the same way (always using buttons to submit forms instead of inputs)

If you check the documentation, there are multiple ways of submitting the form with that plugin:
<input type="submit" name="submitButton" value="Submit1">
<input type="image" name="submitButton" value="Submit2" src="submit.gif">
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
You could use the last one. For that, just add type="submit" to your button, and it should be enough:
<button id="send" type="submit">Send</button>

Without seeing more code, the one thing I can say is that your javascript references an object with an ID of "send" but your input has no ID.
Try <input type="submit" id="send" value="Send"/>.

multiple submit buttons on same form with onsubmit function

I have 3 sumbit buttons in myform and i need different 3 actions based on which buttton it clicked. so i need to write javascript function to do the same. how i can get to know in javascript which button is clicked.
Javascript:
<script type="text/javascript" language="javascript">
function submitform(){
//do something
}
HTML:
form name="myform" method="get,post" onsubmit="return submitform();"
input type="submit" name="submit" value="Home"
input type="submit" name="submit" value="Reschedule"
input type="submit" name="submit" value="Cancel"
Any help will be appreciated

Edit:
You could also have a hidden input which tells you which button was pressed, then handle it on the server. When a button is clicked it will change that input before submitting.
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='forward';return true;" id="linkName" value="Forward" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='back';return true;" id="back" value="Back" />
Demo: http://jsfiddle.net/Homeliss/vperb/
Note: the demo uses jquery to show a message instead of posting the form, but that is just for demo purposes. The solution is plain javascript

In modern browsers, you can use the submitter property of a SubmitEvent.
function submitForm(submitType)
{
switch (submitType)
{
case 'Submit 1':
console.log('Submit 1');
break;
case 'Submit 2':
console.log('Submit 2');
break;
}
return false;
}
<form onsubmit="return submitForm(event.submitter.value)">
Name: <input name="name" required /><br />
<div>
<input type="submit" value="Submit 1" />
<button type="submit" value="Submit 2">Submit 2</button>
</div>
</form>

If you could use jQuery, then this could be much easier.
One solution however would be to remove the submitform() from the form and add it to the onclick event of each of your submit buttons. This way, you can alter it to pass a parameter denoting which button called it.
Good luck.

we can submit a form once in html pages. So we use only one submit button in a form. But for calling more functions we can use onClick event and input type should be button.

I have a question. is there any other input field inside your form?
If there is another field such as text field, which buttons action will be call when we press Enter inside the text field?
My suggestion is this:
<form name="myform" method="get,post" onsubmit="return false;">
<input type="button" value="Home" onclick="submitform(1)" />
<input type="button" value="Reschedule" onclick="submitform(2)" />
<input type="button" value="Cancel" onclick="submitform(3)" />
</form>
in this code, user must click on a button to submit the form and pressing the enter will not cuse to doing any action.

jquery form submit changing values to whole form

In my jquery I have
$('form#submit :input').val("");
Which is changing the value of the form to empty after success:. Problem is that its changing every value of everything in the form.
<form id="submit" method="post" name="submit" action=""><input type="hidden" name="word" id="word" value="<?=$word?>"><textarea name="sentence" id="sentence" cols="45" rows="5"></textarea><input type="submit" value="Submit" style="font-size:2em; vertical-align:bottom" /></form>
So the textarea and submit button are being blanked out. I want the textarea to blank out, but not the button. Is there a way to just specify the button?

Do it this way
$('form#submit :input').not('input[type="submit"]').val("");
Check Fiddle

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George

You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks

<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.

If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>

<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).

make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>

If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.