CODEWITHSUNDEEP
javascriptjquerydom
Jordy
Jordy

Reputation: 1049

Change all values of input types with same id

What I at the moment got is a problem where I wanna change each elements value where the id matches from the input type. Please look at my jsFiddle, this should clear up alot for you. The thing is that the values won't change of all the input types it only changes the first input type of that id. Tried using the .each function as well but didn't help.

HTML

<input type="text" id="first" value="tesdafsdf" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />

Jquery

$('#first').keyup(function() {
    updateSearch();
});

var updateSearch = function() {
    $('#second').each(function(index, value) {
        this.value = $('#first').val();
    });
};

//Change the values for testing purpose
updateSearch();

http://jsfiddle.net/ZLr9N/377/

Upvotes: 0

Views: 2925

Answers (3)

Dhana
Dhana

Reputation: 1658

Use below code to set values of fields using ID attribute

$(document).ready(function() {
$("[id='second']").each(function(){
      $(this).val('test');
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="text" id="first" value="tesdafsdf" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

ID is used to uniquely identify an element so ID of an element must be unique.

It must be unique in a document, and is often used to retrieve the element using getElementById. Other common usages of id include using the element's ID as a selector when styling the document with CSS.

When you have to group multiple element one of the easiest way is to use class attribute.

When you use an id selector, it will return only the first element matching the ID rest of the elements will be ignored.

So

$('.first').keyup(function() {
  updateSearch();
});

var updateSearch = function() {
  $('.second').val($('.first').val());
};

//Change the values for testing purpose
updateSearch();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" value="tesdafsdf" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />

Upvotes: 8

Joey Ciechanowicz
Joey Ciechanowicz

Reputation: 3663

Unfortunatly HTML element id's need to be different, they are meant to be unique identifiers. Classes however can be applied to multiple elements like so:

HTML

<input type="text" id="first" value="tesdafsdf" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />

Javascript

$('#first').keyup(function() {
    updateSearch();
});

var updateSearch = function() {
    $('.second').each(function(index, value) {
        this.value = $('#first').val();
    });
};

//Change the values for testing purpose
updateSearch();

Upvotes: 3

Related Questions