Trying to pre-populate form fields with specific URLS - javascript

One of our affiliates wants us to be able to pre-populate fields on our form, based on the URL. Using something such as an "s5 parameter". For example:
Here is the example link:
www.smartreliefrx.com/qualify/new/diabetes/?a=1476&oc=172&c=1205&m=2&s1=#affid#&s2=#s2#&s3=#s1#&#s5#
How would I go about doing that? I am only using JavaScript.
Thanks!

Get rid of the #'s around the parameters in the url or you'll need to change the function below. Also change the var url to the window.location, I think its right but double check, try this:
See it in action: http://jsfiddle.net/wp4Ls24n/2/
function populateForm() {
var formVal = '';
var url = 'http://www.smartreliefrx.com/qualify/new/diabetes/?a=1476&oc=172&c=1205&m=2&s1=#affid&s2=#s2&s3=s1#&s5=someValue';
//var url = window.location.search.substring(1);
url = url.split('&');
for(var i=0; i<url.length; i++) {
var pair = url[i].split('=');
if(pair[0] == 's5') {
formVal = pair[1];
}
}
document.getElementById('someInput').value = formVal;
}
populateForm();
<form>
<label>Some Input:</label>
<input id="someInput" />
</form>

Related

Output filter results into a text box

I'm trying to create a web apps script with a field that accepts user input and returns the result(s). I need it to list all the results associated with the input query.
Things I've tried doing:
I've assigned an actual order number to orderInput and I was able to get the results I wanted it to return using Logger.log(orderMatch) so I know it works.
I wasn't sure if I was running into a formatting issue so I tried converting orderInput to a string with orderInput.toString() and that didn't work.
At first I was trying to display it in a disabled input field and that didn't work so I tried using a textarea but that didn't work either.
I've also tried moving the document.getElementById("orderResults").value = (orderMatch);
M.updateTextFields(); in various places between return item[0] === orderInput
});
I was using document.getElementById("orderNumber").addEventListener("change",orderLookup); to trigger the script from running but I also tried creating a button with onclick="orderLookup()" but that didn't work.
This is my script:
function orderLookup() {
var orderSheet = "Google Spreadsheet URL"
var ss = SpreadsheetApp.openByUrl(orderSheet);
var ws = ss.getSheetByName("Orders");
var originalSheet = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
var orderInput = document.getElementById("orderNumber").value;
var orderMatch = originalSheet.filter(function(item) {
return item[0] === orderInput
});
document.getElementById("orderResults").value = (orderMatch);
M.updateTextFields();
}
As for my HTML:
<div class="input-field col s2">
<input value="" id="orderNumber" type="text" class="validate">
<label class="active" for="orderNumber">Enter Order Number</label>
</div>
<center style="float:left;margin-left:0px;margin-top:0px;">
<h6><b>Results</b></h6>
<textarea id="orderResults" rows="10" cols="45" disabled="disabled" style="width:100%; height:auto"></textarea>
</center>
Well it looks to me like your mixing server side functions with client side functions and I'm guessing that since you provide html code and script that you trying to run is client side.
function orderLookup() {
var orderSheet = "Google Spreadsheet URL"
var ss = SpreadsheetApp.openByUrl(orderSheet);//Server side function
var ws = ss.getSheetByName("Orders");//Server side function
var originalSheet = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();//Server Side function
var orderInput = document.getElementById("orderNumber").value;//Client Side Function
var orderMatch = originalSheet.filter(function(item) {return item[0]===orderInput});//could be either
document.getElementById("orderResults").value = (orderMatch);
M.updateTextFields();//dont know
}
Assuming that:
You want to look for the data in the sheet when Enter Order Number is clicked.
You want to look for rows where first column matches the input you provided.
You want all the data in the row to show up in the <textarea> element.
A possible solution would be the following:
Create an onclick event in the label, which will run a function on the client side:
<label class="active" for="orderNumber" onclick="search()">Enter Order Number</label>
Next, the following function is run by the onclick event. This function calls a server-side function (orderLookup) which will look for matching data in the sheet and return the results.
function search() {
var input = document.getElementById("orderNumber").value;
google.script.run.withSuccessHandler(showResults).orderLookup(input);
}
Here is function orderLookup:
function orderLookup(input) {
var orderSheet = "Google Spreadsheet URL"
var ss = SpreadsheetApp.openByUrl(orderSheet);
var ws = ss.getSheetByName("Orders");
var values = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
var orderMatch = values.filter(function(item) {
return item[0] === input
});
return orderMatch;
}
If orderLookup returns a value, another client-side function will run, which will get the matching data as a parameter, and will write it to the <textarea>:
function showResults(orderMatch) {
var matches = "";
for(var i = 0; i < orderMatch.length; i++) {
matches = matches.concat(orderMatch[i], "\n");
}
document.getElementById("orderResults").value = matches;
}
So, full code would be the following:
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="input-field col s2">
<input value="" id="orderNumber" type="text" class="validate">
<label class="active" for="orderNumber" onclick="search()">Enter Order Number</label>
</div>
<center style="float:left;margin-left:0px;margin-top:0px;">
<h6><b>Results</b></h6>
<textarea id="orderResults" rows="10" cols="45" disabled="disabled" style="width:100%; height:auto"></textarea>
</center>
</body>
<script>
function search() {
var input = document.getElementById("orderNumber").value;
google.script.run.withSuccessHandler(showResults).orderLookup(input);
}
function showResults(orderMatch) {
var matches = "";
for(var i = 0; i < orderMatch.length; i++) {
matches = matches.concat(orderMatch[i], "\n");
}
document.getElementById("orderResults").value = matches;
}
</script>
</html>
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function orderLookup(input) {
var orderSheet = "Google Spreadsheet URL"
var ss = SpreadsheetApp.openByUrl(orderSheet);
var ws = ss.getSheetByName("Orders");
var values = ws.getRange(2, 1, ws.getLastRow() - 1, 3).getValues();
var orderMatch = values.filter(function(item) {
return item[0] === input;
});
return orderMatch;
}
I hope this is what you wanted to accomplish.

