Reset all buttons and drop down lists - javascript

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();
}

Related

How create a button click on intut [duplicate]

This question already has answers here:
Submit two forms with one button
(7 answers)
Closed 8 years ago.
I have two different forms. Each of them has its own submit button
<input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit ajax-processed">
and
<input type="submit" id="edit-submit--2" name="op" value="Submit" class="form-submit ajax-processed">
I need to make a separate button that would click on these two input. How can I do this?
If you have more than 2 forms and only want 2 of them to be submited, they must have a common part, like a css class (no styling here, only a selector).
HTML part :
<form id="form1" class="myForm ..."/>
<form id="form2" class="myForm ..."/>
<input type="button" id="myButton" value="Submit both forms"/>
js :
$("#myButton").click(function(){
$(".myForm").submit();
});
You can add as many form as you want, if they have the class myForm, they will be submited too. No need to change your js code...
Just provides the ids to your form.for example:
<form id="form1" class="myForm ..."/>
<form id="form2" class="myForm ..."/>
<input type="button" value="Click Me!" onclick="submitForms()" />
<script>
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>

how to make reset button on Metro UI bootstrap?

i have some problem on my php code..
<form id="form1" method="post" action="proses.php">
<div class="input-control text area">
<textarea name="ipt1" type="textarea"><?php echo $data['data'];?></textarea>
</div>
<input name="submit-btn" type="submit" value="Submit"/>
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementById('form1').clear();"/>
</form>
the result is nothing happened when i click the "Clear" button, and "ipt" field is not cleared,
i need to help, if anyone know, please tell me.
The type='reset' button will reset all form values, but your problem is you have some default values coming from PHP. You can do the following:
<input name="clear-btn" type="reset" value="Clear" onclick="document.getElementsByName('ipt1')[0].innerHTML=''"/>
innerHTML here is used to access the content inside textarea.
DEMO

HTML5: Change button focus when using another input box

I am making an HTML5 page with multiple forms. Each input box has its own submit button to convert the temperature unit into another (Celsius to Kelvin, etc.). What tags or attributes do I need to make the submit button focus when its input box is focused or typed in by the user?
Javascript (made from coffeescript) is used in this file. There is no CSS.
You can use javascript for this
write onfocus="hilight(form_number);" on each input box.
and in your function you can hilight the button
<form name="form1">
<input type="text" onfocus="hilight(1)" />
<input type="submit" id="btn_1" class="button" />
</form>
<form name="form2">
<input type="text" onfocus="hilight(2)" />
<input type="submit" id="btn_2" class="button" />
</form>
<form name="form1">
<input type="text" onfocus="hilight(3)" />
<input type="submit" id="btn_3" class="button" />
</form>
<script>
function hilight(opt)
{
document.getElementById('btn_'+opt).style('','');//you can add any styles to button here
}
</script>
Have you tried using the onblur event of the input box to set the focus to the respective submit?

Resetting textbox in javascript

I'm working on a project for school and I'm stuck on how to reset all the textboxs on the page. This is what my reset button looks like:
<form name="Reset">
<input type="button" value="New ordering sheet." onClick="Reset()">
</form>
I don't know what to do for the function, I have no code for the Reset() function:
function Reset() {}
Have a look at the following questions, there are a few ways of doing it in them:
How to clear all textboxs in a DIV using jQuery?
JQuery how to clear all the input:textfields of a .class on a form. Not working for me
i think this can help!! just have a 'reset' input inside your form :-)
<form name="myform" action="http://something" method="POST">
<input type="text" size="25" value="Enter your name here!">
<input type="submit" value="Send me your name!">
<input type="reset" value="Reset!">
</form>

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.

Categories

Resources