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>
Related
I am trying to get the following to work without much success
$(document).ready(function()
{
$('#shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a').click(function()
{
alert("Please ensure you have selected the correct option");
});
});
</script>
Using inspect on Chrome, I looked for the ID for the radio button and found shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a but even so, when I save the javascript and load the page and click the radio button, no message is displayed.
The code I used to find the ID in inspect was as follows:
<input name="shippingOptionIds.5ed62ea40135a" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" id="shippingOptionRadio-5ed62ea40135a-7dac01c2c834210be865275f0700a45a" type="radio" value="7dac01c2c834210be865275f0700a45a">
you have to add an event (type input not click) to the radio and then add condition if the input.checked === true then show message
// select radio input
const input = document.getElementById('input');
// add event on input
input.addEventListener('input', () => {
if (input.checked) {
alert('this is a message!');
}
});
<input type="radio" id="input">
I want to disable add to cart button when checkbox is checked and text box is empty. If user click on checkbox and type anything in textbox, button will appear. Otherwise it will be disabled.
I am adding a class "disableit". My code is almost working: when user types anything in textbox button appears, but when again textbox goes empty class "disableit" not adding again.
What I want, if user click on checkbox add to cart button will not work until user fill info into textbox and if user uncheck checkbox textbox will hide.
jQuery('.single-product .summary button.single_add_to_cart_button').addClass('disableit');
jQuery(".custom_enter-the-domain-name,.custom_hosting-username").on('propertychange change keyup paste input', function() {
if ((jQuery("input[name='addon[domain]']")).is(':checked') && (jQuery('.custom_enter-the-domain-name').length > 0)) {
jQuery('.single-product .summary button.single_add_to_cart_button').removeClass('disableit');
} else if ((jQuery("input[name='addon[domain]']")).is(':checked') && (jQuery('.custom_enter-the-domain-name').val() == '')) {
jQuery('.single-product .summary button.single_add_to_cart_button').addClass('disableit');
}
});
Use 2 event handlers, input for the text field and change for the checkbox. The following code will accomplish the behavior you want.
var addToCart = jQuery('.single-product .summary button.single_add_to_cart_button')
var checkBox = jQuery("input[name='addon[domain]']")
var textField = jQuery('.custom_enter-the-domain-name')
function toggleButton() {
if(checkBox.is(':checked')) {
if (textField.val() === '') {
addToCart.addClass('disableit')
} else {
addToCart.removeClass('disableit')
}
} else {
addToCart.addClass('disableit')
}
}
toggleButton()
textField.on('input', toggleButton)
checkBox.on('change', toggleButton)
I am doing a popup window using Bootstrap modal that is triggered by the click of a checkbox in the main page. The popup window contains several textboxes for searching from the database based on user's input. Then after the input and the click of a search button, a table will display the data retrieved on the same popup window. Then, after the user chooses a row from the table, the chosen data will be displayed in their respective textboxes in the main page and the checkbox will be checked.
My plan is to uncheck the checkbox on a second click (thinking if the user suddenly decided to cancel their decision - checking the checkbox). I tried but it didn't uncheck the checkbox. Instead, the popup window comes out at every click of the checkbox and the checkbox won't uncheck anymore.
$('#inputNew').on('hidden.bs.modal', function (e) {
document.getElementById("inputNewCheckbox").checked = true;
document.getElementById("inputMother").style.display = 'block';
document.getElementById("inputMotherlabel").style.display = 'block';
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
$('#inputNew').on('click', '#SearchMother', function () {
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
$('#inputNewCheckbox').prop('checked', false);
}));
}
This is the checkbox input in the view page:
<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New
For the checkbox unchecking part, i also tried
if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
But when i run, the checkbox is checked by default and unchecking doesn't work. Plus the modal popup window appears.
I also tried
if (document.getElementById("inputNewCheckbox").checked = true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
Also same output as above code..can anyone help me out please? How can i fix this?
You're probably better off listening for a change event on the checkbox, and only showing your modal if the checkbox is checked:
$('#inputNewCheckbox').on('change', function(e){
var _this = $(this);
if(_this.is(':checked')){
/* show your modal */
}
});
See change - Event reference and the :checked pseudo-class on MDN.
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;
});
The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});
Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid