Develop Reference

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.

Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>

$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});

Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

I want to pass same value on multiple input boxes

I want to pass same value on multiple input boxes. At the moment below script only display in one box but want show main box result in all multiple input boxes
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#main').change(function() {
$('#catt1').val($(this).val());
});
});//]]>
Main input box
<input type="text" name="name" id="main" />
Multiple inputs
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
For example for one - http://jsfiddle.net/SDHNY/

http://jsfiddle.net/SDHNY/319/
$('#name').change(function() {
$('input').val($(this).val());
});
id should only be used once per page.
If you want to give multiple items an identifier use class
class="catt1"
from this your code would then change to
$('#name').change(function() {
$('.catt1').val($(this).val());
});
where the '.' before catt1 signifies to jquery that you are looking for classes not id's

DEMO : http://jsfiddle.net/SDHNY/321/
You should not use same id for multiple input. Use class for this types of purposes.You should have different name for each input field if you not get value in the jquery by its id and submit it.
TRY THIS:
Main: <input type="text" name="name_main" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name1" class="catt1" />
<input type="text" name="name2" class="catt1" />
<input type="text" name="name3" class="catt1" />
<input type="text" name="name4" class="catt1" />
JQUERY:
$('#main').change(function() {
$('.catt1').val($(this).val());
});

Already a few answers are there, here I am trying to provide a solution using pure javascript without any additional plugins like jQuery,etc..
document.getElementById("main").addEventListener("input",function(){
document.querySelectorAll(".catt1").forEach((e) => e.value = this.value);
});
<input type="text" name="name" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />

Use jQuery selector as method

I have page with many inputs inside a set of different divs.
A subset of those inputs are created dinamically and they can be also deleted.
By creating and deleting elements i could have a list of inputs named as shown:
<div id="first">
<input type="text" name="elem[0][elem_option][0][price]" value="">
<input type="text" name="elem[0][elem_option][1][price]" value="">
<input type="text" name="elem[0][elem_option][5][price]" value="">
<input type="text" name="elem[0][elem_option][21][price]" value="">
<input type="text" name="elem[3][elem_option][0][price]" value="">
<input type="text" name="elem[3][elem_option][1][price]" value="">
<input type="text" name="elem[3][elem_option][3][price]" value="">
<input type="text" name="elem[3][elem_option][8][price]" value="">
</div><!-- first -->
<div id="second">
<input type="text" name="elem[1][elem_option][1][price]" value="">
<input type="text" name="elem[1][elem_option][2][price]" value="">
<input type="text" name="elem[1][elem_option][7][price]" value="">
<input type="text" name="elem[1][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][5][price]" value="">
<input type="text" name="elem[5][elem_option][6][price]" value="">
<input type="text" name="elem[5][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][9][price]" value="">
</div><!-- second-->
....
I need to select all elements with a name that ends with [price] and save in a different variable of each div.
I tried a jQuery selector used as method of getelementbyid:
first_price_inputs = document.getElementById('first').jQuery('input[name$="[price]"]')
second_price_inputs = document.getElementById('second').jQuery('input[name$="[price]"]')
But i get this error:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'jQuery'
please help!

Try this:
first_price_inputs = jQuery('#first input[name$="[price]"]');
second_price_inputs = jQuery('#second input[name$="[price]"]');
Look here: http://jsfiddle.net/qRDkq/

try
first_price_inputs = jQuery('#first > input[name$="[price]"]')
#Cherniv: its not an input of ID #first, but a child of the element with ID #firstof type input. So the descendant selector should be used afaik?

How to I only show the divs if that div has an input that isn't blank?

I have a bunch of divs that are all hidden like this
<div class="elements">
<input value="something" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="something" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input value="something_again" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
CSS
.elements{display:none;}
I want to show only the element divs that have an input of that is not an empty string....so in the above example i would show the first, second and fourth divs because at least one input has a value...
$('.elements').find('input').each(function)...
that is what i have so far but not sure how to search if there is at least one input that isn't blank

Try this
$('.elements input:text[value!=""]').parents(".elements").show();

$('.elements').each(function() {
var count = $(this).find('input[value!=""]').length;
count > 0 ? $(this).show() : $(this).hide();
});

Dynamically change form elements with javascript

I'm trying to change the city and state based on the zip code a user enters. This should all be done on the same page with jquery. I found some code elsewhere on this site but couldn't get it to work. Here is the code snippet:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_700.font.js"></script>
<script type="text/javascript">
$("#zip").bind("change", function(e){
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
function(data){
$.each(data, function(i,item){
if (item.field == "city") {
$("#city").val(item.value);
} else if (item.field == "state") {
$("#state").val(item.value);
}
});
});
});
</script>
and this is my html:
<label>zip</label>
<input type="text" name="zip" maxlength="5" id="zip" class="textbox1" />
<label>first name</label>
<input type="text" name="fname" class="textbox1" />
<label>last name</label>
<input type="text" name="lname" class="textbox1" />
<label>address</label>
<input type="text" name="address" class="textbox1" />
<label>address 2</label>
<input type="text" name="address2" class="textbox1" />
<label>city</label>
<input type="text" name="city" id="city" class="textbox1" />
<label>state</label>
<input type="text" name="state" id="state" class="textbox1" maxlength="2" />
The php file outputs the json just fine.

You are trying to access the inputs by ID and your inputs don't have ID's. Either change your selector or give you inputs ID's.

The subdomain is inaccurate (as I said in my email). change
...
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
...
to
...
$.getJSON("http://www.mydomain.com/code.php?zip=" + $("#zip").val(),
...