Why can't I get the value of this text input? - javascript

It seems simple enough, but nothing I try is working. I have a jquery ui datepicker, I use val() to get the value of that input on button click(), then log it. The click event is working. I can log a string I write myself, but when I pass console.log() the variable that stores the datepicker value...nothing. I've tried using html() and text() instead of val(), still nothing
//JS
$(function(){
$("button").button();
$("#date").datepicker();
var date = $("#date").val();
$("button").click(function(){
// this logs
console.log("event working");
// but this logs nothing
console.log(date);
});//close click
});//closes function
//HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://myDomain/bn/lbStyle.css"/>
<script src="http://myDomain/index.js"></script>
<title>
Welcome to The Bringer Network
</title>
</head>
<body>
<form id="dialog">
<p>Date <input type="text" id="date"/></p>
<button>Submit</button>
</form>
</body>
</html>

You should declare date variable within click if you want to assign the value of input field. Go through code below. You actually initialized soon after the page is loaded whixh is not the correct way in your case.
$(function(){
$("button").button();
$("#date").datepicker();
$("button").click(function(e){
e.preventDefault();
var date = $("#date").val();// look this line. It should be inside.
console.log("event working");
console.log(date);
});//close click
});

I'm not sure what are you trying to do. But I think you should place this: var date = $("#date").val(); in your click event. Because your code assigns the .val() of the field when it's empty. That's why your var date is empty.
http://jsfiddle.net/FnGmS/ - Here is a working demo of this code:
$(function () {
$("button").button();
$("#date").datepicker();
$("button").click(function () {
var date = $("#date").val();
console.log("event working");
console.log(date);
});
});

Related

use value from input field in html dialog box to var in code.gs using Google Apps Script

