如何通过 JavaScript 清除表单值？有些值重置有些不行，这是为什么呢？答案

【问题标题】：How to clear form value via JavaScript? some of the value resetting some not, why is that?如何通过 JavaScript 清除表单值？有些值重置有些不行，这是为什么呢？
【发布时间】：2021-05-12 20:30:48
【问题描述】：

我想通过重置按钮和提交按钮清除我的值，但其中一些与我的功能一起使用，有些则没有。

function emptyValidate() {

  var fname = document.getElementById('fname').value;
  var lname = document.getElementById('lname').value;
  var phone = document.getElementById('phone').value;
  var email = document.getElementById('email').value;
  var address = document.getElementById('address').value;
  var city = document.getElementById('city').value;
  var state = document.getElementById('state');
  var zip = document.getElementById('zip').value;
  var cnumber = document.getElementById('cnumber').value;
  var month = document.getElementById('month');
  var year = document.getElementById('year');

  if (fname == "") {
    alert("First Name is Required");
  } else if (lname == "") {
    alert("Last Name is Required");
  } else if (phone == "") {
    alert("Phone Number is Required");
  } else if (isNaN(phone) || phone.indexOf(" ") != -1) {
    alert("Enter numeric value in phone number")
  } else if (phone.length < 5) {
    alert("enter 10 digits phone number");
  } else if (email == "" || email.indexOf("@") <= 0) {
    alert("enter valid email address");
  } else if (address == "") {
    alert("Address is Required");
  } else if (city == "") {
    alert("City is Required");
  } else if (isNaN(zip) || zip.indexOf(" ") != -1) {
    alert("Enter numeric value in zip code");
  } else if (zip.length < 5) {
    alert("enter 5 digits zip code");
  } else if (isNaN(cnumber) || cnumber.indexOf(" ") != -1) {
    alert("Enter numeric value in Card Number")
  } else if (cnumber.length < 13) {
    alert("enter 13 digits card number");
  } else {
    alert('Thank You for Signup as a New Member');
    window.location = "http://www.youtube.com";
  }
}

function clearFunc() {
  document.getElementById('fname').value = "";
  document.getElementById('lname').value = "";
  document.getElementById('phone').value = "";
  document.getElementById('email').value = "";
  document.getElementById('address').value = "";
  document.getElementById('city').value = "";
  document.getElementById('state').reset();
  document.getElementById('zip').value = "";
  document.getElementById('cnumber').value = "";
  document.getElementById('month');
  document.getElementById('year');
}

body {
  background-image: url(image/g\ \(6\).jpg);
}

table,
td {
  padding: 0px 20px 8px 20px;
}

.container {
  border: 4px rgb(122, 117, 116) groove;
  margin-top: 150px;
  margin-right: 700px;
  margin-left: 650px;
  margin-bottom: 105px;
  background-color: rgb(223, 230, 230);
}

.btn {
  font-size: 110%;
  font-weight: 100;
  background: #DD4A5A;
  border-color: #DD4A5A;
  box-shadow: 2px 2px 3px #9b323f;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
  margin-left: 50px;
}

.btn:hover {
  background: #990819;
}

