个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:11:09 24 4
gpt4 key购买 nike

我有几个问题需要帮助。我正在制作一个基本的订单模型模型。我试图让它看起来类似于 Example Form我需要它遵循以下三个约束；

  1. 如果客户未填写任何必填字段，则在单击“订购”按钮时提供错误消息(具体说明我的错误消息，指出哪个框有误)。
  2. 点击“订购”按钮后，如果他们正确填写了所需信息，则提供不同的消息(“谢谢您，#firstname #lastname，为您订购。您的总金额为 $xxxxx”。
  3. 单击“清除”按钮后清除表单上的框，我需要能够通过编写自己的脚本来完成此操作。

到目前为止，我的布局已经基本完成。我对如何减少实际字段和表单图例边框之间的填充有点困惑。由于使用两种不同的表单来实现两者的边框，我也无法重置表单。他们是通过 document.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 block 。

需要更改:

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;
}


}

关于javascript - 我应该如何使用 Javascript 处理这个 html 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36169702/

24 4 0
文章推荐： javascript - 自动滚动不会在 $ ('html,body' ).animate 处设置动画
文章推荐： c++ - 使用 VAO/VBO 的 OpenGL 模型/纹理渲染
文章推荐： javascript - promise 中未定义的快速响应
文章推荐： c# - 将 Arduino 校验和函数转换为 C#
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com