Launch jQuery .datepicker from Another JS Function - javascript

I need to launch .datepicker only if the text entered into a field does not meet a set of criteria. But, I can not figure out how to launch .datepicker other than directly from a field getting focus or a button being presses.
What I'm trying to do...
The HTML
<input type="text" id="userDate" name="userDate" style="width: 100px;" onblur="checkDate(this.id);" />
The JS
function checkDate(theId)
{
var enteredValue = document.getElementById(theId).value;
var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria
if (checkedValue == null)
{
// this is where I want to call the .datepicker to have the calendar show up
$("#userDate").datepicker();
}
else
{
document.getElementById(theId).value = checkedValue;
}
}
I know, this would be easier if the calendar just came up when the text field gets focus. But, this is not the way the client wants it to work. They want to accept user input as long as it falls into their desired formats. If not, then they want the calendar and a default, forced format.
Thanks.

If you are using the datepicker in jQuery UI, you would show the datepicker like this:
$("#userDate").datepicker("show");
Edit:
Your code would probably have to look something like this:
$(function(){
$("#userDate").datepicker(); // <-- Create the datepicker on load
});
function checkDate(theId)
{
var enteredValue = document.getElementById(theId).value;
var checkedValue = evaluateValue(enteredValue); // this checks to see if the text meets the criteria
if (checkedValue == null)
{
// this is where I want to call the .datepicker to have the calendar show up
$("#userDate").datepicker("show"); // <-- Show datepicker when needed
}
else
{
document.getElementById(theId).value = checkedValue;
}
}

Okay, after many cans of Pepsi Max and even more hours of research, trial and error; this is what I've come up with... and it meets my needs.
$(document).ready( function()
{
$("#userDate").blur(function()
{
var convertResults = convertMyDate('userDate'); // call to my code that checks the date for accepted formats
if (convertResults == null)
{
$("#userDate").datepicker({
changeMonth: true,
changeYear: true
});
$("#userDate").datepicker("show");
}
else
{
document.getElementById('userDate').value = convertResults.toString('MM/dd/yyyy');
}
});
});
The only problem now is that the client's form has 14 date fields. So... copy this 13 more times in my code!? I just don't have the time right now to figure out a way to roll all this into a single function that will initiate all of them in a loop...
Any suggestions on that would be appreciated.

Related

Show/hide a select field on Edit page, based on database value

In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value

Related dropdown menu issue