h1 {
  text-decoration: underline;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Signup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="logo">
    <a href="index.html"><img src="image/gym logo.JPG" alt="Gold Gym" width="120" height="85"></a>
  </div>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="signup.html">Sign Up</a></li>
      <li><a href="location.html">Location</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 style="margin-left: 45px;">Member Information</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <table>
          <tr>
            <td>
              <div class="form-group">
                <label for="fname"><b style="color: red;">*</b>First Name:</label> <input type="text" class="form-control input-sm" id="fname">
              </div>
            </td>
            <td>
              <div class="form-group">
                <label for="lname"><b style="color: red;">*</b>Last Name:</label> <input type="text" class="form-control input-sm" id="lname">
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label for="phone"><b style="color: red;">*</b>Phone Number:</label> <input type="text" class="form-control input-sm" id="phone">
              </div>
            </td>
            <td>
              <div class="form-group">
                <label for="email"><b style="color: red;">*</b>Email Address:</label> <input type="email" class="form-control input-sm" id="email">
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="form-group">
                <label for="address"><b style="color: red;">*</b>Address:</label> <br><input type="text" size="51" class="form-control input-sm" id="address">
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="form-group">
                <label for="city"><b style="color: red;">*</b>City:</label> <br>
                <input type="text" class="form-control input-sm" id="city">
              </div>
            </td>
            <td>
              <div class="col-md-6">
                <label for="zip"><b style="color: red;">*</b>Zip:</label> <br><input type="text" class="form-control input-sm" id="zip">
              </div>
            </td>
            <td width="230px">
              <div class="col-md-6">
                <label for="city"><b style="color: red;">*</b>State:</label><br>
                <select class="form-control form-control-sm">
                  <option value="NY">NY</option>
                  <option value="AK">AK</option>
                  <option value="AR">AR</option>
                  <option value="AZ">AZ</option>
                  <option value="CA">CA</option>
                  <option value="CO">CO</option>
                  <option value="CT">CT</option>
                  <option value="DC">DC</option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <h1>Billing Information</h1>
              <input type="checkbox" id="check"> Billing information is same as member information.
            </td>
          </tr>
          <tr style="border:1px solid #adadad;">
            <td>
              <div class="form-group" style="padding-top:10px;">
                <label for="cnumber"><b style="color: red;">*</b>Card Number:</label>
                <input type="text" class="form-control input-sm" id="cnumber">
              </div>
            </td>
            <td width="230px">
              <label for="city"><b style="color: red;">*</b>Expiration Date:</label>
              <div class="form-inline">
                <select class="col-md-6 form-control form-control-sm" style="margin-right:10px">
                  <option value="">Month</option>
                  <option value="Jan">Jan</option>
                  <option value="Feb">Feb</option>
                  <option value="Mar">Mar</option>
                  <option value="Apr">Apr</option>
                  <option value="May">May</option>
                  <option value="Jun">Jun</option>
                  <option value="Aug">Aug</option>
                  <option value="Sep">Sep</option>
                  <option value="Oct">Oct</option>
                  <option value="Nov">Nov</option>
                  <option value="Dec">Dec</option>
                </select>
                <select class="col-md-6 form-control form-control-sm">
                  <option value="">Year</option>
                  <option value="2021">2021</option>
                  <option value="2022">2022</option>
                  <option value="2023">2023</option>
                  <option value="2024">2024</option>
                  <option value="2025">2025</option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding-top:20px;">
              <input type="submit" value="Signup" class="btn" onclick="emptyValidate()" />
              <input type="reset" value="Clear Entries" onclick="clearFunc()" id="res" class="btn" />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>


  <footer class="footer-background">
    <p class="text-footer">
      &#169;&nbsp<a href="index.html" style="text-decoration:none">Gold Gym</a>&nbsp2021
    </p>
  </footer>

</body>

</html>

【问题讨论】：

请编辑您的问题并删除所有不必要的代码。我们只需要查看与您的问题直接相关的代码segment。然后，解释该代码段的哪些部分没有按预期工作。 “有些工作，有些不工作”并没有告诉我们什么是不工作的。
你的页面没有表单，你的问题没有意义

标签： javascript html css forms

【解决方案1】：

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Signup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">

    <style>
        body{
            background-image: url(image/g\ \(6\).jpg);
        }
        table,
        td {

            padding: 0px 20px 8px 20px;

        }

        .container {
            border: 4px rgb(122, 117, 116) groove;
            margin-top: 150px;
            margin-right: 700px;
            margin-left: 650px;
            margin-bottom: 105px;
            background-color: rgb(223, 230, 230);
            

        }


        .btn {
            font-size: 110%;
            font-weight: 100;
            background: #DD4A5A;
            border-color: #DD4A5A;
            box-shadow: 2px 2px 3px #9b323f;
            color: #fff;
            margin-top: 10px;
            cursor: pointer;
            margin-left: 50px;
        }

        .btn:hover {
            background: #990819;
        }
        h1{
            text-decoration: underline;
        }
    </style>

</head>

<body>
    <div class="logo">
        <a href="index.html"><img src="image/gym logo.JPG" alt="Gold Gym" width="120" height="85"></a>
    </div>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="signup.html">Sign Up</a></li>
            <li><a href="location.html">Location</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
    <form id="form" class="container">

        <div class="row">

            <div class="col-md-6">

                <h1 style="margin-left: 45px;">Member Information</h1>

            </div>

        </div>

        <div class="row">

            <div class="col-md-6">

                <table>

                    <tr>

                        <td>

                            <div class="form-group">

                                <label for="fname"><b style="color: red;">*</b>First Name:</label> <input type="text"
                                    class="form-control input-sm" id="fname">

                            </div>

                        </td>

                        <td>

                            <div class="form-group">

                                <label for="lname"><b style="color: red;">*</b>Last Name:</label> <input type="text"
                                    class="form-control input-sm" id="lname">

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <div class="form-group">

                                <label for="phone"><b style="color: red;">*</b>Phone Number:</label> <input type="text"
                                    class="form-control input-sm" id="phone">

                            </div>

                        </td>

                        <td>

                            <div class="form-group">

                                <label for="email"><b style="color: red;">*</b>Email Address:</label> <input
                                    type="email" class="form-control input-sm" id="email">

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2">

                            <div class="form-group">

                                <label for="address"><b style="color: red;">*</b>Address:</label> <br><input type="text"
                                    size="51" class="form-control input-sm" id="address">

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <div class="form-group">

                                <label for="city"><b style="color: red;">*</b>City:</label> <br>

                                <input type="text" class="form-control input-sm" id="city">

                            </div>


                        </td>
                        <td>
                            <div class="col-md-6">

                                <label for="zip"><b style="color: red;">*</b>Zip:</label> <br><input type="text"
                                    class="form-control input-sm" id="zip">

                            </div>
                        </td>

                        <td width="230px">

                            <div class="col-md-6">

                                <label for="city"><b style="color: red;">*</b>State:</label><br>

                                <select class="form-control form-control-sm">

                                    <option value="NY">NY</option>

                                    <option value="AK">AK</option>

                                    <option value="AR">AR</option>

                                    <option value="AZ">AZ</option>

                                    <option value="CA">CA</option>

                                    <option value="CO">CO</option>

                                    <option value="CT">CT</option>

                                    <option value="DC">DC</option>

                                </select>

                            </div>


                        </td>

                    </tr>

                    <tr>

                        <td colspan="2">

                            <h1>Billing Information</h1>

                            <input type="checkbox" id="check"> Billing information is same as member information.

                        </td>

                    </tr>

                    <tr style="border:1px solid #adadad;">

                        <td>

                            <div class="form-group" style="padding-top:10px;">

                                <label for="cnumber"><b style="color: red;">*</b>Card Number:</label>

                                <input type="text" class="form-control input-sm" id="cnumber">

                            </div>

                        </td>

                        <td width="230px">

                            <label for="city"><b style="color: red;">*</b>Expiration Date:</label>

                            <div class="form-inline">

                                <select class="col-md-6 form-control form-control-sm" style="margin-right:10px">

                                    <option value="">Month</option>

                                    <option value="Jan">Jan</option>

                                    <option value="Feb">Feb</option>

                                    <option value="Mar">Mar</option>

                                    <option value="Apr">Apr</option>

                                    <option value="May">May</option>

                                    <option value="Jun">Jun</option>

                                    <option value="Aug">Aug</option>

                                    <option value="Sep">Sep</option>

                                    <option value="Oct">Oct</option>

                                    <option value="Nov">Nov</option>

                                    <option value="Dec">Dec</option>

                                </select>

                                <select class="col-md-6 form-control form-control-sm">

                                    <option value="">Year</option>

                                    <option value="2021">2021</option>

                                    <option value="2022">2022</option>

                                    <option value="2023">2023</option>

                                    <option value="2024">2024</option>

                                    <option value="2025">2025</option>

                                </select>

                            </div>

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2" style="padding-top:20px;">

                            <input type="submit" value="Signup" class="btn" onclick="emptyValidate()" />
                            <input type="reset" value="Clear Entries" onclick="clearFunc()" id="res" class="btn" />


                        </td>

                    </tr>

                </table>

            </div>

        </div>

    </form>

    <script type="text/javascript">

        function emptyValidate() {

            var fname = document.getElementById('fname').value;

            var lname = document.getElementById('lname').value;

            var phone = document.getElementById('phone').value;

            var email = document.getElementById('email').value;

            var address = document.getElementById('address').value;

            var city = document.getElementById('city').value;

            var state = document.getElementById('state');

            var zip = document.getElementById('zip').value;

            var cnumber = document.getElementById('cnumber').value;

            var month = document.getElementById('month');

            var year = document.getElementById('year');

            if (fname == "") {

                alert("First Name is Required");

            }

            else if (lname == "") {

                alert("Last Name is Required");

            } else if (phone == "") {

                alert("Phone Number is Required");

            }

            else if (isNaN(phone) || phone.indexOf(" ") != -1) {

                alert("Enter numeric value in phone number")

            }

            else if (phone.length < 5) {

                alert("enter 10 digits phone number");

            }

            else if (email == "" || email.indexOf("@") <= 0) {

                alert("enter valid email address");

            }

            else if (address == "") {

                alert("Address is Required");

            }

            else if (city == "") {

                alert("City is Required");

            }

            else if (isNaN(zip) || zip.indexOf(" ") != -1) {

                alert("Enter numeric value in zip code");

            } else if (zip.length < 5) {

                alert("enter 5 digits zip code");

            }

            else if (isNaN(cnumber) || cnumber.indexOf(" ") != -1) {

                alert("Enter numeric value in Card Number")

            }

            else if (cnumber.length < 13) {

                alert("enter 13 digits card number");

            }
            else {
                alert('Thank You for Signup as a New Member');
                window.location = "http://www.youtube.com";
            }

        }
        function clearFunc() {
        document.getElementById("form").reset();
        }
    </script>


    <footer class="footer-background">
        <p class="text-footer">
            &#169;&nbsp<a href="index.html" style="text-decoration:none">Gold Gym</a>&nbsp2021
        </p>
    </footer>

</body>

</html>

使用document.getElementById("myform").reset(); 休息表格！

【讨论】：

能否请您将我的答案标记为正确。