Develop Reference

Reset all buttons and drop down lists

I am attempting to create an order form. I want it so that when you select the button to print out your order to also have it reset all the selected buttons. For the sake of simplicity I have given an extremely simplified version of my actual order form:
Html:
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();"
</form>
Javascript:
function reset(){
document.getElementById("myForm").reset();
}
My Problem is that when I click the button to reset the page, the checkboxes stay selected.

If you want to just reset the for then use RESET button as bellow
<form id="myForm">
//YOUR FORM ELEMENT EITHER CHECKBOX OR OTHERS
<input type="reset" value='RESET'/>
</form>
Now there is no need to write any script code, type='reset' will automatic handle reset of all element inside your form tag.

There is an unbalanced tag in your html, also input type='reset' can be used to reset the form
function reset() {
document.getElementById("myForm").reset();
}
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset()" value="button reset">
<!--Adding new input type -->
<input type="reset" value="reset"> </form>
</form>

Problem is your HTML, the last input button is not closed properly
Here is working JSfiddle
<form id="myForm">
<input type="checkbox">
<input type="button">
<input type="button" onclick="reset();">
</form>
Javascript code
function reset(){
document.getElementById("myForm").reset();
}

how to disable form submit button and upload the form data

Hello I have managed to disable the submit input when clicked but the problem i am having when the PHP ifisset runs it does not store the parameters in the database after disabling the input submit, however after my research and test it does not upload the data inputted to the form but disables the button but when i remove the Jquery code no action is taken and the picture uploads it this is my code
//input submit works if not disabled but does not run if disabled after onclick which i feel when the button is disabled the form submit has no name valid
<script>
$(function() {
$('#theform').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
});
</script>
//My form
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="sub" value="UPLOAD">
</form>

All i want is to not allow the user to not submit values twice thats all
In that case, I would divorce the button from the submit event and the form data itself by using type="button" for the "submit" button and using a hidden input for the sub value like this:
$(function() {
$('.submit').click(function(){
$(this).prop("disabled",true).val("Please Wait...").closest('form').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" role="form" id="theform" enctype="multipart/form-data">
<input type="file" name="file">
<input type="hidden" name="sub" value="UPLOAD">
<input type="button" class="submit" value="UPLOAD">
</form>

ajaxForm not submitting on file input select change

Hey guys I'm trying to submit a simple form with a file input type in it. The challenge is that I want the submission to occur on file select.
My form is as follows:
<form id="uploadForm" action="submit.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageBtn" type="file" class="upload" name="image"/>
</div>
</form>
My JavaScript is as follows:
$("input#imageBtn").change(function () {
console.log("submitting...");
// bind to the form's submit event
$('#uploadForm').submit(function() {
console.log("submitting...form");
$('#uploadForm').ajaxSubmit();
return false;
});
});
For some reason I only see "submitting..." in my console and nothing beyond that and nothing gets submitted.
Any help would be greatly appreciated!
Thank you.

From jQuery documentation:
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit input type="submit", input type="image", or button type="submit", or by pressing Enter when certain form elements have focus.
https://api.jquery.com/submit/
Try adding an appropriate tag like
<input id="imageBtn" type="file submit" class="upload" name="image"/>

The following seems to work.
<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
<div class="fileUpload btn btn-lg btn-primary">
<span>Choose File</span>
<input id="imageToBeUploaded" type="file" class="upload" name="image"/>
</div>
</form>
$("body").on('submit', '#imgForm', function(){
$(this).ajaxForm({target:'#uploadStatus'});
console.log("submitting...");
return false;
});
/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
//submit the form
$("#imgForm").submit();
});

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.

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.