I have a dialog box where user can select a year. Then I want the server to process the selected value in the function doSomethingWithCompetitionYear(theYear).
Looked at several discussions, but can't get it working. Looks like I need to do something with .withSuccesHandler().
Code.gs
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createTemplateFromFile('DropDown_NewCompetitionFile');
thisYear = new Date();
htmlDlg.thisYear = thisYear.getFullYear();
htmlDlg.nextYear = htmlDlg.thisYear + 1;
htmlDlg = htmlDlg.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(200)
.setHeight(150);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Make selection');
};
function doSomethingWithCompetitionYear(theYear) {
var ui = SpreadsheetApp.getUi();
ui.alert(theYear);
}
HTML doc
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Year
<select name="Competition_year" id="Competition_year" type="integer">
<option value=<?= thisYear?>><?= thisYear?></option>
<option value="nextYear"><?= nextYear?></option>
</select>
<hr/>
<button onmouseup="closeDia()">Submit</button>
<script>
var theYear = document.getElementById("Competition_year").value;
google.script.run.doSomethingWithCompetitionYear();
window.closeDia = function() {
google.script.host.close();
};
</script>
</body>
</html>
Here's a simple boiler plate for doing something with .withSuccessHandler
I added some JQuery, a msgdiv, withSuccessHandler() and a doSomethingWithCompetitionYear() server function.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Year
<select name="Competition_year" id="Competition_year" type="integer">
<option value=<?= thisYear?>><?= thisYear?></option>
<option value="nextYear"><?= nextYear?></option>
</select>
<hr/>
<button onmouseup="closeDia()">Submit</button>
<div id="msgdiv"></div>
<script>
var theYear = document.getElementById("Competition_year").value;
google.script.run
.withSuccessHandler(function(msg){
document.getElementById("msgdiv").innerHTML=msg;
}))
.doSomethingWithCompetitionYear();
window.closeDia = function() {
google.script.host.close({year:$("#competition_year").val()});
};
</script>
</body>
</html>
code.gs:
function doSomethingWithCompetitionYear(obj) {
return Utilities.formatString('I did something with this year: %s',obj.year);
}
Situation:
If I understand you correctly you have a dialog box with two options, and you want to pass information on the selected option (in this case, 2020 or 2021) to the server-side function doSomethingWithCompetitionYear(); when the Submit button is clicked.
Issues:
If that's the case, you don't actually need a success handler. You just need to pass the selected value as a parameter of doSomethingWithCompetitionYear(theYear);.
Also, if you want this to happen when the Submit button is clicked. You should add this to the closeDia function. Otherwise, doSomethingWithCompetitionYear(); will run before submission.
Finally, if you want to pass the next year (2021), and not the string "nextYear", you'll have to use scriplets on the element's value.
Modification 1. Next year value:
Replace this:
<option value="nextYear"><?= nextYear?></option>
For this:
<option value=<?= nextYear?>><?= nextYear?></option>
Modification 2. Calling server-side function when button is clicked:
Replace this:
<script>
var theYear = document.getElementById("Competition_year").value;
google.script.run.doSomethingWithCompetitionYear();
window.closeDia = function() {
google.script.host.close();
};
</script>
For this:
<script>
window.closeDia = function() {
var theYear = document.getElementById("Competition_year").value;
google.script.run.doSomethingWithCompetitionYear(theYear); // theYear parameter has to be passed to server-side function
google.script.host.close();
};
</script>
Note:
If you want to use information coming from doSomethingWithCompetitionYear(theYear); in the client-side, you should use a success handler, which can call a client-side function that will get this data as a parameter (the server-side function, called by google.script.run doesn't return anything by itself, it needs a callback function). It would be something like this:
google.script.run.withSuccessHandler(yourClientSideFunction).doSomethingWithCompetitionYear(theYear);
Reference:
Class google.script.run (Client-side API)

Set a variable in a jquery function

I use this function to display a mysql table on my page and if table has new rows to update it.
I want to use a few buttons to change 'data.php?clas=Regularitate%20Sedan' or 'data.php?clas=' to something else.
My final code to work like this:
-when I press button1 $('#Table3').load('HERE TO BE VARIABLE1') AND THE TABLE3 TO REFRESH
-when I press button2 $('#Table3').load('HERE TO BE VARIABLE2') AND THE TABLE3 TO REFRESH
<div id="show"></div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
setInterval(function () {
$('#Table3').load('data.php?clas=Regularitate%20Sedan')
$('#Table2').load('data.php?clas=')
}, 1500);
});
</script>
I tried this function
<head>
<script type="text/javascript">
var destinatie = "hello.html";
function choose(choice){
destinatie = choice;
}
</script>
</head>
<button type="button" onclick="choose('/data.php?ral=1&clas=Regularitate%20Sedan&tur=1')">PS1</button>
I think it can change the destinatie variable, and on jquery I changed $('#Table3').load('destinatie').
How do I call the jquery function?
put a data-choice attribute in your html and get it with :
$('button#IdOfYourChoice').attr('data-choice')
look at this ressource :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Go to URL if input val == something

So, I've found this JSFiddle example. In JSFiddle works well, the problem is that, even if I search any != from "advogados" (just testing), the browser goes to: http://www.site.com/index.html?procura=teste
No jQuery conflict, no html issue.
Here's JS
$("#procura").on("submit", function(event){
// prevent form from being truely submitted
event.preventDefault();
// get value of text box
name = $("#procura_texto").val();
// compare lower case, as you don't know what they will enter into the field.
if (name.toLowerCase() == "advogados")
{
//redirect the user..
window.location.href = "http://jornalexemplo.com.br/lista%20online/advogados.html";
}
else
{
alert("no redirect..(entered: " + name + ")");
}
});
If your javascript is somewhere in your HTML before your <form> your $("#procura") will be an empty set, so the submit-action won't be bound to anything. Try following code:
<html>
<head>
<script type="text/javascript" src="/path/to/your/jquery.js"></script>
<script type="text/javascript">
$(function() {
// This code will be run if your document is completely
// parsed by the browser, thus all below elements are
// accessible
$('#procura').on('submit', ....);
});
</script>
</head>
<body>
<form id="procura">...</form>
</body>
</html>
$(function() {}) is also known as $(document).ready(function() {}), (documentation)
You aren't defining the variable name. http://jsfiddle.net/zwbRa/59/
var name = $("#procura_texto").val();

How do I pass this JSON data to an autocomplete

Special thanks to Raúl Monge for posting a fully working code for me.
My problem was getting JSON data from a file.json and using this data to autocomplete search on it with JavaScript. The code that finaly got it working for me is the following:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('json/telefoonnummers.json', function(json) {
$.each(json.personen.persoon,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.naam+" - "+value.telefoonnummer;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
This is the html:
<body>
<div id="content">
<input type="text" id="search" />
</div>
And this has to be included in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Thanks stackoverflow!
NEW EDIT CODE WORKING:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('data.json', function(json) {
$.each(json.persons.person,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.name;
arrayAutocomplete[index]['value'] = value.phoneno;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
</script>
Add this in head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This is the html
<body>
<div id="content">
<input type="text" id="search" />
</div>
</body>
why not use
var data = [
"Aragorn",
"Arwen",
....
];
since all of those data are labels?
There you go
A working example with the data structure you have.
Just initialize the autocomplete once the JSON is loaded & the data is formatted.
$( "#search" ).autocomplete({source: availableTags});
Your document ready is within your function.
Try to write your function outside of your document ready.
Then write your document ready to call your function.
Some something like this:
function loadJson() {
//alert("Whoohoo, you called the loadJson function!"); //uncomment for testing
var mycontainer = [];
$.getJSON( "data.json" , function(data) {
//alert(data) //uncomment for testing
$.each( data, function( key, val ) {
//alert("key: "+key+" | val: "+val); //uncomment for testing
array.push([key , val]);
});
});
return mycontainer;
}
$(document).ready(function(){
//alert("Boojah! jQuery library loaded!"); //uncomment for testing
var content = loadJson();
dosomethingwitharray(content);
});
Hope this helps!
Also make sure you have jQuery included in your head ( <head> </head> ):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And add your javascript at the end of your body ( <body> </body> ).
To test if jquery does it's job try this:
<html>
<head>
<title>getting started with jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<h1>my page</h1>
<p>this paragraph contains some text.</p>
<!-- javascript at end -->
<script>
$(document).ready(function(){
//show a dialog, confirming when the document is loaded and jquery is used.
alert("boojah, jquery called the document ready function");
//do something with jquery, for example, modify the dom
$("p").append('<br /> i am able to modify the dom with the help of jquery and added this line, i am awesome.');
});
</script>
</body>
</html>
PS. Uncomment alerts for testing stuff, so you can test what happens. If you have space in your document i suggest using $.append to an div that log's all action's so you can see exactly what's going on because alert's in a loop like the .each are quite annoying! more about append: http://api.jquery.com/append/

Jquery UI Datepicker doesn't show again when link is clicked

I seem to have this working except for the fact that once the link is clicked, the datepicker opens, then I select a date and all is good and well, then once I try to click the link again, the date picker does not open again.
What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
function test() {
var datePickerValue = null;
$("#d1").datepicker().datepicker("show").change(function ()
{
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
}
</script>
</head>
<body>
<div id="d1"></div>
test
</body>
</html>
Just add the show method before the datepicker() as like below:
$("#d1").show().unbind().datepicker().datepicker("show").change(function () {
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
This will fix your issue.
function test() {
$('#d1').datepicker({onSelect: function(){alert("You picked: " + $(this).val())})} );
}
Sorry if i am completely off the mark here but you might have more success if you use, jquery .on - http://api.jquery.com/on/
so add a id or class to your link:
<a class="clicky" href="#">test</a>
then call your function like this:
$("body").on("click", ".clicky", test);
I think this will solve your issue but I may be wrong

Categories