我想创建一个表单，其中当我单击添加按钮时，我在顶部有两个按钮，然后它将作为法案使用，详细法案编号和金额= textbox（textarea），然后所有这些条目都显示在textarea并添加另一个条目，当我完成所有条目时，我都单击“完成”，然后将所有条目的总金额显示在textarea的底部，并且该总额自动显示在底部金额字段中。请建议我该怎么做

Question

<!DOCTYPE html>
<head lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>

         <form action="" target="_blank">
         Bill No: <input type="text" name="bill no" size="">
         <input type="submit" class="button" value="Add">
         <input type="submit" class="button" value="Complete all entries">
             <br><br>
         Bill Details: <input type="text" name="bill no" size="50">
         <br><br>
         Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
             <br><br>
          <textarea rows="5" cols="50"></textarea>
             <br><br>
         <label for="To Pay">To Pay:</label>
         <select name="mydropdown" id="To Pay">
         <option value="Director">Director</option>
         <option value="Cheif">Cheif</option>
         <option value="RPC">RPC</option></select>
         Cheque No: <input type="text" name="Cheque No">
         <br><br>
         Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
         Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
         <input type="submit" class="button" value="Ok">
         </form>

  </article>
</section>
</body>
</html>

我想创建一个表单，其中当我单击添加按钮时，我在顶部有两个按钮，然后它将作为法案使用，详细法案编号和金额= textbox（textarea），然后所有这些条目都显示在textarea并添加另一个条目，当我完成所有条目时，我都单击“完成”，然后将所有条目的总金额显示在textarea的底部，并且该总额自动显示在底部金额字段中。请建议我该怎么做

Answer 1

首先，您需要为每个元素提供一个ID，例如：

<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>

然后添加功能以捕获按钮单击事件。更改以下HTML：

 <input type="submit" class="button" value="Add">

收件人：

 <input type="submit" class="button" value="Add" onclick="addEntry()">

在那之后添加一个功能：

 function addEntry()
 {

 }

在此函数中，使用以下编码获取元素的值：

var billNo=document.getElementById("billNo").value;

最后，使用以下代码编写要添加到文本区域的内容：

var tempResult=document.getElementById("tempResult");
tempResult.value=billNo

将值附加到文本区域：

 tempResult.value+=*what you want to add to textarea*

要将输入值解析为整数，您需要使用parseInt函数（对于十进制数）。您可以使用parseFloat函数。

现在，您已具备完成功能的所有要素。

对于总量，哈哈，让您先尝试一下。

Answer 2

您知道jquery的用法，所以我使用jquery来获取元素：

$(document).ready(function(){
    var total=0;
    var temp="";
    var tempResult=$("#tempResult");



    $("#btn1").click(function(){
        var billNo=$("#billNo").val();
        var billDetails=$("#billDetails").val();
        var amnt=$("#amnt").val();

        tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
        total+=parseFloat(amnt);
    });

    $("#btn2").click(function(){
         tempResult.val(tempResult.val()+ total);
        $("#totalAmount").val(total);
    });
});

然后我改变：

<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">

到

<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">

全部。

与文本框相关的查询获取所有输入详细信息并计算总金额

2 个答案: