How can I pass data to a Smartsheet Web Form? - javascript

I have a html link which opens a Smartsheet form in new window so our online customers can fill out the form.
I would like to pass the value of a TextField (product name or product code) in my existing form to my smartsheet form. This would help my customers as they would not have to write the product name or product code a second time.
I have the following javascript to generate the URL that links to the Smartsheet form.
<script type="text/javascript">// <![CDATA[
var productName="productName.firstChild.nodeValue";
var sampleLink= "Order Sample!";
document.write(sampleLink.link("https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f/label.clsCaptionBold.clsFieldLabel/79019814="+productName));
// ]]></script>
The HTML code for the TextField is below:
<div class="clsField clsTextField"><label onclick="" class="clsCaptionBold clsFieldLabel" for="79019814">Product Name</label><br>
<input type="text" id="79019814" name="79019814" maxlength="4000" value=""></div>
I don't know if my javascript code is correct but when I click the link in the page I get the following message:
the form you are attempting to access is no longer active
What is the correct way to send data to a Smartsheet form?

Can I auto populate form data in a Smartsheet form?
Yes! :-)
How do I populate the form data in a Smartsheet form?
Option 1: Set a default value in the form
If the form data is always the same you can set a default value in Smartsheet's form editor. The screenshot below gives an example of this by setting the default value to 1 for the quantity.
Option 2: Pass a value in the link
A default value can be sent to the form by modifying the link and passing the value in the URL. This can be accomplished by using the field caption (in red below) for the key. For example, if my form looked like the following image I can pass in the quantity by modifying the form URL and adding &Quantity=2 to the end of the URL (note it is case sensitive).
The full URL would look something like https://app.smartsheet.com/b/form?EQBCT=ded979748e9a4a200ff56a46a6e3afae&Quantity=2
Also, the field caption might have spaces or other special characters so it is important to URL encode these as well. For example, If I wanted to pass the "Product Name" in the URL I would add &Product%20Name=laptop to the URL.
Answering the Original Question
To answer the original question, you will want your URL to look like the following to send the Product Name.
https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f&Product%20Name=driveway
This url can be dynamically generated by building the URL with javascript or passing the data via your own custom form. Since you are using a form in your example I will show that approach (which does not require javascript).
<form action="https://app.smartsheet.com/b/form" method="GET" >
<input type="hidden" name="EQBCT" value="fbab5300a6d74cc58ae6326e267b3c4f" />
<label for="productName">Product Name</label>:
<input type="text" name="Product Name" value="">
<input type="submit" name="Send" />
</form>
Note that I added a hidden element containing the EQBCT key that was in the original URL.

Related

HTML form submit adding flag into URL

I have a simple html form. When the form is submitted, the page is refreshed and the input is appended to the url.
<form>
<input name="q" type="text" />
</form>
For example, the original URL is:
file:///Users/Download/dd.html
When the form is submitted, the URL becomes
file:///Users/Download/dd.html?q=ccc
I want to add a flag to let the backend knows where the request is from. Is it possible to add a flag into the header?
If not, I want to add &global to the end of the URL, so the url becomes file:///Users/Download/dd.html?q=ccc&global I tried to set the value of the input, but it will change what displayed in the page.
I am wondering if it is possible to add a flag into header, so my backend java code can handle it. Or, add the flag to the end of the URL.
Thanks a lot!
You cant add headers with a form but you can add other params to the form with a hidden input
<input type="hidden" name="global" value="" />
If you really want to add headers you will have to use javascript and ajax.
Keep in mind that once you use params in the url a user can either refresh the page or manually add the params which may not be what you expected.

Returning to previous page without adding a URL parameter

In my website I want to allow to return from 'itemY' page to 'topicX' page.
I don't want to add a get parameter:
mysite.com?ref=topicX
I'm not sure if using document.referrer is the right way.
Also 'itemX' can be reached directly from Google so it doesn't have to show the return link.
Can you add a form with a hidden field on the page. The value of the hidden form field would be the url of the location you want to return to. Then just check for the presence of this hidden form field using js?
<form id="myForm">
<input type="hidden" id="goTo" name="goTo" value="topicX" />
</form>

Add hidden form variable to the end of the URL

I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";

Redirect the website URL Form to a particular Page

My Form Works Successfully But in website URL it only Shows the address to a Form.I have multiple Pages in which the Form button shown.All I want when a user click on The Form for Page A for that Particular page it should shown as
"www.form.com?test=page A" - this should displayed on website URL
or when the Form is submitted the receiver should view that this form coming from Page A..In the Form field I hidden this fields name 'Test' so the user cannot see it but only the receiver can view it that its coming from Page A
On my Html code I have redirected to the Build in Form.
Here is my java script code
<script type="text/javascript" src="http://test.com/form/y.php/test2"></script><no1script>Online Form - </no1script>
How to show it to my Website URL
I understand your question as "How can I redirect with a specific GET parameter?", correct me if I'm wrong.
The solution for that would be quite simple: Append the GET parameter to the forms action:
<form action="target.php">
gets
<form action="target.php?test=page_a">
so that on target.php if you evaluate the GET values, test has the value page_a.
If you're trying to hide the post data, you can try something like:
<form action="https://test.com/forms/discount" style="display:none">
<input type="text" name="couponCode" value="secret">
<input id="myform" type="submit">
</form>
<script>
document.querySelector("#myform").click();
</script>
Note: This won't stop any web ninjas, so you should think of something else, like web tokens that function sortta like private public keys.

set value in a form or pass a value in a form using jquery or javascript or ajax

i created a Google Form and list down all the ID in each input type, and then created a localhost with the same ID,
The first thing i want to do is to save the values into a localhost and pass the values in the Google Form or set the values into the corresponding ID or Name in each input type in a new tab, is there a way to do this using ajax or jquery?
my form looks like this
<form method="post" action"">
<input type="text" name="FName">
<input type="text" name="LName">
<input type="Submit">
</form>
$post('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform'{FName:Fname,LName}function(){
window.open('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform');
});
i am trying to use the $.post() in jquery but it looks like i cannot set the values into the Google Form.
Any tips please... Thank You very much
You should wrap your javascript code inside a scipt tag. Then, you should bind the code to submit event, tha happened when you press the submit button.
<script type="JavaScript">
$('input[type=submit]').submit(
// here you should put your code
});
</script>
And check your code, you wrote $post instead of $.post mi sing the dot.

Categories

Resources