I have three input fields as below:
<input type="text" name="address" id="address"/>
<input type="text" name="city" id="city"/>
<input type="text" name="country" id="country"/>
How can i add onChange event to all of these fields at once something like this:
$("select the elements with id address,city,country").bind("change", function() {
//do something
});
use , in id selector as #Rory said
OR
add a class to all this and call change function
<input type="text" name="address" id="address" class="className"/>
<input type="text" name="city" id="city" class="className"/>
<input type="text" name="country" id="country" class="className"/>
$('.className').bind("change", function(){
//your stuff
});
HOWEVER
since it is an input field.. i recommend you to use..keyup(), using change you have to click out of the text box to make it fire.
$('.className').keyup(function(){
//your stuff
});
You can use , as you would in CSS to combine selectors. Try this:
$("#address, #city, #country").bind("change", function() {
//do something
});
Alternatively you can add a class to each element and select that.
Related
I have a form that contains 10 input fields (not all are included below). I am trying to fire event with the jQuery focusout function. For instance, the form name is: form_test
<form id="form_test">
<input name="customer_id" id="customer_id" hidden>
<input name= "customer_name" id= "customer_name" type="text" class="form-control" placeholder="Company Name">
</form>
What I would like to happen is no matter which input box they click away from, after they do, the focusout event would happen.
The focusout event will fire every time an input is focused and then the focus is removed. The snippet below represents how you can bind to that event.
$(function() {
// Using the id
$("#form_test input").on('focusout', function() {
console.log("focusout event triggered using the id!");
});
// Using the name
$("form[name='form_test'] input").on('focusout', function() {
console.log("focusout event triggered using the name!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form_test" id="form_test">
<input name="customer_id" id="customer_id" hidden>
<input name="customer_name" id="customer_name" type="text" class="form-control" placeholder="Company Name">
</form>
Target our specific form by ID and use the :input selector:
$('#form_test').on('focusout', ':input', function() {
console.log('OUT!')
});
<form id="form_test">
<input name="customer_id" id="customer_id" hidden>
<input name= "customer_name" id= "customer_name" type="text" class="form-control" placeholder="Company Name">
<textarea name="msg">Works for textarea too</textarea>
<select name="sel"><option>and here too</option></select>
</form>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
https://api.jquery.com/input-selector/
Selects all input, textarea, select and button elements.
The :input selector basically selects all form controls.
This is my js
$(function() {
var tryme = 5;
var options = {
source: "<?=base_url()?>/autocomplete/",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
this.value = ui.item.valuedesc;
//$(this).siblings('.item_sku').val(ui.item.valuedesc); // not working
//$(this).siblings('.description').val(ui.item.description); // not working
//$(this).siblings('.rate').val(ui.item.rate); // not working
}
};
$( ".item_sku" ).autocomplete(options);
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#invoice_table tr:last').clone();
cloned.appendTo('#invoice_table').find('input').val('');
cloned.find('.item_sku').autocomplete(options);
});
});
I am using jquery to clone a line of fields in order to build my invoice items.
What is NOT working now is the specific line of fields are not updating.
These are my fields:
<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control item_sku" autocomplete="off" required/>
<input type="text" maxlength="255" name="item_description[]" id="description" data-required="1" class="form-control calculate description" required/>
<input type="text" maxlength="255" name="item_amount[]" data-required="1" class="form-control calculate rate" autocomplete="off" required/>
So when I start typing int he ITEM_SKU field, I get my autocomplete options - which is working fine. And when I click on it, it must update the description and item_amount textfields.
Now if I change the field class to an ID, and the javascript to example
<input type="text" maxlength="255" name="item_amount[]" id="rate" data-required="1" class="form-control calculate" autocomplete="off" required/>
It works.
But because I have an "add more fields" button - I have to have multiple fields with the same ID.
How can I get the current line's fields updated with ui.item.description and ui.item.rate?
http://i.share.pho.to/7945c43f_o.jpeg
I would use a hidden div as a library for your cloned elements...
Also, remove the ID after the obj is cloned.
something like (untested)
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#hidden').find('#tr').clone().removeAttr('id');
cloned.appendTo('#invoice_table');
cloned.find('.item_sku').autocomplete(options);
});
Edit: Simplify jsfiddle example (tested) http://jsfiddle.net/c5ajonav/3/
1.The input element's id attribute and the corresponding label element should have a for attribute. The values of these two attributes must be equal. For this, needs to add a label tag for each input tag for the DOM using JQuery.
Example:
First Name :<input type="text" name="first_name" id="firstName" value="" maxlength="100" />
needs to add
<label for="firstName">First Name : <label>
<input type="text" name="first_name" id="firstName" value="" maxlength="100" />
2.
Or this will also be fine
<label> First Name : <input type="text" name="first_name" id="firstName" value="" maxlength="100" /></label>
Thank you so much in advance :) :)
You can use the wrap() like
jQuery(function ($) {
$('input').wrap(function () {
return $('<label />', {
for: this.id
}).append(this.previousSibling)
})
})
Demo: Fiddle
Or use .before() like
jQuery(function ($) {
$('input').before(function () {
return $('<label />', {
for: this.id
}).append(this.previousSibling)
})
})
Demo: Fiddle
I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();
I have a webpage with jquery generating dynamic html input boxes.
Something like this appears on the page.
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?
First of all id should be unique in the whole document so your code is not correct.
What you probably mean is
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
To enable autocomplete on those boxes just use the selector that will match them all
var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);
You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:
var $input = '<input name=somename[] type="text"/>';
$('#mywrap').append($input);
$input.data('id', 'some id');
Then on you can access autocompleter in the following way:
$('#mywrap input').live('click', function() {
var id = $(this).data('id');
// and now do anything with the new id you have!
});