I have a simple search form of Google Images that open in a new window. When I want to change the form parameters to Unsplash (that don't use query strings on their URL search) the form continue sending query string ;(
HTML
<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>
<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>
<form id="form" method="GET" action="https://www.google.com/search?q=">
<input id="input" type="text" name="q" value="" required>
<input type="submit" value="Search" onclick="this.form.target='_blank';">
<input id="helper" type="hidden" name="tbm" value="isch">
</form>
JS
var
form = document.getElementById("form"),
input = document.getElementById("input"),
helper = document.getElementById("helper");
function googleImages() {
form.action="https://www.google.com/search?q=";
input.name="q";
helper.name="tbm";
helper.value="isch";
}
function unsplash() {
form.action="https://unsplash.com/search/photos/";
input.name="";
helper.name="";
helper.value="";
}
How create a function that remove query string from output URL? (and set again parameters when a radio option need them)
See code working here: http://jsbin.com/qitadepoxu/1/edit?html,js,output
So if you are not sending any parameters to unsplash.com don't use form submit. Instead use javascript redirect inside unsplash() function.
window.location.href = "https://unsplash.com/search/photos/";
You've clarified in a comment that when calling Unsplash, you need to pass the search string as part of the URL rather than as a query string parameter, like this: https://unsplash.com/search/photos/lion
To do that with your current setup, you'll need to do two things:
Add the string to the URL, and
Disable the form fields. Disabled form fields aren't sent with the form at all; link to spec. (Alternately, of course, you could remove them, but if you change your form at some point so that it has target="_blank" or similar, removing them would complicate allowing an Unsplash search followed by a Google Images search.)
So something like this:
function unsplash() {
// #1
form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
// #2
input.disabled = true;
helper.disabled = true;
helper.disabled = true;
}
Note the use of encodeURIComponent.
And of course, if you did update the page so that it opened a new window instead of replacing the current window, you'd update your googleImages function to set disabled to false on those inputs (since it will be left true by the unsplash function). You don't have to do that if you're replacing the page, though.
Related
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>
The code is supposed to be a youtube-like website where users can select a bunch of hashtags (via checkboxes) within a form and then click "search" and it's supposed to make a URL dynamically so that "window.location=dynamicURL" will be something like window.location="http://www.example.com/search.php?input1+input3+input4".
I've tried
var data = $('form').serialize();
to get started however when I type "data" in console, it says the variable isn't in use.
What I'm looking at doing is using some js to re-serialize the form each time a user clicks on a hashtag checkbox, so that each time a hashtag is clicked, a new array is made (clearing the old array) to be put to use in creating the URL.
I've tried several types of form serialize code and it doesn't seem to fill a variable that the console can see.
examples:
function ser()
{
$data = 'asd';
var data = 'add';
var serial = $("#divid").html($('#formid').serialize());
}
and
$('#button1').click(function () {
$("#divid").html($("#formid").find("select,textarea, input").serialize());});
both do naught. The var serial is not defined and button1.click doesn't input any html into #divid.
Here is my html:
<div id="divid">
<form action="" name="formid" id="formid" onsubmit="return false">
<button id="button1" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
<button id="button2" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
</form>
</div>
What I need to do is (when a user clicks on "search"), Get the values and build a js redirect using "window.location=URL" so that the values are separated by "+" so input2+input3+input4.
Are the form.serialize() vars I'm trying to declare supposed to output something when typed into the console?
Do I need to use ajax and a php script to build this redirecting button?
In my code, under "function ser()" I have "$data = 'asd';" and "var data = 'add';". I'm wondering why $data is populating however "data" is not. Are "$variables" treated differently than "variables"?
How to get the inputs and make the URL?
Thanks.
I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.
function submit() {
firstname = document.getElementByName("firstname");
document.write(firstname);
}
<html>
<body>
<form>
<p>firstname: <input type="text" name="firstname" />
</p>
<input type="submit" onclick="submit()" />
</from>
</body>
</html>
now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.
When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:
Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).
For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.
For the second one, you just need to use localStorage object this way:
function submit() {
var firstname = document.getElementByName("firstname");
document.getElementById("output").innerHTML = firstname;
if (!!window.localStorage) {
localStorage.setItem('firstname', firstname);
}
return false;
}
<form onsubmit="return submit();">
<p>firstname: <input type="text" name="firstname" /></p>
<input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>
I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.
function getname() {
return localStorage.getItem('firstname');
}
There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.
On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.
On any other page then you can get the value by
var name = localStorage.getItem('firstName');
Other options you can look at cookies, querystring and session storage
when redirecting to next page, bind parameters in redirecting url like this,
window.location.href = "http://yoursite.com/page?data1=one&data2=two";
And fetch them from retreiving end like below,
var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"
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.
I am trying to create a search input to a site that add the search terms to the end of the url.
This is the url in question:
http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/
You can manually search by adding the search term to the end of the url eg./Search/robert & if the string contains multiple words they need to be separated with "%20" eg./Search/Robert%20Earl.
Here is my current search form:
<form method="get" action="http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Events/Search/" id="searchform" role="search">
<input type="text" value="Search Events" name="s" id="s" onFocus="if (this.value == 'Search Events') {this.value=''; this.style.color='#000000';}"/>
<input type="hidden" name="sitesearch" value=""/>
</form>
If I type Kevin into the input, the form returns this url:
http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/?s=Kevin&sitesearch=
I know that I need some Javascript in there to handle the search and build the correct url but I have no idea what is needed.
Anyone have any ideas? Apologies if this has been answered elsewhere. I took a long look around but could not find anyything.
Add onsubmit="return searchForm(this)" to the form tag.
Then, define function searchForm:
<script>
function searchForm(form){
location.href = "http://apps.ticketbiscuit.com/ticketbiscuit.website/LyricTheatreOxford/Search/" + form.s.value;
return false;
}
</script>
See also: Open a URL based on search query without php "?q=(myTerm)" and instead with a simple "/(myTerm)"