I have multiple forms on my page and I need an option from a select dropdown to be selected before the form can be submitted, I have the validation working in Chrome, Safari and Opera but in Firefox there is an issue: it seems to take the click of the dropdown as the full click event instead of the click of the dropdown and the selection as the event. So basically every time I click the select dropdown I get the error message, which I don't want. Can anyone offer any help with this?
$(function() {
$('form').click(function() {
if ($(this).find("select[name=packageOption]").val() === '') {
alert('Please choose a package option');
return false;
}
else {
}
});
});
Thanks.
try the focusOut event.
var hasSelection = false;
$('form').find('select[name="packageOption"]').focusout(function(){
hasSelection = true;
});
$('form').submit(function() {
if (hasSelection) return false;
return true;
});
Related
I have a textbox called txtMobile.text. It offers a list of items for a user to select from a auto suggestion box. This works great until a user goes back to the textbox after selecting the autosuggestion, they can change the text and it doesnt prevent them. Any ideas how i can only get the user to be able to only select items from the auto suggestion and not let them edit the selected text?
<script>
//var txtMobile
var isItemSelected = false;
//Handler for AutoCompleter OnClientItemSelected event
function onItemSelected() {
isItemSelected = true;
}
//Handler for textbox blur event
function checkItemSelected(txtMobile) {
if (!isItemSelected) {
alert("Please select item from the list only");
document.getElementById("form1").reset();
//txtMobile.focus();
}
}
</script>
I have some tables (more than one), when I select one table by clicking on it, I need that the first radio button is selected.
It works fine, but if I want to change the option of the radio button i cant. It keeps always the first one marked.
Here is a fiddle with the issue:
https://jsfiddle.net/jzbm4j60/
$('table').click(function(event) {
$('table').removeClass('focus');
event.stopPropagation();
$(this).addClass('focus');
var $firstRadio = $(this).find('input:radio[name=rdGoFerrys]:first');
var $secondRadio = $(this).find('input:radio[name=rdBackFerrys]:first');
if ($firstRadio.is(':checked') === false) {
$firstRadio.prop('checked', true);
}
if ($secondRadio.is(':checked') === false) {
$secondRadio.prop('checked', true);
}
});
The click event on your inputs is bubbling up the DOM and triggering the click event you have on your table. Stop that behavior by using:
$('input').click(function(e) {
e.stopPropagation()
})
i am working on the tab button functionality for my form.
I am using a plugin to customize all the selects of my form but now i am stuck on a conflict.
This is the code i have written to display my dropdown menu list using the tab button on the selects
$styledSelect.focus(function(e) {
var dropdown = $(this).next('ul');
dropdown.show();
});
$styledSelect.focusout(function(e) {
var dropdown = $(this).next('ul');
dropdown.hide();
});
The problem is that any click event triggers a focusout so i can not really select any option of my select tag, because the dropdown gets hidden first.
You can see the problem here http://codepen.io/Mannaio/pen/tLaup
How can i solve this problem?
You can set up a click and focus handler and reuse the same logic for both.
function setFocus(e) {
e.stopPropagation();
$('div.select-styled.active').each(function() {
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
};
$styledSelect.click(setFocus);
$styledSelect.focus(setFocus);
Updated CodePen: http://codepen.io/anon/pen/kcpqd
Working off of Burntforest's answer (accounts for the dropdowns not closing when tabbing out):
function getFocus(e) {
e.stopPropagation();
hideAllLists();
$(this).toggleClass('active').next('ul.select-options').toggle();
};
function hideAllLists() {
$('div.select-styled.active').removeClass('active')
.next('ul.select-options').hide();
}
$styledSelect.click(getFocus);
$styledSelect.focus(getFocus);
$(document).keydown(function(e) {
if (e.keyCode === 9)
hideAllLists();
});
http://codepen.io/anon/pen/BqEkz
I have the following script that is not working in IE 8, it works in other browsers fine but in IE 8... all the user gets, even with the checkbox input selected is alert. Any thoughts would be greatly appreciated.
$(function() {
$("form#insider-account").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});
var isChecked = false;
$("form#insider-account").change(function() {
if ($("input#insideraccount_verified").is(":checked")) {
isChecked = true;
} else {
isChecked = false;
}
});
$("form#insider-account").submit(function(e) {
if (!isChecked) {
e.preventDefault();
alert("You must agree that the information you provided is correct.");
}
else {
}
});
});
Not sure why you set isChecked in a separate event from the submit-event. I think your problem is that in IE8, this:
$("form#insider-account").change(...
Isn't triggered when a control inside the form is changed. Why not attach the change event to the control itself:
$("input#insideraccount_verified").change(...
Or, better, just check that the checkbox is checked in the submit event instead of using a variable that you set in some other event:
$("form#insider-account").submit(function (e) {
if (!$("input#insideraccount_verified").is(":checked")) {
e.preventDefault();
alert("You must agree that the information you provided is correct.");
}
else {
}
});
Listen for change on elements inside the form instead of the form iteself, after searching google for "form change ie jquery" there were a number of results stating that this was an issue including jQuery .change() event not firing in IE
It's suggested there to use the on event instead, which will listen to the change event for input elements inside your form, like so:
$("form#insider-account input").on('change', function() {
isChecked = $("input#insideraccount_verified").is(":checked");
});
i made a jQuery based select box.
Everything works fine except blur function on iPhone(I tested on iOS simulator on my Macbook.) it works fine on Android.
Here is what I wrote.
$('.listSelect a').on('click',function(e){
var text = $(this).text();
$('.listSelected').removeAttr('tabindex').removeClass('focus').blur().find('strong').text(text);
//$('.listSelect').slideUp('fast');
e.preventDefault();
});
$('.listSelected').on('click',function(e){
var attr = $(this).attr('tabindex');
if(typeof attr == 'undefined' || attr == false){
$(this).attr('tabindex','0');
} else {
console.log('Yes!');
$(this).removeAttr('tabindex');
}
$(this).toggleClass('focus').focus();
$('.listSelect').slideToggle('fast');
}).on('blur',function(){
$('.listSelect').slideUp('fast');
$(this).removeAttr('tabindex').removeClass('focus');
});
Here is my code: http://jsfiddle.net/nori2tae/jXTTh/
just tap anywhere outside(focus out) the dropdown list.the list doesnt want to go back on iPhone.
Any mod suggestion appreciated. Thanx!
Focus / Blur is only applicable to form elements, such as input, select or textarea.
What you need is stopPropagation.
...or something like this:
$(document).on('touchend', function(e) {
if ( !$('body').has(e.target).length ) {
$('.listSelect').slideUp('fast');
}
});
Demo