AJAX request data fields “undefined” from web form submission
Question
I'm setting up a webpage that will store user responses from a form in a google sheets document. Upon form submission, an AJAX request is made and altered as to populate fields in a google script. The data fields in the request show up as undefined in both the google sheet and in curl response generated.
I know that the connection is made successfully because "undefined" values populate the google sheets cells.
The js is shown below.
<html> <head> <script src="jquery-3.3.1.min.js"></script> <script> var script_url = "https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec"; function insert_value() { var id1 = $("#id").val(); var name = $("#name").val(); var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=insert"; var request = jQuery.ajax({ crossDomain: true, url: url, method: "get", dataType: "json" }); } function ctrlq(e) { alert('Congrats! Registered Successfully') } </script> </head> <body> <form autocomplete=off action="javascript:;" id="resetForm" onsubmit="insert_value()"> ID : <input type="text" class="id" name="id"><br> First name: <input type="text" class="name" name="name"><br> <input type="submit" value="Send form data!"> </form> </body> </html>
Here is the curl generated for the request:
" https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec?callback=ctrlq ^&name= undefined ^&id= undefined ^&action=insert" -H "Accept: application/json, text/javascript, / ; q=0.01" -H "Origin: null" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" --compressed
I'm not sure why they are undefined as the values are explicitly passed into the url by the js.
2 answers
solution1
0 ACCPTED 2019-04-03 13:29:54
<html> <head> <script src="jquery-3.3.1.min.js"></script> <script> var script_url = "https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec"; function insert_value() { var id1 = $("#id").val(); var name = $("#name").val(); var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=insert"; var request = jQuery.ajax({ crossDomain: true, url: url, method: "get", dataType: "json" }); } function ctrlq(e) { alert('Congrats! Registered Successfully') } </script> </head> <body> <form autocomplete=off action="javascript:;" id="resetForm" onsubmit="insert_value()"> ID : <input type="text" id="id" name="id"> <br> First name: <input type="text" id="name" name="name"> <br> <input type="submit" value="Send form data!"> </form> </body> </html>
Instead of giving class names to the input elements, give Id. Id is nothing but a unique attribute for each element. It must be unique.
Also, I have changed the class attribute to id. Now it must work as expected.
solution2
-2 2019-04-03 13:27:06
Hello you can't say my connection is successfull because I get undefined values > it's false, as you will get undefined values anyway.
What you have missed here, is to send your request once your form has been updated, not on initialization (it's what you are doing here)
You have to encapsulate your function within a kind of jquery document ready function https://learn.jquery.com/using-jquery-core/document-ready/ Or simply make sure your variable are up to date before sending them ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.