Current functionality: I have a button and inside the button there is a text input field. When user enters something in the text input field and click the button. Value from text field is applied to all other empty input field. (or in simple words I have several other text input fields as well where the value from the text field (which is inside the button) is copied).
Desired functionality: So instead of clicking the button and then copying the input field to all other text inputs. I am trying to achieve the same functionality using Keyup. So the moment user enters something inside the text field. It will be copied on all other input fields as well.
I tried replacing click event with Keyup but it didn't work. Here is my code
HTML
<input id="applyToAllSingles" type="text" onkeypress="validateInputs(event, 'decimal')">
JS
$("a.button.applySingles").on("click", function(e) {
e.preventDefault();
document.betSlip.applyToAllSinglesBetInput($(this).find("input").val());
});
BetSlip.prototype.applyToAllSinglesBetInput = function(value) {
$("#bets div[name=singleBet] .supermid input:text").val(value);
$("#applyToAllSingles").val(value);
}
I am sure that I am missing something since replacing the above function with the below mentioned code doesn't work
$("#applyToAllSingles").on("Keyup", function(e) {
e.preventDefault();
document.betSlip.applyToAllSinglesBetInput($(this).find("input").val());
});
First of all, you should use keyup instead of Keyup. If everything else is fine, your function should work.
Here is a working example
Related
I have a input type="text" and next to that a button which opens up a calendar on click. When a value is selected in calendar textbox ix populated.
I would like to handle on change of textbox to enable other controls.
change, input etc events are triggered only if use manually enters values in the text box. But in my case I am not touching the input textbox.
Thanks.
Use jquery change event.
$("input").change(function(){
//do something
})
Update:
As .change event doesn't get fired when you change value using any javascript method, there is a work around.
When you change the date, you can trigger an event to the input element like $("input").keyup() and listen using:
$("input").keyup(function(){
// input updated
})
codepen example: https://codepen.io/azharuddinkhan8898/pen/MNrLad
this is my demo:
https://jsfiddle.net/larico/7d3851uf/1/
When click to search icon, the search Field was opened, so then should be focus on input, for writing in the field without clicking in the search field.
I was trying with this code:
$('.search').click(function(){
$('#gosearch').focus();
});
but seems doesn't work.
how could I solve it,
Since you have a transition you would need to use transitionend:
$('.search').click(function(){
$(this).toggleClass('opened');
$('.big-search').toggleClass('displayed').one('transitionend', function(){
$('#gosearch').click().focus()
});
});
You can see it here
I have a form in which have one autocomplete text field and submit button. on Autocomplete text I have below code which uses change event which basically empty out the text field if value is not part of the list, and on button- onSubmit i check if field is null or not, if its null then it displays error saying it can not be null. All these work fine if I type in text and click somewhere else except submit button and then click on button. for eg. if I type xyzxyx (which is not part of select list) on textbox and I click on submit button then it accepts whatever value is typed and takes it to next screen. It seems like on OnSbumit event is firing first before onChange of Autocomplete field, how do i resolve this?
$(#testBox).autocomplete(
{
soruce: url,
change:function(event,ui){
if(ui.item=null)
{
$(#testBox).val('');
alert("entered item is not part of the list");
}
}
In your if you have to use a double "=":
if(ui.item==null)
Check Below Jquery Tutorial :
https://forum.jquery.com/topic/jquery-validation-on-jquery-autocomplete
To illustrate: http://sas98.user.srcf.net/guestlist/
I want a new input field to be created when the user types something in the guest list field at the bottom.
Is it possible to do this as opposed to having to press a button with onClick?
you can add a blur event that gets fired when a first input box looses focus. THere can be an additional check to make sure someone put some text to the first input field, if there is a value add a new input field
$('#guest_list_input').blur(function() {
if($(this).val().length>0) {
$('#myPlaceWhereIWantToAddANewInputField').append('<input value='test' name='test' />');
}
});
You might want to append a new input after focus, blur or change events.
My choice would be to create a field on focus (so the user can switch to it by pressing Tab) and optionally remove the empty fields on blur events. Possibly with some fancy fadeIn/Out effects.
in html and javascript, I can use keyup, focus, blur to detect most of the content changes in a text input, however if the user do a copy and paste into the text input, how do I capture this change? The issue here is that the input is already in focus when user paste into it.
You could capture the paste event (http://www.quirksmode.org/dom/events/cutcopypaste.html)
$("#myinput").bind("paste",function(){
//code here
})
$("#myinput").change(function(){
// whatever you need to be done on change of the input field
});
// Trigger change if the user type or paste the text in the field
$("#myinput").keyup(function(){
$(this).change();
});
// if you're using a virtual keyboard, you can do :
$(".key").live('click',function(){
$("#myinput").val($("#myinput").val()+$(this).val());
$("#myinput").change(); // Trigger change when the value changes
});
the textbox has an OnChange event that fires when a) the text box loses focus AND the value within the text box has changed.