How to submit HTML form into a Sheet? - google-apps-script

I've checked around and most things I've found are from 2012 and workarounds for a then-existent bug. Unfortunately I'm not understanding Google's documentation on this very well.
I have a script project that is serving a web page to visitors with an HTML form:
<form id="gradingform">
<input type="text" name="name" placeholder="Name">
<input type="number" name="grade" placeholder"100">
<input type="submit" onclick="<this is where I'm having issues>">
</form>
I believe that this needs to be handled like any other time getting a script while serving a web page - by using the google.script.run. With a form specifically, I think that it's supposed to be using a success handler, so for example, something along the lines of
google.script.run.withSuccessHandler(gradeSubmitted).recordGrades()
gradeSubmitted() would be a function that just dispays a message, easy enough by doing some easy div changing. What my real issue is what recordGrades() would be like.
How do I pass the form to this function, and how do I collect the information from the form? From there I will be adding it to a Sheet, which is easy enough once the information is in an array because I can just append it. The documents say the form information should be passed as a Blob, but Google's example is kind of confusing.

This is what you have to do
onclick="google.script.run.withSuccessHandler(gradeSubmitted).recordGrades(this.form)"
And in the code.gs file you will be receiving a json as
[16-03-25 10:51:51:046 IST] {grade=10, name=Anees}

Related

How to find out what url HTML button submits to

So I'm scraping a website (instacart.com) and it requires a zip code to determine what data it displays. I want to use Python requests to post an arbitrary zip code. The only problem is I don't know what url to post it to and whether it requires any other arguments like an authenticity token or a user cache key. The zip code is entered via an text box that looks like this:
<form data-radium="true">
<input id="postalcode-16749"
name="postal_code"
type="text"
aria-invalid="false"
aria-describedby=""
autocomplete="on"
placeholder=""
data-radium="true"
value="" style=(super long block of css stuff)>
</form>
and then posted via a button that looks like this:
<button type="submit"
data-radium="true"
style="touch-action: manipulation; (long block of more css)">
Continue
</button>
I don't know a lot about web programming, but I was taught in school that HTML forms would look more like this: <form action="/action_page.php" method="get"> and you could use the action attribute to find where it was posting to. Is there a way to use the developer console to find what I'm looking for? How can I post a zip code to this website with Python?
Edit: I did a little more digging and I found that the request payload is {"current_zip_code":"some_zip_code"}, and that it's actually not using POST, it's using PUT. There's still a problem though, the request url looks like this: https://www.instacart.com/v3/bundle?source=web&cache_key= and then there's a different code each time for the cache_key. How do I know what url to post to?
I'm posting this answer in case anyone tries to do a similar thing. I found the url the button posts to and its parameters by looking in the network tab of the developer console and clicking the button. Then I ran into the problem that the url it sends the PUT request to changes every time, always ending in a different cache_key.
The solution was to use a python module called seleniumwire to simulate a browser and then grab all the network traffic. From there I looped through it and found urls containing cache_key= and stored everything after that as a string. Then tacked that string to the end of this url: https://www.instacart.com/v3/bundle?source=web&cache_key= and went back to using requests.
hope this helps someone!

How to send a post request to GTMetrix

I want my users to write his website on my site and then be sent to gtmetrix.com to start a new test, but without needing to write his website again.
I am trying with this:
<form method="post" action="https://gtmetrix.com/analyze.html">
<input type="text" placeholder="Enter your Website URL"></input>
<input type="submit">CHECK IT</input>
</form>
But i get a
Analysis Error
You tried to analyze an invalid/malformed URL
What i am doing wrong? is possible to do this?
It seems they require the url in the form data field called url.
You must use the following input tag:
<input type="url" name="url" value="" placeholder="Enter your website URL" maxlength="1024" autofocus="" required="">
Also, they could be blocking external referrers. But first try adding the name attribute.
First of all, I don't know if that website allows you to submit that form from external websites. Make sure that's possible!
Seccond of all, you are trying to sent a form without setting the name of the input field. The resource that receives your request don't know anything to do with it.
If you want to analyse websites on your own website, search for services that provide APIs for using it external.
I am not familiar with gtmetrix, but you need to set the name attribute on your input to send it with the request.

Posting data to HtmlService from separate form

I recently noticed that you cannot embed a HtmlService app in a non Google Sites site.
What I was wanting to do is have a chrome extension which was a simple form to capture feedback from users. The form would be powered by HtmlService and the data from the form captured in a spreadsheet. I know, you could do this with Google Forms, but the design and layout are not good enough to encourage users to complete the form as regularly as we wish.
As I can't embed the HtmlService apps as an iframe in the popup.html in my extension I'm wondering if I can simple have a form with a post action back to the HtmlService app.
Is this possible to have the post go back to the app? If so what would the post look like and what would the function look like to capture this data?
I have done this a couple of ways, but I ended up doing a simple local html page with a form:
<form action="yourScriptURL" method="get">
<input type="text" name="firstName" />
<input type="text" name="lastName" />
</form>
And then in your apps script:
function doGet(GETVARS){
var firstName = GETVARS.parameters.firstName;
var lastName = GETVARS.parameters.lastName;
Logger.log(firstName + " " + lastName);
//return Whatever you want here, HtmlService, UiApp, ContentService, etc
}
If you wanted, you can set the correct SCP info in your Chrome Extension/App and use JSONP to do this via AJAX. Works pretty well actually - you just need to plan out how the script is authorized, how the user is authenticated (or not) to use it, etc. It's really not as bad as it sounds.

How to use the form value in the action?

I am trying to make a form in html that uses the value you enter to form the destination URL.
<form action="../search/${params.q}" method="post" id="q">
Busqueda: <input type="text" name="q" /><br />
</form>
This is what i am doing, but it does not work, any cluess? thanks!
You'd need to handle this using a script - either server-side or on the client (JavaScript).
HTML alone can't handle parameters in the way you're using them.
So you'd need to either POST the form (as you're already doing) and handle the postback by redirecting your request to the new address, or use JavaScript to capture the field's value when a submit button is clicked and loading the new address in the browser window.
I'd suggest server-side is the best option as JavaScript might be disabled or unavailable.

Batch Paged Requests

I need to retrieve the news feed for a user, and using the Graph API that returns multiple pages. I'd like to get four pages, and that's pretty slow, so I'd like to batch a request for all pages into one request using batching. I can't figure out how to batch-request multiple pages - clearly each request in the batch is dependent on the previous.
I wrote up a webpage to let me test this all out, containing the following form:
<form method="GET" action="https://graph.facebook.com">
<input type="hidden" name="access_token" value="blahblahblah">
<input type="hidden" name="batch" value="[{'method':'GET', 'name':'getnews',
'omit_response_on_success':false, 'relative_url':'me/home'},{'method':'GET',
'relative_url':'{result=getnews:$.paging.next}'}]">
<input type="hidden" name="method" value="post">
<input type="submit">
</form>
Of course, when I get a response from Facebook that requires paging, the paging.next value is a full URL and the batching functionality wants a relative_url, so my first request works and my second request returns with the paging.next URL in a "body" key.
I found a piece of facebook documentation which states that a request like the following works, where you graph.facebook.com is followed by a full URL specifying a request://graph.facebook.com/http://graph.facebook.com/me/home?_fb_url=me/home&access_token=blahblahblah"
I was surprised to find that this works, but it does when I just make that GET request to the Graph API. Unfortunately, the batching functionality does not allow me to put that full URL in the "relative_url" field - it just does that "body" thing.
Does anybody have a good way to batch requests for multiple pages? kongo09 and I were wondering this over in the facebook dev forum, but I guess that's on its way out... http://forum.developers.facebook.net/viewtopic.php?id=107098
Thanks,
-Karl
I have found a way:
You should use
"relative_url":"me/home?after={result=getnews:$.paging.cursors.after}"