После просмотра нескольких видеороликов на YouTube мне удалось настроить форму на основе HTML, в которой респонденты могут динамически добавлять или удалять поля (или позиции). Первоначальный вид формы почти такой же, как и у меня, однако на листе Google была захвачена только первая строка входных данных, а данные добавленных строк не записываются. Я почти уверен, что это потому, что имя каждого поля ввода было установлено на «entry.xxxxxx», как показано в одном из обучающих видео, именно поэтому Google лист захватывает только первые данные поля ввода.

Если это так, могу ли я в любом случае изменить коды, чтобы разрешить респондентам добавлять или удалять поля ввода, в то же время записывая все ответы в Google Sheet? Заранее спасибо!

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

CL

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Другие строки не отправляются, поскольку name элемента формы не настроено должным образом. Он должен иметь стиль entry.xxxxxx как и другие записи, т. entry.xxxxxx entry.1538189357 однако вы отправляете его в виде строк, таких как Commodity[] .

Кроме того, вы пытаетесь отправить несколько строк информации только с одним запросом на отправку. Это невозможно.

Вместо этого вы должны:

  1. Запретить форме отправлять запрос по умолчанию. Вместо этого вы будете выдавать несколько запросов из кода JavaScript, используя jjuery ajax. Чтобы избежать этого поведения по умолчанию, вы можете использовать protectDefault () ;

  2. Установите событие onClick на кнопку отправки формы. Присвоенный ему код получит данные формы. Вам нужно будет получить общие поля (в вашем случае date , Added by , Consultant , Company name ), а затем поля отдельных строк. Затем отправьте несколько запросов (с соответствующими ключами имени и значения — с использованием правильных значений entry.xxxxxx ), каждый из которых содержит данные отдельной строки и общие данные.