Can't get the Datepicker to show on form using javascript - javascript

I'm trying to add Datepicker to my online form as part of my student assessment. I'm very new to all this and I'm having issues . I've downloaded and linked to my jquery UI and I've typed the code as per the jquery UI website states but the calendar doesn't pop up on my form when I click in the Date field like it suggests, I've also taken examples from this site but I still can't get it to work.
<head>
<link href="javascript/jquery-ui-1.10.3.custom/css/south-street/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script>
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>
</head>
<body>
<form name= "myform" method="post" action="" class="booking">
<fieldset>
<div>
<label for="datePicker" class="fixedwidth">Date</label>
<input type="text" name="datePicker" id="datePicker"/>
</div>
</fieldset>
</body>

You need to call your code in ready or load function , or insert it to a function and call it in your main js file.

You have to have some jQuery code to initialize the datepicker, like
<script type="text/javascript">
$(function(){
$('#datePicker').datepicker();
});
</script>

Need to call datepicker on body load.
<script type="text/javascript">
$(document).ready(function(){
$("#datePicker").datepicker();
});
</script>

<script>
$(document).ready(function(){
$("#datePicker").datepicker();
});
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>

You are missing this code in your script
$(function() {
$( "#datepicker" ).datepicker();
});

First initialize the datepicker UI method.
$(document).ready(function(){
$("#datePicker").datepicker();
});
Since you are using jQuery, you get the value like
$("#datePicker").val();
Update:
To get the value after selecting it from datepicker
$(document).ready(function () {
$("#datePicker").datepicker({
onSelect: function (date) {
alert(date);
}
});
});
JSFiddle

Related

How to call a javascript function from a textbox when the textbox is not null / some value is passed into the textbox

I have a situation where I have a textbox which will be updated with some value and as soon as the textbox gets its value a javascript function will be called. I have tried something but this not working
if (validSubmission) {
User user = new User();
String StatusMessage=user.executeUserTask("_create_","",userBusinessEmailId,userPassword,cityOfBirth,userFirstName,userLastName,userCompanyName,userCompanyAddress,userPhone,"");
if(StatusMessage.equalsIgnoreCase("OK")) {
response.sendRedirect("login.jsp?retMessage="+"Account created sucessfully");
}
else {
//response.sendRedirect("login.jsp?retMessage="+StatusMessage);
responseMsg = "Invalid Domain Entry";
{%>
Redirect();
<%}
}
}
This is the text box where I am getting the value
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
This is the function which I am trying to call
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
Can anyone help, please?
For input type text onchange event will not work try to use onkeyup or onkeydown
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onkeyup="Redirect()">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
</head>
<body>
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
</body>
</html>
You are using selectors based on jQuery so you need to add jQuery library to your page. Please try this.
$(document).ready(function() {
$('#keyToShowInvalidDomain').change(function(){
// Call redirect function
});
}
Above code should work with JQuery.

passing variables to function with jquery

I'm new to javascript although I do use PHP.
I'm having issues passing variables using javascript/jquery on an onclick event on a href.
I'm pulling json data from a remote URL and there are 3 parameters that need to go with each request.
Date, price and currency.
I have a function to build the URL that looks like this:
function getIndexData(date, price, currency){
ajaxURL = "/data/"+date+"/"+price+"/"+currency+"";
}
This works well and builds the URL I need.
However, I have a jquery datepicker on the page to change the date to whatever I want which looks like:
$(function () {
$("#datepicker").datepicker(
{
dateFormat: 'yymmdd',
onSelect: function (date) {
getIndexData(date, price, currency )
}
}
);
});
Even if price and currency have previously been set they are now 'undefined'.
I have the same issue with the onclick events - if I try to send the price or the currency using (for example):
NET</span>
price and currency are undefined.
Is there a way I can send only one of the variables to my function whilst retaining the already existent values?
Apologies for what must be a really basic question. I'm just new to this and I've obviously misunderstood something along the way.
Ok so here is the updated answer. As you can see, if variables are declared in the global scope of the code, the date picker function will have access to it. I think it previously did not work because the html was wrong. I deleted all of the html and included only the date picker and if you test it in the browser, you will see that in the console the price, currency variables are available inside date picker onSelect function and you can also execute the function getIndexData inside it. I've assigned the function to a variable that way you can use the variable getIndexData if you want to use the function.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="col-sm-5 index-grid">
<span class="grid-label">Price</span>
<span class="btn btn-grid">CLOSE</span>
<span class="btn btn-grid">RETURN</span>
<span class="btn btn-grid">NET</span>
</div>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
<script>
var ajaxURL;
var indexDate = "2017-08-20"
var indexPrice = "closeprice";
var indexCurrency = "EUR";
var getIndexData = function (indexDate, indexCurrency, indexPrice) {
ajaxURL = "/data/" + indexDate + "/" + indexPrice + "/" + indexCurrency + "";
alert(ajaxURL);
}
$(document).ready(function() {
$(function() {
$("#datepicker").datepicker({
dateFormat: 'yymmdd',
onSelect: function(date) {
console.log(date);
console.log(indexPrice);
console.log(indexCurrency);
console.log(getIndexData);
}
});
});
});
</script>
If you declared price and currency outside of :
$(function () {
$("#datepicker").datepicker(
{
dateFormat: 'yymmdd',
onSelect: function (date) {
getIndexData(date, price, currency )
}
}
);
});
Then what you need to do is use the "this" keyword to access the values of price and currency. Just like the example below.
You may also want to check this link for more insight : https://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
$(function () {
$("#datepicker").datepicker(
{
dateFormat: 'yymmdd',
onSelect: function (date) {
getIndexData(date, this.price, this.currency )
}
}
);
});

jQuery user input on button click

I have a an HTML page with an input area and a submit button.
I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).
Can someone help me understand why it is not working, as well as a solution? Thanks.
The HTML form is as follows:
<html>
<head>
</head>
<body>
<form>
<input type="text" class="grid_size">
<button type="submit">Submit Me!</button>
</form>
<!-- Add jQuery -->
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
The custom jQuery I am using is this:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput )});
});
function grabUserInput() {
return $("form").find(".grid-size").val();
}
You named your class grid_size, and search for a class grid-size in javascript code.
This code should fix a typo:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
function grabUserInput() {
return $("form").find(".grid_size").val();
}
Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
And your markup has to match your selector:
<input type="text" class="grid-size">
BONUS:
In case all you want is to alert the value, and you do not want to submit the form use the following:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert( grabUserInput() );
});
});
why not try to put some id
<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>
and jq
$(document).ready(function() {
$("#button_submit").click(function() {
alert($('#input_grid_size').val()); }); });
it seem your code also forgot the ";" and "()" in the alert