Adding to a url to tick a checkbox

I have a URL www.example.com/index.html
It has an element with an id of DARK_MODE.
It is a checkbox.
I want to add to the URL so that when it loads it automatically gets ticked.
I tried www.example.com/index.html?DARK_MODE=checked
This is not my website that i'm loading.
Am i doing this right?
Thanks.
Here is the solution that I propose. In order to check the checkbox, use, ?DARK_MODE=checked.
var $_GET = {};
if(document.location.toString().indexOf('?') !== -1) {
var query = document.location
.toString()
.replace(/^.*?\?/, '')
.replace(/#.*$/, '')
.split('&');
for(var i=0, l=query.length; i<l; i++) {
var aux = decodeURIComponent(query[i]).split('=');
$_GET[aux[0]] = aux[1];
}
}
if($_GET['DARK_MODE'] === 'checked') document.getElementById('DARK_MODE').checked = true;
<input type="checkbox" id="DARK_MODE" />

Get the selected value in google app script

How to pass a select box value.
I have a spreadsheet where i want to filter based on a select box value.
I made a way to call the app function on form submit. But I am not able to pass one more parameter at the other side.
I want to filter based on the select box value and thereby retrieve the result from the spreadsheet on to the web app. This is my selectbox in html.
Select DATA
<select name ="productId" id="gettheVAL">
<option>DATA1 </option>
<option>DATA2 </option>
<option>DATA3 </option>
</select>
Can anyone guide me on this? I have called the function via this
form.on('submit', function(event){
event.preventDefault();
runner.withSuccessHandler(function(array){
for (var i = 0; i < array.length; i++) {
var item = '<tr><td>' + array[i] +'</td></tr>';
table.append(item);
}
}).retrieveValuesFromForm(this);
Update
Adding the function - retrieveValuesFromForm below:
function retrieveValuesFromForm(req) {
//var selectedvalue=$('input[name="gettheSelectValue"]:checked').val();// tried like this but $ is undefined here
var sheetActive = SpreadsheetApp.openById("SHEETID");
var sheet = sheetActive.getSheetByName("SHEETNAME");
var range = sheet.getRange('A:U');
var rawData = range.getValues();
var data = [];
for (var i = 0; i < rawData.length; i++) {
if ((rawData[i][2] == selectedvalue)) // Check to see if column 3 says selectedvalue if not skip it
{
//processing
}
}
return data;
}
Based on the assumption that you have a field in your form such as
<select name ="productId" id="gettheVAL">
In your form, You could call your Google App Script function with the following parameter
runner.withSuccessHandler(function(array){
...
}).retrieveValuesFromForm($("#gettheVAL").val());
You would then change the signature for retriveValuesFromForm
function retrieveValuesFromForm(selectVal) {
...
}
Here's how I pass a selected option and a few other things.
function sendText()
{
var culr=$('input[name="priority"]:checked').val();
var type=$('#sel1').val();
var txt=$('#txt1').val();
var obj={'type':type,'text':txt,'color':culr};
$('#txt1').css('background-color','#ffff00');
google.script.run
.withSuccessHandler(clearText)
.dispText(obj);
}
I'm guessing that you need to add this line into your head tag area.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

My search function/form isn't working

I need to create a searchbar/function, whether it be in Vanilla JS or jQuery. I have created an input:
<div id="searchbar">
<input type="text" name="search" placeholder="Search..">
</div>
I have tried a number of possible solutions to get this to work, but none of them worked out.
var searchField = document.getElementById('searchbar');
searchField.addEventListener('keyup', function(e){
e.preventDefault();
var search = document.getElementById('searchbar').value;
console.log(search);
var result = [];
for (var i = 0; i < data.results.length; i++){
if (data.results[i].title.search(search) != -1|| data.results[i].summary.search(search) != -1){
result.push(data.results[i]);
document.getElementById('searchbar').innerHTML = " ";
};
}});
But it doesnt seem to work. All i need it to do is, be able to go through the API from the NY-Times, and show me the result.

how to add the input values in an array

i just like to ask regarding adding data in a array. But the data which i wanted to put is from a table of input boxes.. Here's the code that i've been practicing to get data:
http://jsfiddle.net/yajeig/4Nr9m/69/
I have an add button that everytime I click that button, it will store data in my_data variable.
i want to produce an output in my variable something like this:
my_data = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}]
and if i would add another data again, it will add in that variable and it be something like this:
my_data = [ {plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"},
{plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}]
the code that i have right now is really bad, so please help.
Currently my output:
1,4,6,4,1
You should be able to iterate over all of the textboxes using the following:
function add(e) {
var obj = {};
$('#addItem input[type="text"]')
.each(function(){obj[this.name] = this.value;});
myItems.push(obj);
}
Where myItems is a global container for your items and #addItem is your form.
Updated jsfiddle.
If you use a form and a submit button then you should be able to implement a non-JavaScript method to add your information so that the site will be accessible to people without JavaScript enabled.
Try this, sorry for modifying your form, but it works well:
HTML:
<form method="post" action="#" id="add_plank_form">
<p><label for="plank_number">Plank number</label>
<p><input type="text" name="plank_number" id="plank_number"/></p>
<p><label for="plank_width">Width</label>
<p><input type="text" name="plank_width" id="plank_width"/></p>
<p><label for="plank_length">Length</label>
<p><input type="text" name="plank_length" id="plank_length"/></p>
<p><label for="plank_thickness">Thickness</label>
<p><input type="text" name="plank_thickness" id="plank_thickness"/></p>
<p><label for="plank_quantity">Quantity</label>
<p><input type="text" name="plank_quantity" id="plank_quantity"/></p>
<p><input type="submit" value="Add"/>
</form>
<p id="add_plank_result"></p>
Javascript:
$(document).ready(function() {
var plank_data = Array();
$('#add_plank_form').submit(function() {
// Checking data
$('#add_plank_form input[type="text"]').each(function() {
if(isNaN(parseInt($(this).val()))) {
return false;
}
});
var added_data = Array();
added_data.push(parseInt($('#plank_number').val()));
added_data.push(parseInt($('#plank_width').val()));
added_data.push(parseInt($('#plank_length').val()));
added_data.push(parseInt($('#plank_thickness').val()));
added_data.push(parseInt($('#plank_quantity').val()));
$('#add_plank_form input[type="text"]').val('');
plank_data.push(added_data);
// alert(JSON.stringify(plank_data));
// compute L x W x F for each plank data
var computed_values = Array();
$('#add_plank_result').html('');
for(var i=0; i<plank_data.length; i++) {
computed_values.push(plank_data[i][1] * plank_data[i][2] * plank_data[i][3] / 12);
$('#add_plank_result').append('<input type="text" name="plank_add[]" value="' + computed_values[i] + '"/>');
}
return false;
});
});
Iterate through all keys, and add the values.
(code written from mind, not tested)
var added = { };
for (var i = 0; i < my_data.length; i ++) {
var json = my_data[i];
for (var key in json) {
if (json.hasOwnProperty(key)) {
if (key in added) {
added[key] += json[key];
} else {
added[key] = json[key];
}
}
}
}
You can use the javascript array push function :
var data = [{plank:"1",thickness:"4",width:"6",length:"8",qty:"1",brdFt:"16"}];
var to_add = [{plank:"2",thickness:"5",width:"6",length:"2",qty:"1",brdFt:"50"}];
data = data.concat(to_add);
Sorry I only glanced at the other solutions.
$(document).ready(function() {
var myData=[];
var myObject = {}
$("input").each(function() {
myObject[this.id]=this.value
});
alert(myObject["plank"])
myData.push(myObject)
});

Categories