I'm trying to call the Javascript variable elem after LIKE in the SQL statement so that the input text is used there. However the way I'm doing it doesn't work with the Sheetrock library I'm using (http://chriszarate.github.io/sheetrock/).
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text" id="textbox_id">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A LIKE %"+elem+"%"
});
</script>
</body>
</html>
Since you updated your question here is updated answer. Check working jsfiddle: https://jsfiddle.net/r0sk7vtf/
you need to handle submit button click event and then call service
while spreadsheet api understand like without quotes, it doesn't work via sheetrock.js , so you need to use A like '9999%' in your query
Snippet:
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var button = $('#btn'), elem = $('#textbox_id')
button.on('click', function(e){
var v = elem.val();
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like '" + v + "%'"
});
})
Related
My project:
I'm doing the bookmark section in the Yandex Browser.
Image of my project:
I want to reset the two entered values when I click the button. (I don't want to do that with the reset button. I don't want to use the form label.)
My codes:
$("#add").click(function(){
$("#siteName").val(" ");
$("#siteURL").val(" ");
});
Although he works here, he doesn't work in my project.
Since the codes are too long, I uploaded them here. Click to reach.
You are calling the addBookmark function on click, you can reset the values there.
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
document.getElementById("siteName").value = '';
document.getElementById("siteURL").value = '';
(EDIT)
or with JQuery
function addBookmark(){
// set variables
var siteName = document.getElementById("siteName").value;
var siteURL = document.getElementById("siteURL").value;
$("#siteName").val('');
$("#siteURL").val('');
Then you need import jquery to your project.
<input id="siteName" name="siteName"><input id="siteURL" name="siteURL"><button id="add">Click Me</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<script type="application/javascript">
$("#add").click(function(){
$("#siteName").val("");
$("#siteURL").val("");
});
</script>
I'm new the JS and I'm having trouble storing and find the value of a form submission. I'm able to create a simple form (as shown below) but I'm not able to find the value of the submission to store for use later.
I thought I was able to access the for value here var number = document.getElementById('fib-form-number'); but I seem to have done something wrong.
I looked at this post here but that has not seemed to work.
I know the fix is going to be easy .. but I just can't figure it out.
Thanks,
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form/title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
</head>
<body>
<!-- <input id="input" type="submit" value="Submit" onclick="return submitted();"> -->
<!-- Use form to capture numbers on submission -->
<form id="fib-form">
<input type="number" id="fib-form-number" min="1">
<button type="submit">Submit</button>
</form>
</body>
</html>
JS
// Get value of submission
$(document).ready(function() {
var form = document.getElementById('fib-form');
var number = document.getElementById('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.value;
console.log(variable)
}
});
You're misspelling variable:
var variable = number.value;
console.log(varaible)
But you could also use jQuery since you're already using it:
$(document).ready(function() {
var form = $('fib-form');
var number = $('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.val();
console.log(variable)
}
});
I have a very simple web form containing two input fields and a submit button.
What I would like to do is save the two strings inserted and redirect to my other HTML file (which is in the same folder).
HTML:
<!DOCTYPE html>
<html>
<title>Players enter</title>
<head>
<script type="text/javascript" src="ticTac.js"></script>
<link rel="stylesheet" type="text/css" href=styleSheet.css></link>
</head>
<body>
<form >
player one name: <input type="text" id="firstname"><br>
player two name: <input type="text" id="secondname"><br>
<input type="submit" onclick="checkNames();"/>
</form>
</body>
</html>
JavaScript:
function checkNames(){
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
//window.location.href = 'C:\Users\x\Desktop\hw3\tic\Game.html';
//window.location.replace("C:\Users\x\Desktop\hw3\tic\Game.html");
window.location.assign("C:\Users\x\Desktop\hw3\tic\Game.html");
}
I have commented the two other options I tried which also do not work.
You are using an HTML form... this means that your submit button will fire and try to submit your form.
In order to prevent this, you need to prevent that event from triggering. A simple modification to your JavaScript function should do the trick.
function checkNames() {
event.preventDefault();
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
window.location.href = 'SOME-PATH/Game.html';
}
To redirect to a page in your computer you can use:
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html';
There are more than one way of passing the values to another page. Here is an example using query string.
In the page that has the values.
var q = '?nameOne=' + encodeURI(nameOne) + '&nameTwo=' + encodeURI(nameTwo)
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html' + q;
In the page receiving the values.
var nameOne = location.search.slice(1).split("&")[0].split("=")[1];
var nameTwo = location.search.slice(1).split("&")[1].split("=")[1];
Use
window.location="url";
When using list.js and tabletop for a sortable table taken from a Gdoc, I get the error: "Uncaught TypeError: Cannot read property 'childNodes' of undefined" on the first line of list.js.
Because the website I work for can only have JS uploaded, I need to write all my html using js or jquery, so it's a bit wonky. I think the error is being thrown because of the order I have everything, but I have tried moving things around to no avail. Everything is working other than the sorting.
Thanks!
HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="list.js-master/dist/list.min.js"></script>
<script type="text/javascript" src="src/tabletop.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="tablesetter"></div>
</body>
<script type="text/javascript">
var url = 'url to gdoc here';
$(document).ready( function(){
Tabletop.init( {key: url, callback: showInfo, parseNumbers: true} )})
function showInfo(data, tabletop){
$("#tablesetter").append('<h2>Table Working</h2><table><thead><th class="sort" data-sort="university">University</th><th class="sort" data-sort="no">Billionaires</th><th class="sort" data-sort="no2">Billionaires Rank</th><th class="sort" data-sort="rank">U.S. News Rank</th></thead><tbody class="list"></tbody></table>');
$.each(tabletop.sheets("Sheet1").all(), function(i, cat){
var htmltable = $('<tr><td class="university">' + cat.university + '</td>');
htmltable.append('<td class="no">' + cat.numberofbillionaires + '</td>');
htmltable.append('<td class="no2">' + cat.rankedbybillionaires + '</td>');
htmltable.append('<td class="rank">' + cat.usnewsranking + '</td></tr>');
htmltable.appendTo("tbody");
})
}
</script>
<script type="text/javascript" src="options.js"></script>
</html>
JS file
var options = {
valueNames: [ 'university', 'no' , 'no2' , 'rank']
};
var userList = new List('tablesetter', options);
The problem
var userList = new List('tablesetter', options); should be executed when the dom has an element of the list class; since in the question's code the list class default to list" , so such element should be <tbody class="list"> that is going to be appended to the #tablesetter only when the showInfo function receive data from google.
The solution
We ensure that the var userList = new List('tablesetter', options) statement executes after ( ie: at the end ) of the showInfo function; in other words move var userList = new List('tablesetter', options); from options.js just before the closing right bracket of the showinfo function.
More details
in the question's code when list.js tries to init() the dom is:
and list.list is still undefined when list.js defines it's getItemSource() functions:
with the proposed fix, at the var userList = new List('tablesetter', options); the dom is like:
and when defines it's getItemSource() functions the list.list can use the tbody as aspected:
If you look at this post, I'm sure your just missing some of the minimum requirements for list.js to function properly. Try to dynamically add the input with id and class of "search" as well with your other classes. Let me know if this helps.
https://stackoverflow.com/a/23078200/4812515
I am trying to pass a particular variable value from the script tag to an input tag. But somehow it is not working.
I am trying to pass variable1 value from the below code from script tag to input tag.
So suppose variable1 value is John then this line in my code will look like this-
<input ONCLICK="window.location.href='some_url&textId=John'">
Below is the code
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
// some more code
</script>
<input ONCLICK="window.location.href='some_url&textId=variable1'">
</body>
</html>
Can anyone explain me what wrong I am doing?
Try it that way:
var variable1 = getUrlVars()["parameter1"];
variable1 = unescape(variable1);
document.getElementById('Apply').onclick = function() {
window.location.href = 'some_url&textID=' + variable1;
};
That attaches a function to the onclick event that exactly does what you want. For the initial input element simply remove the onclick attribute:
<input name="Apply" type="button" id="Apply" value="Apply" />
If you wish to perform inline functions, you need to wrap the code in an executable closure:
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="(function() {window.location.href='your_data'})();">
As this can be largely unmaintainable, I recommend you abstract this functionality into a more organized place in your application.
(function(window, $, undefined) {
// assuming you use jQuery
$('#Apply').click(function() {
window.location.href = '';// your code
})
})(window, $);
I may be totally misunderstanding what you want to do, but I hope this helps.
The whole url parameters bit is surely unnecessary.
You can just set the value attribute in the field:
var field = document.getElementById('textfield');
var value = 'Some text';
field.addEventListener("click", function () {
this.setAttribute('value', value);
});
Here's a jsfiddle example: http://jsfiddle.net/LMpb2/
You have it inside the ' ' you need to add it into the string. So try
"window.location.href='some_url&textId='+variable1+';'"
I would change it to the following if your trying to bind the click handler to this input element:
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
document.getElementById("Apply").onclick = function() {
window.location.href='some_url&textId=' + variable1;
}
// some more code
</script>
<input name="Apply" type="button" id="Apply" value="Apply" >
</body>
</html>
I haven't tested it yet but it should work.
at onclick call a function, inside that function set window.locatio.href !
a sample
<script>
var url="www.google.com";
function myfunc(){
alert(url);
}
</script>
<input type="button" onclick="myfunc()" value="btn" >
http://jsfiddle.net/CgKHN/