Question

我似乎无法让这个“myfunction1”工作。也许我把它设置错了或者是一个愚蠢的错误。我需要它才能工作，所以如果两个文本输入中没有任何内容，则会收到一个弹出警告，提醒您修复表单。如果框中已经有输入，我需要它说完成或谢谢。我确信它很容易解决，但如果有人能帮助我，我会很感激。现在已经搜索了4个小时但仍然卡住了。谢谢！

<!DOCTYPE HTML>
 <html>
 <head>
<link rel="stylesheet" href="styles.css">


 </script>
  </head>
  <body>
   <form id="myForm">
    First name: <input type="text" id="field1" name="fname"><br><br>
    Last name: <input type="text" id="field2" name="lname"><br><br>
    <input type="button" onclick="myFunction()" value="Reset form">
    <input type="button" onclick="myFunction1()" value="Submit form">
</form>

<script>
  function myFunction() {
   document.getElementById("myForm").reset();
  }
    function myFunction1() {
     var x = document.getElementById("field1").value;
     if (x == null || x == "") {
     alert("Please Fill In Form Correctly");
     } else {
     alert("Thank You for Submitting");
  }
 }
  </script>



  </body>
   </html>

Answer 1

我似乎无法让这个“myfunction1”工作。

代码中的多个问题

您需要使用document.getElementById而非getElementById
您传递给该方法的ID在您的标记中不存在。实际上，您的标记输入字段都没有id。

试试这个

 function myFunction1() 
 {
     var field1 = document.getElementById("field1").value.trim();
     var field2 = document.getElementById("field2").value.trim();
     if ( field1.length == 0 || field2.length == 0) 
     {
        alert("Please Fill In Form Correctly");
     } 
     else 
     {
        alert("Thank You for Submitting");
     }
 }

Answer 2

<!DOCTYPE HTML>
 <html>
 <head>
    <link rel="stylesheet" href="styles.css">
    <script>
  function myFunction() {
   document.getElementById("myForm").reset();
  }
    function myFunction1() {
     var x = document.getElementById("field1").value;
     if(x){
         if (x == "") 
         {
            alert("Please Fill In Form Correctly");
         } else {
            alert("Thank You for Submitting");
        }
     }



 }
  </script>
</head>
  <body>
   <form id="myForm">
        First name: <input type="text" name="fname" id="field1"><br><br>
        Last name: <input type="text" name="lname" id="field2"><br><br>
        <input type="button" onclick="myFunction()" value="Reset form">
        <input type="button" onclick="myFunction1()" value="Submit form">
    </form>


  </body>
   </html>

Answer 3

尝试以下代码。因为您使用的是geteletmentbyid，所以为每个表单元素插入id。

<script>
  function myFunction() {
   document.getElementById("myForm").reset();
  }
    function myFunction1() 
	{
     var x = document.getElementById("fname").value;
	
     if (x == null || x == "") 
	 {
     alert("Please Fill In Form Correctly");
     } else {
     alert("Thank You for Submitting");
  }
 }
  </script>

<!DOCTYPE HTML>
 <html>
 <head>
<link rel="stylesheet" href="styles.css"/>



  </head>
  <body>
   <form id="myForm">
    First name: <input id="fname" type="text" name="fname"><br><br>
    Last name: <input id="lname" type="text" name="lname"><br><br>
    <input type="button" onclick="myFunction()" value="Reset form">
    <input type="button" onclick="myFunction1()" value="Submit form">
</form>
    
<!-- copy the javascript party here--->
    
    
 </body>
   </html>

Answer 4

这可能不是您实际问题的答案。但是这里有一个可以帮助你进一步发展的工作jsFiddle：https://jsfiddle.net/y8135trb/4/

<body>
  <form id="myForm">
    First name:
    <input type="text" id="field1" name="fname">
    <br>
    <br> Last name:
    <input type="text" id="field2" name="lname">
    <br>
    <br>
    <input type="button" onclick="myFunction()" value="Reset form">
    <input type="button" onclick="myFunction1()" value="Submit form">
  </form>

  <script>
    function myFunction() {
      document.getElementById("myForm").reset();
    }

    function myFunction1() {
      var x = document.getElementById("field1").value;

      if (typeof x == 'undefined' || x == null || x == "") {
        alert("Please Fill In Form Correctly");
      } else {
        alert("Thank You for Submitting");
      }
    }
  </script>
</body>

Broken Function需要一些帮助/建议

4 个答案: