CODEWITHSUNDEEP
javascripthtmlformsgoogle-sheetsgoogle-forms
user1519225
user1519225

Reputation: 41

Is it possible to submit multiple/duplicated form fields to Google Forms via custom HTML form?

I'm making a custom HTML form which submits to Google Forms following this guide: https://github.com/heaversm/google-custom-form

I have the form set up so multiple fields can be dynamically added. The data is then posted to a Google form so I can gather it in a spreadsheet.

I have an (almost) working example here.

The problem is only the first field of data gets sent to Google Forms. Any of the additional rows do not get captured. I need to figure out how to get each new row created posted to the form. I've tried creating a typical POST array which didn't end up working, mostly because I think Google Forms handles the POST process via URL submission, for example:

var submitURL = (baseURL + q1ID + "=" + inputq1 + "&" + q2ID + "=" + inputq2 +  "&" + q3ID + "=" + inputq3 +  "&" + q4ID + "=" + inputq4 + "&" + q5ID + "=" + inputq5 +  submitRef);

Does anyone know if this can be done? I also tried to see if this data could be posted directly to a Google spreadsheet but everything I found said I need to go through a form.

The current code (also found on the link above) is:

  <script>
     $('.input-form').one('submit',function(){

         var inputq1 = encodeURIComponent($('.input-q1').val());
         var inputq2 = encodeURIComponent($('.input-q2').val());        
         var inputq3 = encodeURIComponent($('.input-q3').val());
         var inputq4 = encodeURIComponent($('.input-q4').val());
         var inputq5 = encodeURIComponent($('.input-q5').val());

         var q1ID = "entry.287892462";
         var q2ID = "entry.1217545570";
         var q3ID = "entry.635040236";
         var q4ID = "entry.754878743";
         var q5ID = "entry.1383378601";

         var baseURL = 'http://docs.google.com/forms/d/1KTAnAscJpdN4tPehWlUS00aQhz_y7oPZuoBFrTVUctU/formResponse?';
         var submitRef = '&submit=Submit';
         var submitURL = (baseURL + q1ID + "=" + inputq1 + "&" + q2ID + "=" + inputq2 +  "&" + q3ID + "=" + inputq3 +  "&" + q4ID + "=" + inputq4 + "&" + q5ID + "=" + inputq5 +  submitRef);
         console.log(submitURL);
         $(this)[0].action=submitURL;
         console.log('Form sent');
         alert('yay you did it');
     });
  </script>

Upvotes: 1

Views: 231

Answers (1)

Aditya
Aditya

Reputation: 851

As per documentation from google they accept the data as array in case you want to submit multiple q&a, and http well supports arrays in url so your url should be as follows.

var submitURL = (baseURL + "entry.["+ q1ID +"] = ["+ inputq1 +" ] &entry.["+ q2ID +"] = ["+ inputq2 +" ] &entry.["+ q3ID +"] = ["+ inputq3 +" ] &entry.["+ q4ID +"] = ["+ inputq4 +" ] &entry.["+ q5ID +"] = ["+ inputq5 + submitRef);

Addition1

  <script>
 $('.input-form').one('submit',function(){

     var inputq1 = encodeURIComponent($('.input-q1').val());
     var inputq2 = encodeURIComponent($('.input-q2').val());        
     var inputq3 = encodeURIComponent($('.input-q3').val());
     var inputq4 = encodeURIComponent($('.input-q4').val());
     var inputq5 = encodeURIComponent($('.input-q5').val());

     var q1ID = "287892462";
     var q2ID = "1217545570";
     var q3ID = "635040236";
     var q4ID = "754878743";
     var q5ID = "1383378601";

     var baseURL = 'http://docs.google.com/forms/d/1KTAnAscJpdN4tPehWlUS00aQhz_y7oPZuoBFrTVUctU/formResponse?';
     var submitRef = '&submit=Submit';
     var submitURL = (baseURL + "entry.["+ q1ID +"]=["+ inputq1 +" ]&entry.["+ q2ID +"]=["+ inputq2 +" ]&entry.["+ q3ID +"]=["+ inputq3 +" ]&entry.["+ q4ID +"]=["+ inputq4 +" ]&entry.["+ q5ID +"]=["+ inputq5 + submitRef);
     console.log(submitURL);
     $(this)[0].action=submitURL;
     console.log('Form sent');
     alert('yay you did it');
 });

Upvotes: 0

Related Questions