Question

我的HTML和JAVASCRIPT组合有点问题。

我正在尝试创建一个页面，我可以通过某个参数添加值。在这张照片中它是如何运作的。

整页：

这是我的整个HTML页面的代码：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Naawan Receipt System</title>

    <link rel="stylesheet" href="static/header-second-bar.css">
    <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

</head>
<body>

<header class="header-two-bars">

  <div class="header-first-bar">
    <div class="header-limiter">
      <h1><a href="/home">Municipality<span>Receipt</span></a></h1>
            <nav>
                <a href="/form" class="selected">FORM</a>
                <a href="/logs">LOGS</a>
                <a href="/query">QUERY</a>
                <a href="/user">USER</a>
            </nav>
            <a href="/logout" class="logout-button">Logout</a>
    </div>
  </div>

  <div class="header-second-bar">
    <div class="header-limiter">
            <h2>User: {{ user }}</h2>

            <nav>
                <a href="/addparameters"><i class="fa fa-comments-o"></i> Nature of Collection</a>
                <a href="#"><i class="fa fa-file-text"></i> Results</a>
                <a href="#"><i class="fa fa-group"></i> Participants</a>
                <a href="#"><i class="fa fa-cogs"></i> Settings</a>
            </nav>
    </div>
 </div>
</header>

<!-- CONTENT HERE. -->

<link rel="stylesheet" href="static/indextest.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="static/indextest.css">

<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

<div class="jumbotron jumbotron-sm">
    <div class="container" id = "contact">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <h1 class="h1">
                Accountable Form 51 <small>Made easier</small></h1>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12" style="display: inline-block;">
            <div class="well well-sm">
                <form>
                <div class="row">
                    <div class="col-md-6" style="display: inline-block; ">
                        <div class="form-group">
                            <label for="name">
                            O.R Number</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter O.R Number" required="required" />
                        </div>
                        <div class="form-group">
                            <label for="email">
                            Payor</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                            </span>
                                <input type="text" class="form-control" name = "payor" id="payor" placeholder="Enter Full Name" required="required" /></div>
                        </div>
                        <div class="form-group">
                            <label for="subject">
                            Nature of Payment</label>

                                <div id="RadioGroup">
                                <br>
                                <input type="radio" name="paymentmethod"  checked="checked" value="CASH"> Cash<br>
                                <input type="radio" name="paymentmethod" value="CHECK"> Check<br>

                                <div id="PaymentsCHECK" class="desc" style="display: none;">
                                <br>
                            Drawee Bank<input type="text" name="dbank">
                            Number<input type="text" name="dNum">
                            Date<input type="text" name="dDate">
                                </div>

                                <input type="radio" name="paymentmethod" value="MONEY"> Money Order<br>

                                <div id="PaymentsMONEY" class="desc" style="display: none;">
                                <br>
                                <input type="text" name="dbank">Money Order No.
                                </div> 
                                </div>
                        </div> <!-- FORM GROUP END -->


                        <div class="form-group">
                            <label for="name">
                            Memo</label>
                            <textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required"
                            placeholder="Message"></textarea>
                    </div>

                    </div><!-- FIRST COL6 END -->
              </div><br><br><br><br><!-- ROW END -->

              <div class="col-md-5" style="display: inline-block; ">
                <div class="jumbotron">
                    <h2>Type in Nature of Collection...</h2>
                    <form>  

                      <input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
                      <br>
                      <input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
                      <br>
                      <button onclick="addRow(); return false;">Add Item</button>
                    </form>

              <datalist id="languages">

                {% for row in rows %}               
                  <option value = "{{row[0]}}">
                {% endfor %}

              </datalist>
               </div> <!-- JUMBO END -->

                <h6> <label>Date:<span></span>
                </label>   {{date}}</h6>
                <h3><fieldset disabled>
                <label>Total </label>
                <input type = "text" name = "total" id="total"><br></p>
                </fieldset></h3>
                </div><!-- COL5 END -->

<!-- </div> --><!-- REMAIN OR NOT? DEPENDS ON DEBUG PROCESS LATER -->

<div class="col-md-6" style="display: inline-block;">
      <div class="jumbotron">
            <h2>Nature of Collection</h2>
      </div>
      <div>

<!-- ACCUMULATION TABLE STARTS -->
        <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                      <tr>

                      </tr>
                      <tbody>



                      </tbody>




        </table>
<!-- </form> --> <!-- CHECK LATER -->


<datalist id="languages">
            {% for row in rows %}
            <option value={{row[0]}}></option>
            {% endfor %}
</datalist>

          </div>

          <div class="col-md-12">
                  <button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
                    Submit Form</button>
                          <br>
                    </div>
          </div>

          </form>

        </div>
    </div>
</div>
</div>

<script type="text/javascript">

/*EDIT HERE LATER*/
$(document).ready(function() {
    $("input[name$='paymentmethod']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Payments" + test).show();
    });
});

</script>

<script type="text/javascript">
      function deleteRow(o){
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
      }
     function addRow()
      {
        var table = document.getElementById("datatable"),
          newRow = table.insertRow(table.length),
          cell1 = newRow.insertCell(0),
          cell2 = newRow.insertCell(1),
          cell3 = newRow.insertCell(2),
          name = document.getElementById("form").value,
          amount = document.getElementById("amount").value;


          delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
        cell1.innerHTML = name;
        cell2.innerHTML = amount;
        cell3.innerHTML = delete1;
      }

</script>

  <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

    </script>
</body>
</html>

所以我完成了那部分，这次我想添加每个添加量的值并在Total inputbox上实时显示。所以我在单元格中添加了一个id，它将在javascript中生成金额：

在：

 function addRow()
  {
    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),
      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
    cell3.innerHTML = delete1;
  }

后：

 function addRow()
  {
    var table = document.getElementById("datatable"),
      newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),
      name = document.getElementById("form").value,
      amount = document.getElementById("amount").value;


      delete1 = delete1 = '<input type="button"  class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
    cell1.innerHTML = name;
    cell2.innerHTML = amount;
cell2.id = "qty
    cell3.innerHTML = delete1;
  }

＆＃34;数量＆＃34;这里将匹配单元格2上所有条目的ID，并将添加它并将其显示在id总计上。

但是当我这样做时，顶部的值框会弹出一个错误：

它提示我在不相关的框中输入一个值。

我也尝试用表格分隔它们，但它没有用。

我尝试了其他形式和它的工作，我只是使用复选框加文本框，但在此页面上我无法做到。我该怎么做呢？

清单要清楚：

我为每个添加的小区生成了ID
我使用该ID来评估javascript脚本
累积的总数应该用于ID＆＃34;总计＆＃34;但它没有发生。
我已经尝试过分离表单，但这次只重新加载并且没有添加条目。
我有一个单独的按钮，用于保存名为＆＃34;提交表单＆＃34;

您认为如何做任何输入或方法？

Answer 1

您收到此错误的原因是嵌套表单，这些表单不是浏览器支持的构造。确保在开始新表格之前关闭第一张表格 - 然后验证不会交叉污染。

要清楚，这与你总计你的价值观的方式无关（虽然这有一些问题需要自己解决，例如你正在访问你元素的value，而你从来没有设置它 - 而是你想得到他们的innerHtml。

HTML表单中的Javascript，累计实时总计

1 个答案: