How can I insert text into an input field on another page? - javascript

I have a list of URLs and some info on a Google Sheet and managed to open the URLs with a Google Apps Script. On the page that opens, there are 2 input fields and a confirm button. I need the script to get info from the spreadsheet (which I saved as variables) and input them into these fields. After that, I need the script to click on the submit button.
I'm not entirely sure this would be the solution, but I figured I would need to get the input field element by id and then insert the variable in it. But I wasn't able to do it because getElementById() doesn't work with Google Apps Script.
I did quite some digging and only found solutions that used the HTML file on a Google Apps Script. However, I don't know if it would help solve this issue and I honestly didn't understand much of it. I guess it would only add unnecessary steps since I already managed to open the page on another tab.
I have the ID of the first input field. The second field is one "Tab hit" away from the first one and has a dynamic ID, so it won't work when I loop the script to do it with all the URLs. The only property that seems unique to it is the aria-label (I don't know if it helps). The submit button doesn't have an ID but it has a unique class and a type="submit" (I can see it on inspect but not when I open the source code on another page, don't know if there's a difference).
I already managed to open the URLs on another tab and save the info on variables, now I'm stuck on the step that inserts them on the input fields and clicks the submit button.
Here's my code so far:
function fulfill() {
var rangeValues = searchRange.getValues();
var orderId = rangeValues[604][1];
var trackingNumber = rangeValues[604][3];
var shippingCompany = rangeValues[604][4];
var url = "https://someshopifystore.myshopify.com/admin/orders/" + orderId + "/fulfill_and_ship?fulfill_only=true&fulfillment_service_handle=manual&location_id=2085355564&requires_shipping=true";
var html = "<script>window.open('" + url + "');google.script.host.close();</script>";
var userInterface = HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModalDialog(userInterface, 'Open Tab');
}
OBS1: I need to solve it through Google Sheets and Google Apps Script because it's part of a wider solution.
OBS2: The page that opens is a fulfillment page from Shopify.

If you do want to solve to implement your functionality with Google Apps Script, here some basic key points:
Have a look at the reference and guides for the usage of Apps Script HTML
service.
Bounding an HTML file to your script allows you to embed Javascript code within the <script> </script> part of a HTML file.
This is where you can use functions that are not supported by Apps Script (e.g. getElementById()).
To call an Apps Script function from the JS part, you can use the google.script.run method.
To set values to HTML input fields manually, you need to access those elements, e.g. by their ID or name. You need to inspect the source code of your URL to see how those input fields have been defined and can be identified. Subsequently you have to trigger a submit event.
If you use the Shopify API instead, you can bypass the creation of HTML file with JS script. All you have to do is to chose the right API (e.g. RESTful API to create an order), copy the JSON request (adapting it to your needs) and post the request with UrlFetchApp.fetch() - with the order request as payload within the request options.

Related

How can I save data from an html js website?

I'm trying to make a website with a sort of survey where the user picks one of 2 buttons with different text values and the website saves what value he picked and reloads the website giving the user 2 new values on the buttons. I already made the system for rolling new button values and reloading when one of them is picked but I cant figure out how to save data.
This is the current code I have:
function b1() {
data = document.getElementById("b1").innerHTML;
alert(data);
location.reload();
}
This function is called when one of the buttons is pressed (there is another one for the other button) and the data variable is what value is on the button.
Instead of alerting the data variable I want to be able to add 1 to a variable in a database which counts how many times this value was picked.
I already tried using the google sheets api but it did not work and just stopped the code from working.
I tried adding a .txt file and use js to edit it but since js is ran client side it cant edit server side files.
You can use google forms for that.
Usually if you want a custom solution you would need PHP.
Using external software like with an API you can get an easy solution without too much effort.
At the end of google forms when you have made your form, you have the option to share, and there you should click the "<>" tab to copy the iframe into your HTML.

Prepopulate a Google Form using ID without using emails

Here's my situation. I have a long list of students (each student with an ID); and each student have their own preferences on food, and games, ... (all of these data are stored on a Google Spreadsheet). I'd like to confirm all the students that the info are all correct.
I can do this by sending each student with a prefilled-link a Google Form, then after they edit, and hit submit, I'll scan and update the spreadsheet, and resend them the new link with pre-filled information that they've just editted.
However, I find it to be a little bit 'messy' (? I'm not exactly sure if this is the right word, as they have to check their emails, click on the link, and when they need to modify their data yet again, they have to find the newest email sent by me, and click on the new link).
I wonder if this can be solved just by using only Google Form (or maybe by embedding a Google Form inside another page?)? I'm thinking off creating 2 Google Forms:
One form for the students to enter their ID, and when they hit submit they'll be taken to the second Google Form with their newest info (fetched from the spreadsheet) pre-filled for them.
The second form is the form filled with their previously-entered information.
Since Google App Script will not allowed me to redirect the users to some other website (including, other Google Forms?) upon form submission, so I'm thinking of embedding the ID Google Form into my site on Google Site.
Here's my pretty bad embedding:
<!-- Normal form embed code, add an ID -->
<iframe id="gform" src="https://docs.google.com/forms/d/e/MyFirstFormURL/viewform?embedded=true" width="640" height="700" frameborder="0" marginheight="0" marginwidth="0" style="margin:0 auto; max-width:100%;">Loading…</iframe>
<script type="text/javascript">
var load = 0;
document.getElementById('gform').onload = function(){
/*Execute on every reload on iFrame*/
load++;
if(load == 2){
/*Second reload is a submit*/
document.location = "https://docs.google.com/forms/d/e/MySecondFormURL/viewform?embedded=true";
}
}
</script>
But I run into 2 problems (or maybe 3 problems):
I use onload event for the iframe to check whether the form has already been submitted; which is bad, since it will still direct me to the second page even when I hit "Clear Form".
I cannot read the ID the student provided inside the Google Form embedded in iframe. :(
Even if I can somehow read the ID in my Google Form, I have no way to externally perform a search on my spreadsheet to get the desired pre-filled link (it must be done by GAS back-end, right?)
I have some basic knowledge in programming (like a tad C, and C++; but I have very little (next to nothing) experience when it comes to web-development), I just list out everything that I have thought about, and worked on in this post. :(
Can someone give me a push? :(
Thank you so much in advance, :*
There's a variety of ways this can be done, but here's what I would use. The major advantage of this approach is that it wouldn't require any app script coding.
Rather than email a direct link to a form, I would send the students a link to a webpage that is actually a google spreadsheet (example here --Feel free to submit test data on the form).
Make sure to link the form's responses to appear in the same spreadsheet and then use an index and Counta function (see below) to get the respective latest answers to appears as I did in cells b3 and c3 in screenshot below. These latest answers can be embedded in the link to the form shown in cell A3 which ensures that the spreadsheet will always have a link to the latest submission.
Note if you want to give your students a link to the actual spreadsheet, that would be a little less browser compatible but offers instant updates to the updated form link, whereas a webpage refreshes every 5 minutes.
Good luck.

I'm currently trying to create a chrome extension (ContextMenu with right click search)

I was trying to include an option which will redirect the user to the google sheets page and select a particular cell as per the selection text in the UI. I already created the contextmenu extension and also associated the google sheets URL in the JavaScript code and it's redirecting as intended.
All that I would like to know is, how can we let the system know that once it reaches the required document, what is the procedure to find a cell in the sheet using URL itself?
Like is there any command we can use after #gid=0, because #fragments would generally mean the end of the parameters and will ignore anything coinciding with it.
I've tried using '/search?q=query' after the doc URL, but no luck
let url = 'https://docs.google.com/spreadsheets/d/fileID/edit#gid=0'

How does Google Calendar update the content of an email AFTER it is sent?

Google calendar invite emails will update after they are sent if the original event has been changed... how does Google achieve this? Is there a general technique for anyone to do this? Or is this only possible because Google owns both gMail/gCalendar and the two systems are integrated behind the scenes outside of SMTP?
My first guess was that they used an iframe or an image that was loaded when the email was opened, but inspecting the source of the gMail page doesn't show any signs of that.
Here's a screenshot of the updated text:
And here's the HTML for that section of the page when reading the email within gMail:
Note :
Inspecting Source wil give you nothing other than the markup of the content you see in the page after all dynamic operations including ajax.
To check the actual source, you want to visit view-source:url.
Now the question
That information is updated automatically at Run time via a JavaScript code.
In the image, you checked on Inspect element, which show the code of live view and so, you saw the updated content.
It is done by JavaScript DOM and text manipulation.
To verify this,
Click on the address bar.
add view-source: before the url. So, it will look like view-source:https://url
Then press ctrl+f or the corresponding key to find.
Search for the <div id=":8hg" which will show 0 results.
The view-source is load the source of the file without any ajax or JavaScript manipulation.
The div is not present in the source. So, we can understand that it is done dynamically.
When checking in detail,
in the source, we can see a link https://www.google.com/calendar/event?action\u003dVIEW\u0026eid\u003db..... which is stored in an array.
From this link, the content is taken.
(I blacked out some text for privacy).
Based on the return of the url, the content on mail is upated.
To verify this,
In the mail, you can see This invitation is out of date
But in the view-source: page, search for This invitation is out of date and it will return 0 results.
So, it is sure that the Calendar details are taken via an API call by Gmail to the G Calendar API.
I wonder if on sending the email they create an image at some url and then if it changes they just remove it, then in the email they have something like
<div id="updated"></div>
<img src="asdfawe" onerror="document.getElementById('updated').innerhtml="some text""/>
Although im not sure if they can't use the onerror attribute (b/c email + js = bad idea). the only other way is just to use alt attribute and use some css trickery but I don't see how that could result in the inspected code.

Hide WSS 3.0 Webpart Using JavaScript

I am using WSS 3.0 in my application. I am displaying a List as a DataView Webpart. My objective here is to make this webpart visible to a selected group of individuals. As there is no option for Target Audience in WSS 3.0, I went to edit Permissions for List and gave Read permissions only to selected users. This doesn't hide the web part from the page, rather shows an Access Denied message to other users.
Access denied. You do not have permission to perform this action or access this resource.
As I said, I want to hide this webpart, as in make it invisible on the web page from other users who do not have permissions to view it. As this message will be displayed only to those users who do not have permissions!, my approach is to search for the above message in the html and identify and hide the parentnode, thereby hiding the webpart.
I am not quite sure how to do this. Any ideas? Thanks in advance!
I'm going to assume you're in a situation where you can add additional web parts to the page and not trying to add JavaScript to the DataView Web Part directly. My suggestion won't work on a separate page if a Designer adds another view of this list.
Upload a blank .js file to your Site Assets. Add a Content Editor Web Part to your page, point it at that file. Add JQuery from a provider or host it yourself, adding the reference in your file. From there, you have 3 directions in which to work: first, explore the web part with Internet Explorer's F12 Developer Tools, keeping a particular eye on divs and tables with good unique ids, names, or classes that would solve your problem if hidden. Also keep an eye on the id of the div or table or cell or whatever that contains your access denied text. Second, (assuming you're new to JQuery) do some JQuery tutorials and then start playing with selecting the above items and, say, changing their background color. Once you have both of those, you're 90% there: (try to) select the object that would contain the access denied text, and if the innerHTML is present and equals that string, then set display:none for the div or tables to hide your web part. The third tool you have is editing the page directly with SharePoint Designer: you can toss a div with an id of your choosing around any xsl:template, which might help in your JQuery selecting.
I'm sorry I can't give you the specific code, since I'm not in a position to test it. If that changes, I'll try and give a more detailed response.
Old, misdirected answer: Do either of the answers here work for you? Alternatively, this answer has some great resources to solve your problem. Just change the message to an empty string.
Thanks Aron :D
I found the id for the webpart and hard coded it. It provided the solution, but I was hoping to programmatically fetch the id instead by searching the innerhtml, as I have more than one web parts that have to be hidden.
I found a partial solution here:
Hide SharePoint web part using javascript onclick method
I put a CEWP on the page and added the following script in it:
<script>
function hide()
{
var content = document.getElementById("webpartID").innerHTML;
var n = content.search("Access denied. You do not have permission to perform this action or access this resource");
if(n!=-1)
{ document.getElementById("webpartID").style.display="none";
}
}
_spbodyonloadfunctionnames.push("hide");
</script>
In my case, I picked up the webpart id from the aspx page or view source for the page.

Categories

Resources