How do I completely reset a form without having the user's prior input reappear?

user_14057446 0
Viewed 68

I have typed the following below. I am attempting to run a while loop to allow the user to input positive numbers only and display them on the three input boxes located on myForm. I have added the following reset to the form so it would clear the form: <input type="reset" onclick="myForm" value="Reset the form" ></input>. It clears the form but when I click the input box to add new variables the old ones reappear and it doesn't prompt for new inputs. How do I correct the code to fix this issue? I have added the code below with comments to help show what I was trying to create.

first = -1;
second = -1;
third = -1;

function getValues() {
  //while loop to not allow negative numbers or strings//
  while (isNaN(first) || first == "" || first < 0) {
    first = prompt("Enter the first number.");
    break;
  }
  //while loop to not allow negative numbers or strings//
  while (isNaN(second) || second == "" || second < 0) {
    second = prompt("Enter the second number.");
    break;
  }
  //while loop to not allow negative numbers or strings//
  while (isNaN(third) || third == "" || third < 0) {
    third = prompt("Enter the third number.");
    break;
  }

  document.myForm.first.value = first;
  document.myForm.second.value = second;
  document.myForm.third.value = third;
}

function determineLarge() {
  let message = "";

  //if statement to determine first number is the largest//
  if (second < first && third < first) {
    message = "The first number" + "(" + first + ")" + " is larger.";
  }
  // else if statement to determine second number is the largest//
  else if (first < second && third < second) {
    message = "The second number" + "(" + second + ")" + " is larger.";
  }
  //else if statement to determine the third number is the largest//
  else if (first < third && second < third) {
    message = "The third number " + "(" + third + ")" + " is larger.";
  }
  //else if statement to determine the first number as the largest number if any values are equal//
  else if (first == second || second == first || first == third || second == third) {
    message = "The first number" + "(" + first + ")" + " is largerer.";
  }
  document.getElementById("results").innerHTML = message;
  //fucntion to reset form//
  function myForm() {
    document.getElementById("myForm").reset();
  }
}
<body>

  <h1>Gary's Largest of Three Numbers</h1>
  <!-- estasblishing form name-->
  <form name="myForm">

    <p> Enter the first number</p>
    <!--prompts user for first input-->
    <input type="number" name="first" value="" onclick="javascript:getValues();">

    <p>Enter the second number</p>
    <!--prompts user for second input-->
    <input type="number" name="second" value="" onclick="javascript:getValues();">

    <p>Enter the third number</p>
    <!--prompts user for third input-->
    <input type="number" name="third" value="" onclick="javascript:getValues()">

    <!--runs the function to determine the largest number-->
    <button type="button" onclick="determineLarge();">Determine the larger number</button>

    <!--resets the form so user can insert different numbers-->
    <input type="reset" onclick="myForm" value="Reset the form"></input>
  </form>
  <div id="results"> </div>

html javascript
4 Answers

There are a number of issues here. First, this looks like a simple, plain typo: onclick="myForm". To be clear, that is not calling the myForm() function that has the reset() calls in it. You need the parens.

Second, fixing this reveals another issue: Your resetting was occurring because you are using type="reset" onclick="myForm", which is a method for resetting a form. (Source: Developer.Mozilla.org.) I needed to rename the myForm() function simply to resetForm(), so that the oncall= would actually run after this renaming.

Third, you have no id on that element, so getElementById() well not return anything, so try: document.getElementsByName("myForm")[0].reset();. Or, you can add an id and continue using getElementById(), your choice.

Fourth, you need to reset the internal variables you have bound to the three values, so that the getValues() function will see the right data.

Take a look:

       first = -1;
       second = -1;
       third = -1;

    function getValues(){
        //while loop to not allow negative numbers or strings//
        while(isNaN(first) || first == "" || first < 0){
        first = prompt ("Enter the first number.");
        break;
 }
        //while loop to not allow negative numbers or strings//
        while(isNaN(second) || second == "" || second < 0){
        second = prompt ("Enter the second number.");
        break;
 }
        //while loop to not allow negative numbers or strings//
        while(isNaN(third) || third == "" || third < 0){
        third = prompt ("Enter the third number.");
        break;
 }
 
         document.myForm.first.value = first;
        document.myForm.second.value = second;
        document.myForm.third.value = third;
}

    function resetForm(){
document.getElementsByName("myForm")[0].reset();
first = -1;
second = -1;
third = -1;
     }

    function determineLarge(){
            let message = "";

        //if statement to determine first number is the largest//
        if (second < first && third < first){
            message = "The first number" + "(" + first + ")" + " is larger.";
            }
            // else if statement to determine second number is the largest//
            else if (first > second && third > second) {
                message = "The second number" + "(" + second + ")" + " is larger.";
            }
            //else if statement to determine the third number is the largest//
            else if (first > third && second > third){
                message = "The third number " + "(" + third + ")" + " is larger.";
            }
            //else if statement to determine the first number as the largest number if any values are equal//
            else if (first == second || second==first || first==third || second ==third){
                message = "The first number" + "(" + first + ")" + " is largerer.";
            }
            document.getElementById("results").innerHTML = message;
  }
<body>

  <h1>Gary's Largest of Three Numbers</h1>
    <!-- estasblishing form name-->
    <form name="myForm" >

       <p> Enter the first number</p>
       <!--prompts user for first input-->
       <input type="number" name="first" value="" onclick="javascript:getValues();">

       <p>Enter the second number</p>
       <!--prompts user for second input-->
       <input type="number" name="second" value="" onclick="javascript:getValues();">

       <p>Enter the third number</p>
       <!--prompts user for third input-->
       <input type="number" name="third" value="" onclick="javascript:getValues()">

       <!--runs the function to determine the largest number-->
       <button type="button" onclick="determineLarge();">Determine the larger number</button>

        <!--resets the form so user can insert different numbers-->
        <input type="button" onclick="resetForm();" value="Reset the form" ></input>
  </form>
<div id="results"> </div>

user_24305490

in your html change

<form name="myForm" >

to

<form id="myForm" >

this code:

function myForm(){
    document.getElementById("myForm").reset();
     }

is trying to reset a form with ID myForm but doesnt find it that's why

user_107915710

Alternatively to changing the name of the form to an id, you can alter your javascript selector.

document.forms.myform.reset();

However this will just reset your form to whatever values are present on page load, or that are set through .value = (as is the intended functionality of .reset()). To blank all elements you will need to iterate over the elements within your form and manually blank them.

The below code will do this, but please note this will not work for checkbox/radio elements, you will need additional logic to handle them.

var inputs = document.forms.myform.querySelectorAll('input,textarea');
for(var i = 0; i < inputs.length; i++) {
  inputs[i].value = '';
}
getValues();
user_40273410

There are several problems in this code such as other guys wrote here. The fundamental issue when you click any input elements is that the variables first, second and third are not cleared. So when you click the elements, the parts of the code below set the values again.

            document.myForm.first.value = first;
            document.myForm.second.value = second;
            document.myForm.third.value = third;
user_143920910
Related