jQuery Input Mask Not Working

I am trying to set up a donations page for people to give money to a non-profit and allow them to specify the uses of the money. I have it set up that it totals the amounts the giver puts in each field as they enter amounts. I am trying to add an input mask in each field, but it is just making my JavaScript crash and not do anything. Here is the code I currently have that works perfectly before any masks:
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
});
</script>
'toTotal' is the class name given to all the input boxes that need to be added up; that is also the class that needs a mask. 'giveTotal' is the id of the total field.
I have tried several variations I have found on StackOverflow and other sites.
Full Code:
<html>
<head>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//This is one of the masking codes I attempted.
$('.toTotal').mask('9.99', {reverse: true});
//other options I have tried:
//$('.toTotal').mask('9.99');
//$('.toTotal').mask('0.00');
//$('.toTotal').inputmask('9.99');
//$('.toTotal').inputmask('mask', {'mask': '9.99'});
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
//I have tried putting it here, too
});
</script>
<title>Addition</title>
</head>
<body>
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" id="giveTotal">
</body>
</html>
There is no masking library script referenced in the sample code. You need to download the Digital Bush Masked Input Plugin Script and copy it into your JS folder.
Then add following script reference after 'jquery.js' line:
<script src="/js/jquery.maskedinput.min.js"></script>

Code is not working

This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function nameNotAva()
{
alert("Name already exists.");
//some code
}
function nameCheck()
{
var username = document.getElementById('uname').value;
var url = "http://rscript.org/lookup.php?type=namecheck&name=";
var curl = url + username;
$.ajax({
url : curl,
type : 'GET',
success : function(urlOutput){
if(urlOutput.contains('NAMECHECK: NOTAVALIBLE')){
nameNotAva();
}
}
});
}
</script>
</head>
<body>
<input class="textBox" id="uname" type="text" maxlength="15" required/>
<input type="button" onclick="nameCheck()" value="Submit">
</body>
</html>
The problem is there in the $.ajax part. I know this because when i put alert(curl); just before the ajax part, it displays the correct URL. If you want the complete info that what i am trying to do then goto- How to check output of a created URL?
I am using jquery library of the latest version.
You haven't included the jQuery library so $ is undefined and the script will error on the Ajax part.
In general, if you have a problem with some JavaScript: Open the JS console in your browser and pay attention to any error messages.
Update after comments suggest that the code in the question was incomplete:
This is the library i am using- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" />
Script elements are not defined as empty. The end tag is required.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
http://jsfiddle.net/ksJEj/
Change the input type:
<input type="submit" value="Submit"/>
include this in your <head></head> tags:
HTML
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and this too:
HTML/JavaScript
<script type="text/javascript">
$(document).ready(function{
function nameNotAva() {
alert("Name already exists.");
//some code
}
$('input[type="submit"]').click(function (event) {
event.preventDefault();
var username = $('#uname').val();
$.get("http://rscript.org/lookup.php", {
'type': 'namecheck',
'name': username
}, function (urlOutput) {
if ($(urlOutput).contains('NAMECHECK: NOTAVALIBLE') == true) nameNotAva();
else alert("woohoo");
});
});
});
</script>

Categories

Resources