I'm polishing up a bit of jquery I wrote that works on 2 dropdown boxes. Basically, when the first dropdown is changed, it filters the second dropdown to show only the applicable choices. If the first choice (value: "none|") is chosen in the first dropdown, it shows no choices in the second
It works great, most of the time. Here's the issue: If you select the first choice in the first dropdown, the second dropdown clears out. But if you then choose another option in the first dropdown, the second stays empty when it shouldn't.
I'd appreciate if you can help me figure this out. You can find the dropdown boxes here: http://goinspire.com/jwrp-hotel-registration/.
PS: If it makes a difference (but I think it doesn't), it's a WordPress site and the form is generated by GravityForms.
PS: here's the code:
tripFilter = function () {
var tripClass = '.hotel-trip select',
hotelClass = '.hotel-name select',
unusedClass = '.unused-options select';
jQuery(tripClass).change(function(){
//testFunc();
var tripSelect = jQuery(tripClass),
trip = tripSelect.val(),
hotelSelect = tripSelect.parents('form').find(hotelClass);
if (trip === "none|"){
jQuery(hotelClass+" > option").each(function() {
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
});
} else {
tripnum = trip.match(/JWRP (\d*)/)[1];
//var hotelChoices = [];
jQuery(unusedClass+" > option").each(function() {
jQuery(this).clone().appendTo(hotelClass);
jQuery(this).remove();
});
jQuery(hotelClass+" > option").each(function() {
hotelMatch = jQuery(this).val().match(/(\d*) /);
//console.log(hotelMatch);
if (hotelMatch === null || hotelMatch[1] != tripnum){
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
//console.log("not a match!");
};
});
}
});
};
jQuery(document).ready(function () {
tripFilter();
});
jQuery(document).bind('gform_post_render', function(event, form_id){
if(form_id == 38) {
tripFilter();
}
});
If I have understood properly, first dropdowm guides second.
So, I think you might just add a listener on "change" event of first dropdown, to perform your function every time the value of first input goes through some change.
Try this way:
$(document).ready(function(){
$('#38').bind('change', tripFilter)
});

Show div if dates from two inputs with jQuery datepicker do not match

I have 2 inputs which have jQuery UI Datepickers attached to them. Basically a to and from date.
I want to be able to show a div when the 2 dates do not match from the 2 inputs.
I tried playing around with the following code below which shows an alert when 2 inputs match using jQuery .blur
Problem is after some research .blur doesn't respond too well with the datepicker as when you leave the outside of the input to click a date it triggers.
I suppose I need to find a way around this or if anyone knows any other way of seeing if datepicker inputs values are different.
$('input.date').blur(function() {
if ($('#id1').attr('value') == $('#id2').attr('value')) {
alert('Same Value'); return false;
} else {
return true;
}
});
Thanks
Use the change event of the inputs, like in this JSFiddle
$("input.date").on("change", function () {
if ($("#id1").val() === $("#id2").val()) alert("DATES ARE EQUAL! :)");
else alert("DATES ARE NOT EQUAL! :(");
}).datepicker();
onSelect: function(date)
{
if(date == $('#input2').val() && $('#input2').val() != '' )
{
alert('equal dates');
}
}
Use this code in first input

jquery javascript - clear checkboxes on changing autocomplete field

I have the below script:
$("#product1").autocomplete({
source: "get_sku_family",
messages: {
noResults: '',
results: function () {}
},
select: function (event, ui) {
var selectedObj = ui.item;
$.post('get_as_09',
{
data: selectedObj.value
},
function (result) {
if (result[0] > 0) {
$('#h09_1').attr('checked', 'checked');
} else {
$('#h09_1').removeAttr('checked');
}
}
});
}
});
This has an autocomplete field that when text is entered provides options from a database. this works. then on clicking an option from the autocomplete, it queries the database with a function(get_as_09) and checks the checkbox based on the result.
Again this works 100%.
What I do want to change though, is that when I enter a new value on the autocomplete, it must clear the checkboxes before applying the new database lookup logic to check the boxes.
I just don't know where to add the $('#h09_1').removeAttr('checked');
Thanks and Regards...
any help appreciated
UPDATE Ripu
if(data:selectedObj.value.length ==0 ){$('#h09_1').removeAttr('checked');};
$.post('get_as_09', {data:selectedObj.value},function(result) {
if(result[0] > 0) {
$('#h09_1').attr('checked','checked');
} else {
$('#h09_1').removeAttr('checked');
}
});
before this line
$.post('get_as_09', {data:selectedObj.value},function(result) {
check if the value of data:selectedObj.value is empty. If it is empty, then you don't need to make a post request, just simply uncheck the checkbox
try to make it on texbox on change event means when you enter the new value in auto complete make it there to clear any thing you want check
Why dont you clear your checkboxes on focus of the auto-complete field.
Here is the documentation about this event http://api.jqueryui.com/autocomplete/#event-focus
as you said just a $('#h09_1').removeAttr('checked'); should suffice.
focus: function( event, ui ) {
$('#h09_1').removeAttr('checked');
}
what if you put before
$.post('get_as_09', {data:selectedObj.value},function(result) {
so everytime before you put smth inside your $('#h09_1') you clean it?
What if you attach an event listener on the element based on the keypress event? Something like this:
$(selectedObj).one('keypress', function (e) {
var checkbox = $('#h09_1');
if (selectObj.val().length > 0) {
checkbox.attr('checked', false);
}
});
This way you know somebody is typing in the field before you clear it. You could bind the event listener after each database lookup. Just an idea.

Clearing a text input (if it's empty) when another text box is clicked - jQuery

I have an email text box that contains the text '(Not Required)' until a user clicks on it, at which point it turns blank. I'm trying to make it to where if the user clicks another text box without entering an email address (or entering anything), the text box will revert to containing (Not Required).
Here's what I have:
$(document).ready(function () {
$('#email').val("(Not Required)");
// this part works fine
$('#email').click(function(){
if ($(this).val() == '(Not Required)'){
$(this).val('');
}
});
// this isn't working
$(':text').click(function(){
var em = $('#email').val().length();
if (em<3){
$('#email').val('(Not Required)');
}
});
});
I can't figure out why the second part isn't working correctly. Any help would be rewarded with a lifetime's devotion to yourself from myself in a very big way. Forever.
var em = $('#email').text().length();
Should be
var em = $('#email').val().length;
And I show you a better way do this by chain method:
$(document).ready(function () {
$('#email').val("(Not Required)").foucs(function() {
$(this).val('');
}).blur(function() {
if ($(this).val().length < 3 ){
$(this).val('(Not Required)');
}
});
});
You have to use $('#email').val().length instead of $('#email').text().length()
Change
$('#email').text().length();
to
$('#email').val().length;
And just a suggestion, why not use the blur() event of the email input to return the 'Not Required' text instead of waiting for a click on another input box?
click isn't the event you should catch. focus is the one to go. never forget keyboard navigation.
Don't query the DOM twice, save the DOM element and work with it.
use val() instead of text and length instead od length()
:text isn't a good selector. it implies the global selector $('*')
$(document).ready(function () {
var $email = $('#email');
$email.val("(Not Required)");
// this part works fine
$email.focus(function(){
if (this.value == '(Not Required)'){
this.value ='';
}
});
$('#otherTextBoxId').focus(function(){
if ($email.val().length <3 ){
$email.val('(Not Required)');
}
});
});

Categories