Heres my scenario: I have an index page with 2 radio buttons on it and a span area for results. When one of the radio buttons are clicked, the span fills up with an ajax generated page that has an input box as so :
<input size='25' class='datepicker' value='Click to enter deposit date' READONLY type='text' id='depositDate' name='depositDate'>
At the bottom of this page there is an 'Add Record' button which fires off javascript validation. The validation is so:
var inpDepDate = $.trim($("#depositDate").val());
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
document.getElementById('payDate').focus();
document.getElementById('payDate').select();
return false;
}
Also in my javascript file is :
$(function(){
$( "#depositDate" ).live('focus', function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
minDate: "+1D",
showOtherMonths: true,
selectOtherMonths: true}).focus();
});
});
The problem is when the validation fails, the text does get highlighted and selected but it does not open automatically.
Ive tried a number of things, actually a ton of things from this site, and no luck. And it seems to never recognize the live event. But if I click on the text box after its failed the validation (and the text is highlighted), the calendar opens just fine. Im fairly new at jQuery and ui.
You don't need to reinstantiate the datepicker if you've already called it on #depositDate in the past. (Or on payDate)
Try this:
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
$("#payDate").datepicker("show");
return false;
}
Related
CODEIGNITER
I want to submit two forms with one button. if a radio button is not checked i only submit the first form, but when i check the radio button appear more information (second form). I want to submit the 2 forms when the radio button is selected.
The problem is that it´s only submiting form 1 even when the radio button is checked.
<script>
submitForms = function(){
if(document.getElementById('tipo').checked) {
document.getElementById("form2").submit();
document.getElementById("form1").submit();
}else{
document.getElementById("form1").submit();
}
}
</script>
This is a native JavaScript solution:
<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.getElementById("myButton").addEventListener("click", function () {
console.log(document.getElementById("form1").value);
if (document.getElementById("tipo").checked) {
console.log(document.getElementById("form2").value);
}
});
});
</script>
You might also take a look at javascript Submit multiple forms with one button
Gravity form can create a cookie when the user submits the form. I would like to use this to hide the gform_wrapper div and replace it with a simple message "You have already filled out the form."
add_action( 'gform_after_submission_1', 'set_form_1_complete_cookie' );
This is a version of what I would like to do that uses Jquery-cookie I tested it independently and it works fine but I can't figure out how to implement something like this with my form.
// when clicked on “X” icon do something
$('.close').click(function() {
// check that “X” icon was not cliked before (hidden)
if (!$('.change-message--on-click').is('hide--first')) {
$('.change-message--on-click').removeClass('hide--second');
$('.change-message--on-click').addClass('hide--first');
// add cookie setting that user has clicked
$.cookie('hide-after-click', 'yes', {expires: 7 });
}
return false;
})
Any help would be greatly appreciated.
I am building a small landing page with a simple demo e-mail signup form. I want to have the form field open up when focused, and then shrink back down on blur.
However the problem I'm facing is when you click the submit button this instigates the blur function, hiding the button and shrinking the form. I need to find a way to stop the .blur() method only when the user is clicking to focus on the submit button. Is there any good workaround for this?
Would appreciate any help I can get!
I know this question is old but the simplest way to do it would be to check event.relatedTarget. The first part of the if statement is to prevent throwing an error if relatedTarget is null (the IF will short circuit because null is equivalent to false and the browser knows that it doesn't have to check the second condition if the first condition is false in an && statement).
So:
if(event.relatedTarget && event.relatedTarget.type!="submit"){
//do your animation
}
It isn't the prettiest solution, but it does work. Try this:
$("#submitbtn").mousedown(function() {
mousedownHappened = true;
});
$("#email").blur(function() {
if (mousedownHappened) // cancel the blur event
{
mousedownHappened = false;
}
else // blur event is okay
{
$("#email").animate({
opacity: 0.75,
width: '-=240px'
}, 500, function() {
});
// hide submit button
$("#submitbtn").fadeOut(400);
}
});
DEMO HERE
Try this inside .blur handler:
if ($(':focus').is('#submitbtn')) { return false; }
why not rely on submit event instead of click? http://jsbin.com/ehujup/5/edit
just couple changes into the html and js
wrap inputs into the form and add required for email as it obviously suppose to be
<form id="form">
<div id="signup">
<input type="email" name="email" id="email" placeholder="me#email.com" tabindex="1" required="required">
<input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
</div>
</form>
in js, remove handler which listen #submitbtn
$("#submitbtn").on("click", function(e){
e.stopImmediatePropagation();
$("#signup").fadeOut(220);
});
and use instead submit form listerer
$("#form").on("submit", function(e){
$("#signup").fadeOut(220);
return false;
});
you may use $.ajax() to make it even better.
Doing this you gain point in terms of validation and the native browser's HTML5 validator will make check email format where it is supported.
I have a location search form that uses jQuery UI autocomplete.
When the user starts typing into the input, our list of locations appear as a drop down menu just below the input. If the user clicks one of the locations, the page redirects to the landing page for that location. The user can also click "enter" on the keyboard instead of explicitly clicking on the item.
Here's the probelm. I can't figure out how to get autocomplete to work if the user clicks the SUBMIT button. I'm not allowed to simply remove the submit button because it's a "call to action". The markup & code look like this: (I'm writing this from memory, so it may not be exact)
<form id="locationSearch">
<input type="text" id="enterLocation" />
<input id="goButton "type="submit" value="GO" />
</form>
<script>
var locations = [<br />
{'value': 'Brooklyn', 'url': '/ny/brooklyn/browse'}
{ 'value' : 'Hoboken; , 'url' : /nj/hoboken/browse'}
];
$('#enterLocation').autocomplete({
autoFocus: true,
source: 'locations',
select: event, ui (function() {
window.location.url
});
});
</script>
What I need to do is something like this:
$('#goButton').click(function() {
// trigger automcomplete select
});
Any suggestions are greatly appreciated!
Try using
$('#enterLocation').trigger("autocompleteselect", function(){});
I have a strange problem. This code works fine in chrome and firefox, but in IE 8 the live event will not fire the first time I uncheck a box. If I check it and then uncheck again it works every time after that.
My serverside code in the view
<%: Html.CheckBox("select-invoice-" + invoice.InvoiceNumber,
true,
new { title = "choose to not pay anything on this invoice by unchecking this box" }) %>
renders to this
<input checked="checked" id="select-invoice-TST-1001"
name="select-invoice-TST-1001"
title="choose to not pay anything on this invoice by unchecking this box"
type="checkbox" value="true" />
Here is my javascript live event wireup, simplified
$(function () {
$("[id^='select-invoice-']").live('change', function () {
var invoiceId = $(this).attr('id').substr('select-invoice-'.length);
ComputeTotalPayment();
if ($(this).is(':checked')) {
//save invoice data
} else {
//remove invoice data
}
});
});
There are no errors in the javascript on any browser. If I switch IE to compatibility mode the live event never works. Other live events for clicks on links work just fine.
The change event doesn't fire correctly in IE until the checkbox loses focus.
Bug: http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html
You'll need to map to the "click" event instead.
I have found that change causes some problems in IE. Try using the click event instead. This appears to fix the problem.
I had a similar problem and solved it by calling .change() once on page load.
$(function () {
$("[id^='select-invoice-']").live('change', function () {
var invoiceId = $(this).attr('id').substr('select-invoice-'.length);
ComputeTotalPayment();
if ($(this).is(':checked')) {
//save invoice data
} else {
//remove invoice data
}
}).change();
});