If I clicked the button with value of 100 the result is 100 and it will display on the input field, if I clicked the reset button it will cleared the field. But the problem is if I clicked again the button with value of 100 the result will be now 200.
function resultreset() {
document.getElementById("result").reset();
}
I expect the reset button will reset (back to zero) the result in the input field, but it's just clearing it.
See documentation on HTMLFormElement.reset():
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.
The default value is not 0, but an empty string. If you want the default value to be 0, you have to say so explicitly in the HTML, eg with
<input value="0">
function resultreset() {
document.getElementById("result").reset();
}
button.onclick = resultreset;
<form id="result">
<input value="0">
</form>
<button id="button">click</button>
If you put this into form tag it will work properly Because you can not use reset() method on input tag it will definitely throw an error.
Your output can be achieved in two ways:
First using form
function myFunction() {
document.getElementById("myForm").reset();
}
<form id="myForm">
<input type="text" name="lname" value="0">
<input type="button" onclick="myFunction()" value="Reset ">
</form>
Second using defaulValue property
document.getElementById("input_id").defaultValue = "0";
Related
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>
I want to get input from the user in a type="number" text box.
the limitation is a number between 1994-1998.
I currently have two buttons. One "submit" button and a second ("button") button that goes to the next screen.
I want to make the 2 buttons one.
Which means that as soon as I click the "Move to Next page" button, the input is also checked.
And you can move to the next screen only with proper input.
would much rather do it only with HTML and less with JavaScript if possible.
If there is no option then it is also possible with JavaScript.
function check () {
console.log('Checked!');
}
<div>
between 1994 and 1998: <input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit">
Calculate the answers!
</div>
</div>
<div class="box" id="section6">
<h1>fin!</h1>
<div class="question-text">
<input style="padding: 20px;" type="button" class="btn" onclick="check();">check!!!
</div>
</div>
From what I understand you want to go to next page only if input is correct then check this out. I have created a form and placed your html inside it. Now the submit button will only work if check function return true.
function check(){
//return true, if correct
//return false, if incorrect
return true;
}
<form action='yourURLforNextPage' method="POST">
Between 1994 and 1998:
<input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit" onclick="return check();">
</form>
function check(){
let val = document.getElementById("section5input");
if((val.value!= "" && null) && (val.value> 1994 && val.value<1998) ){
//code to render to next screen
}
}
In my javascript code i have 4 input fields and one submit button. When click on SUBMIT button the first input field value should be fix not to change and remaining 3 input fields should reset to empty fields after filling some data.
And I am calling page refresh function in SUBMIT button.
So whenever i am clicking to submit button my first input also getting refresh.
Could any one please look into that and help fix this issue.
Thanks in advance....
<!DOCTYPE html>
<html>
<head>
<script>
function refreshPage(){
window.location.reload();
}
</script>
<script>
function incrementValue(){
var value = " " + parseInt(document.getElementById('number').value);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = "00" + value;
}
</script>
</head>
<body>
<form>
First Input Value should set after refresh page : <input type="text"
id="number" value="001" readonly/><br>
Second Input Value should reset : <input type="text" autofocus /><br>
Third Input Value should reset: <input type="text" autofocus /><br>
Forth Input Value should reset : <input type="text" autofocus /><br>
<button type="submit" onclick="incrementValue(), refreshPage()"
>Submit</button>
</form>
</body>
</html>
Try using localStorage, which allows you to get information from webpage even after refreshing it.
https://www.w3schools.com/jsref/prop_win_localstorage.asp
I am just trying to increment a number in a form. This works but the input is big, tried to size with no luck. And I don't want the increment up/down inside the input box. Changing the box to text, gets me the right sizing and no up/down. But the increment doesn't work.
Is there an easier way. Also when I put inside a <form> tag, the plus minus button don't work.
function HaFunction() {
document.getElementById("HNumber").stepUp();
}
function HmFunction() {
document.getElementById("HNumber").stepDown();
}
Number: <input type="number" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button onclick="HaFunction()"><b>+</b></button>
<button onclick="HmFunction()"><b>-</b></button>
</span>
You can make the input smaller with CSS:
<input style="width:40px" type="number" id="HNumber" class=verd15 value="0">
Hope this helped
You can write your own function that increments the number in a text input.
If you have a form, make sure your buttons use type="button". By default it's type="submit", so clicking on the button will submit the form and you'll reload the page.
function addToInput(element, amount) {
var val = parseInt(element.value, 10) || 0;
val += amount;
element.value = val;
}
function HaFunction() {
addToInput(document.getElementById("HNumber"), 1);
}
function HmFunction() {
addToInput(document.getElementById("HNumber"), -1);
}
<form>
Number: <input type="text" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button type="button" onclick="HaFunction()"><b>+</b></button>
<button type="button" onclick="HmFunction()"><b>-</b></button>
</span>
</form>
I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.