Resetting textbox in javascript - 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>

Related

required attribute is not working in select [duplicate]

I have a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.

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 clear form elements that are pre-populated with $_POST values

If you run and submit the form below:
<!DOCTYPE html>
<html>
<body>
<form action="" method="POST">
First name:<br>
<input type="text" name="firstname" value="<?php if(isset($_POST['firstname'])){echo $_POST['firstname'];} ?>"
<br>
<input type="submit" value="Submit">
<input type="button" onclick="this.form.reset()" value="Clear Form">
</form>
</body>
</html>
Why does this.form.reset() not work when the form is pre-populated with the previously submitted value? The Clear Form button only works before submitting data. I've tried a number of similar approaches using jQuery as well that also only work before submitting the form, never after.
Since JavaScript runs after server-side code, I would expect the value from $_POST['firstname'] to be replaceable with JavaScript (in this case, an empty string).
As suggested by #Taplar reset will set value which was initially set while page load. Don't get confused with "Reset" form value Vs setting value to "" (Blank string)
Try this:
HTML:
<input type="text" id="fn" name="firstname" value="preloaded value" />
<input type="button" onclick="clear_form();" value="Clear Form">
JAVASCRIPT:
function clear_form() {
document.getElementById('fn').value = "";
}

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

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

Categories

Resources