我应该如何使用Javascript处理这个html表单

How should I go about this html form with Javascript

本文关键字：html 表单 处理 何使用 Javascript 我应该      更新时间：2023-09-26

我有几个问题需要帮助。我正在制作一个基本的订单模型。我正在努力使它看起来类似于示例表单我需要它遵循以下三个约束条件；

  1. 单击"订单"按钮后，如果客户端没有填写任何必需的字段，则提供一条错误消息（请具体说明我的错误消息，引用哪个框出错）
  2. 点击"订单"按钮后，如果他们正确填写了所需信息，则提供不同的消息（"谢谢您的订单，#firstname#lastname。您的总金额为xxxxx美元）
  3. 单击"清除"按钮清除表单上的框后，我需要能够通过编写自己的脚本来做到这一点

到目前为止，我的布局几乎完成了。对于如何减少实际字段和表单图例边界之间的填充，我有点困惑。由于使用了两种不同的表单来实现两者的边界，我也很难重置表单。是他们通过一个文档调用两个表单的方法。getElementById（"myForm"&myForm1"）.reset（）我知道这是错误的，只是觉得这是最简单的写法。我遇到的另一个问题是让我的函数检查它们是否是对每个输入的响应，如果没有指定错误在哪里，如果没有错误，它会通过乘以价格和数量来报告总额，然后说明它们的名字和姓氏。下面我将发布我的HTML、CSS和JS。如果有人能抽出时间来帮助我，我将不胜感激。----修复了重置并使其调用两种形式----

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">  
    <h1>JS Order Form</h1>
</head>
<body>
<script src="script.js"> <!--links js -->
</script>

<form id="myForm">
 <fieldset>
  <legend>Personal Information:</legend>
 First Name: <input type="text" id="field1" name="fname"><br>
 Last Name: <input type="text" id="field2" name="lname"><br>
 </fieldset>
</form>
<table style="width:100%">
        <table align="right">
        <table border="1">  
  <tr>
    <td>Product</td>
    <td>Price</td>      
  </tr>
  <tr>
    <td>Widget 1</td>
    <td>$5</td>     
  </tr>
  <tr>
    <td>Widget 2</td>
    <td>$10</td>        
  </tr>
</table>
<form id="myForm1">
 <fieldset>
  <legend>Order Info:</legend>
  Price: <input type="text" id="field3" name="pname"><br>
  Quantity: <input type="text" id="field4" name="qname"><br>
 </fieldset>
</form>
<div align="center">
<input type="button" onclick="myFunction()" value="Clear">
<input type="button" onclick="myFunction1()" value="Order">
</div>

</body>
</html>

 h1 {
    text-align: center; 
}
form {
    text-align:center;
}
table {
    width:250px;
    margin: 0 auto;
    text-align: center;
}
fieldset {
    padding: 10px;
    margin: 10px;
    border-spacing: 5px;
}

function myFunction() {
        document.getElementById("myForm").reset();  //grabs form and clears entrys
    }   
    //function myFunction1() 
    // {
      //   var field1 = document.getElementById("field1").value.trim(); //checks length of first name
     //    var field2 = document.getElementById("field2").value.trim(); //checks length of last name
      //   if ( field1.length == 0 || field2.length == 0)  // if they are set to 0 then report alert
      //   {
     //       alert("Please Fill In Form Correctly");
      //   } 
      //   else                                          // if filled in report this following alert
      //   {
     //       alert("Thank You for Submitting");
     //   }
     //}

    function myFunction1()
    {
      var field1 = document.getElementById("field1").value.trim();
     var field2 = document.getElementById("field2").value.trim();
     var field3 = document.getElementById("field3").value.trim();
      var field4 = document.getElementById("field4").value.trim();
    if ( field1.length == 0)
     {
            alert("Please fill in your First Name");
            return false;
     }
      else if ( field2.length == 0)
     {
            alert("Please fill in your Last Name");
            return false;
     }
      else if ( field3.length == 0)
     {
            alert("Please fill in the Price")
            return false;
     }
     else if ( field4.length == 0)
     {
            alert("Please fill in the Quantity")
            return false;
     }
    else 
    {
    alert("Thank you for submitting your Order")
    }
    }

  1. 要显示错误消息，请避免使用alert。这不是一个好办法。相反，在消息中保留一些隐藏的文本，并根据用户的输入控制其可见性。类似：

    <span id="field1Error" style="display:none">Please fill in your First Name</span>

在JS中：

if(field1.length == 0){
    document.getElementById('field1Error').style.display= 'block';
}
else{
    document.getElementById('field1Error').style.display= 'none';
}

  1. 为了显示确认，您可以使用上述方法。只需通过从字段中收集值在JS中创建消息，并将其放入页面中已经存在的div中。

    <div id="confirmMessage"></div>

在JS中：

var content= 'Thank you '+ field1.value+ ' '+ field2.value+ ' for your order. Your total is '+ 
    parseInt(field3.value)* parseInt(field4.value)+ '.'
document.getElementById('confirmMessage').innerHTML= content;
  1. reset()运行良好。如果你想改变这一点，那么你可以迭代表单的字段并手动清除它们

我希望这能有所帮助。如果您有任何疑问，请询问。

编辑：要显示组合警报，请使用标志来跟踪有效和无效字段，并使用if而不是嵌套的if else if块。

需要更改：

function myFunction1()
{
  var field1 = document.getElementById("field1").value.trim();
  var field1Valid= true;
 var field2 = document.getElementById("field2").value.trim();
var field2Valid= true;
 var field3 = document.getElementById("field3").value.trim();
var field3Valid= true;
  var field4 = document.getElementById("field4").value.trim();
var field4Valid= true;
if ( field1.length == 0)
 {
        field1Valid= false;
 }
 if ( field2.length == 0)
 {
        field2Valid= false;
 }
 if ( field3.length == 0)
 {
        field3Valid= false;
 }
 if ( field4.length == 0)
 {
        field4Valid= false;
 }
var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false
if( !formValid){
    var alertMessage= 'Please fill ';
    if( !field1Valid){ alertMessage+= 'First Name'; }
    if( !field2Valid){ alertMessage+= 'Last Name'; }
    if( !field3Valid){ alertMessage+= 'Price'; }
    if( !field4Valid){ alertMessage+= 'Quantity'; }
    alert(alertMessage);
    return false;
}
else{
     var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is '+ String(parseInt(field3) * parseInt(field4) )+ '.';
    alert(alertMessage);
    return true;
}

}
相关文章：