Javascript 动态添加和删除输入字段可以正常工作，但值不会显示在Google工作表中_Javascript_Html_Forms_Google Sheets

Javascript 动态添加和删除输入字段可以正常工作，但值不会显示在Google工作表中

javascript html forms google-sheets

Javascript 动态添加和删除输入字段可以正常工作，但值不会显示在Google工作表中,javascript,html,forms,google-sheets,Javascript,Html,Forms,Google Sheets,在观看了几段YouTube视频后，我成功地建立了一个基于HTML的表单，在该表单中，受访者可以动态添加或删除字段（或行项目）。表单的初始外观几乎与我想要的完全相同，但是在google表单中，只捕获了第一行输入数据，而没有记录添加行的数据。我几乎可以肯定，这是因为每个输入字段的名称都设置为“entry.xxxxxx”，如一个教程视频所示，这就是为什么google sheet只捕获输入字段的第一个数据如果是这种情况，我是否应该修改代码，允许受访者添加或删除输入字段，同时将所有回复记录在谷歌表单中

在观看了几段YouTube视频后，我成功地建立了一个基于HTML的表单，在该表单中，受访者可以动态添加或删除字段（或行项目）。表单的初始外观几乎与我想要的完全相同，但是在google表单中，只捕获了第一行输入数据，而没有记录添加行的数据。我几乎可以肯定，这是因为每个输入字段的名称都设置为“entry.xxxxxx”，如一个教程视频所示，这就是为什么google sheet只捕获输入字段的第一个数据

如果是这种情况，我是否应该修改代码，允许受访者添加或删除输入字段，同时将所有回复记录在谷歌表单中？提前谢谢

<html>  
      <head>  
           <title>Price Reports</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
      </head>  
      <body>  
      <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSd8tF03ZHPVWyBT38x37tMkPGSuGL9P02K6vJP_sXlaetpDyA/formResponse" target="_self" method="POST">
           <div class="container"> 
                <br />  
                <br />  
                <h2 align="center">Price Reports</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field"> 
                                 <tr><td><input type="text" name="entry.368335800" placeholder="dd/mm/yyyy" class="form-control name_list" /></td>
                                     <td><input type="text" name="entry.588917263" placeholder="Added by" class="form-control name_list" /></td>
                                     <td><input type="text" name="entry.1340057160" placeholder="Consultant" class="form-control name_list" /></td>
                                     <td><input type="text" name="entry.1318147509" placeholder="Company Name" class="form-control name_list" /></td>
                                 </tr>
                                    <tr>  
                                         <td><input type="text" name="entry.1748634530" placeholder="Commodity" class="form-control name_list" /></td>
                                         <td><input type="text" name="entry.1662440771" placeholder="Origin Country" class="form-control name_list" /></td>
                                         <td><input type="text" name="entry.1892106366" placeholder="Deal Type" class="form-control name_list" /></td>
                                         <td><input type="text" name="entry.1829905809" placeholder="Price" class="form-control name_list" /></td>
                                         <td><input type="text" name="entry.1538189357" placeholder="Destination Country" class="form-control name_list" /></td>
                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
        </form>   
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="Commodity[]" placeholder="Commodity" class="form-control name_list" /></td><td><input type="text" name="Origin Country[]" placeholder="Origin Country" class="form-control name_list" /></td><td><input type="text" name="Deal Type[]" placeholder="Deal Type" class="form-control name_list" /></td><td><input type="text" name="Price[]" placeholder="Price" class="form-control name_list" /></td><td><input type="text" name="Destination Country[]" placeholder="Destination Country" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"https://docs.google.com/forms/u/0/d/e/1FAIpQLSd8tF03ZHPVWyBT38x37tMkPGSuGL9P02K6vJP_sXlaetpDyA/formResponse",  
                method:"POST",  
                data:$('#add_name').serialize(),
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>


价格报告




价格报告
添加更多
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）.append（'X'）；
});  
$（文档）.on（'click'，'.btn_remove'，function（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮id+”）.remove（）；
});  
$（“#提交”）。单击（函数（）{
$.ajax（{
url:“https://docs.google.com/forms/u/0/d/e/1FAIpQLSd8tF03ZHPVWyBT38x37tMkPGSuGL9P02K6vJP_sXlaetpDyA/formResponse",  
方法：“张贴”，
数据：$（'#添加名称'）。序列化（），
成功：功能（数据）
{  
警报（数据）；
$（'#添加_名称'）[0].reset（）；
}  
});  
});  
});

由于表单元素的

名称

配置不正确，因此未提交其他行。它的样式应该是

entry.xxxxxx

，就像您处理其他条目一样，即

entry.1538189357

，但是您将其作为字符串发送，例如

商品[]

此外，您正试图仅通过一个提交请求发送多行信息。这是不可能的

相反，你应该：

阻止窗体发出默认请求。相反，您将使用jQuery的ajax从JavaScript代码发出多个请求。为了避免这种默认行为，您可以使用

在表单提交按钮上设置一个

onClick

事件。分配给它的代码将获取表单的数据。您将需要获得公共字段（在您的情况下，

日期

，

添加人

，

顾问

，

公司名称

），然后是单个行字段。然后，发送多个请求（使用适当的名称和值键-使用适当的

条目.xxxxxx

值），每个请求包含单独的行数据和公共数据