How can I access the value the user submits in the input field at the top and place it in the code after "LIKE" in the SQL query? My code works with the given value, 9999, but I want that value to instead be whatever the user enters into the input field.
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text">
<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';
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like 9999"
});
</script>
</body>
</html>
Updated code:
<!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
});
To get the value from the input textbox you can either use the following:
Get value from text box based on its id which you need to set in your code:
<input type="text" id="textbox_id" >
document.getElementById('textbox_id').value
OR
Get value of the first textbox in the HTML document if you don't want to set an id :
document.getElementsByTagName("input")[0].value;
Then in your script :
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like "+elem
});
Related
I am trying to validate user input against field on spreadsheet. Not sure if I am using withFailureHandler correctly. I have an output field defined in the form and this would show 'duplicate entry' if the entry is already present on the spreadsheet. I tried the following code for just testing to see if the form will display any output and this does not seem to be working.
code.gs
function sendItem() {
var form = HtmlService.createHtmlOutputFromFile('test');
SpreadsheetApp.getUi().showSidebar(form);
}
function getTest(sometext) {
return false;
}
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output" placeholder=" any errors will appear here"></div>
</body>
</html>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run.getTest(amount)
.withFailureHandler(onFailTest);
document.getElementById("amount").value = "";
}
function onFailTest() {
var output = document.getElementById("output");
text = "duplicate entry retry";
output.innerHTML = text;
}
</script>
I'd do the html like this:
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output"></div>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run
.withFailureHandler(function(){output.innerHTML = "duplicate entry retry";})
.getTest(amount);
document.getElementById("amount").value = "";
}
</script>
</body>
</html>
But I'd use withSuccessHandler to handle the getTest return onFailureHandler will handle errors not false returns, I think.
<!DOCTYPE html>
<html>
<head>
<!-- $("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
}); -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'+post_id.value>Click to redirect</a>
</body>
</html>
How to create a link incorporating user input from the input box
I'm trying to attempt a similar mechanism but as I'm too new to HTML, I'm unable to quickly club it with jquery.
Appreciate any help! Thanks!
My sample query - https://www.w3schools.com/code/tryit.asp?filename=GPZYOB9C4JFW
When I initially tried this approach the url generated had [ input object HTML ] something like this instead of the user input string.
You need to put the jQuery code inside a <script> tag after the one that ooads the jQuery library.
Also put the code inside $(document).ready() so it runs after the HTML is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input#post_id").on("change", function() { // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
</head>
<body>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'>Click to redirect</a>
</body>
</html>
You just need to have <script> tag and jQuery document ready tag $(function() { to make it work.
<script>
$(function() {
$("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
I made a form which have an input text and an input submit,My code is working fine but I want to know how to type in hindi or non-english language in input box ?
Use of input submit is to see what I have typed in input text.
var field1 = document.getElementById('field1');
var resultField = document.getElementById('resultField');
var form = document.getElementById('hindiFont');
form.addEventListener('submit', function(event){
var x = field1.value;
resultField.innerText = x ;
event.preventDefault();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>checking</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<form id="hindiFont">
<input type="text" id="field1">
<input type="submit" value="submit">
</form>
<h3 id="resultField"></h3>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
You will have to change your keyboard settings to type in Hindi.
If just want to test, you can copy paste any Hindi text from internet and paste it in the input box
<html>
<script src="angular.min.js" type="text/javascript"></script>
<body ng-controller="firstController">
<div ng-app="">
FirstName <input type="text" ng-model="first"/>
LastName <input type="text" ng-model="last"/>
Welcome {{first + " " + last}}
</div>
<script> <!-- script for the controller
function firstController($scope){
$scope.first="HELLO";
$scope.last="ALL";
}
</script>
</body>
</html>
After running this code i m getting two text boxes with empty strings
(no "HELLO" & "ALL" in the text box)and if I writing anything in the text boxes it comes up along with the 'Welcome'.Also if I put ng-controller after ng-app it wont work.
I copied this code from some tutorial. There it works for them.
Please help me to find out my mistake.
The script runs after the page loads. Move the <script> outside the body, under the <script src="angular.min.js" type="text/javascript"></script>. This way, the script will execute before and the bindings may work.
EDIT:
Also: your app should be outside your controller (ng-app should be before ng-controller) because controllers are parts of apps.
And you need the following after your function declaration (in JS):
var app = angular.module('',[]);//This string must match the value of ng-app
app.controller('firstController',firstController);
//This string has to match the value of ng-controller.
You need to use the ng-init to call that method on page load like this
<body ng-controller="firstController"
ng-init="firstController()">
First: I think your ng-controller must be inside of your ng-app scope.
Second: Try to define your module and your controller like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body>
<div ng-controller="firstController">
FirstName <input type="text" ng-model="first"/>
LastName <input type="text" ng-model="last"/>
Welcome {{first + " " + last}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("firstController", function($scope) {
$scope.first="HELLO";
$scope.last="ALL";
});
</script>
</body>
</html>
Try this code
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="first"><br>
Last Name: <input type="text" ng-model="last"><br>
<br>
Welcome: {{first + " " + last}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.first= "HELLO";
$scope.last= "ALL";
});
</script>
</html>