I'm not able to copy an Input Field value to multiple fields using Javascript

Question

I have been working on this system for a while now, and I've run into a small problem.

What I want to do: Copy all the data entered in an input field with id 'totalentered' into all the input fields with id 'totalclasses'

What is happening instead: There are multiple fields with the id 'totalclasses', generated using a while loop in PHP. However, the data is only being copied to the first input field with id 'totalclasses', rest of them remaining unchanged.

I'm just not able to figure out what's wrong. Here's my HTML+PHP code

<input type="text" class="form-control" placeholder="Total Classes Taken" id="totalentered">
<!--PHP Code, deleted because it would make reading this post too tiresome-->
<tr>
<th scope="row"><?=$row['rollnumber']?></th>
<td><?=$row['name']?></td>
<td><?php echo $selectedmonth; ?></td>
<td><input data-parsley-type="digits" type="text" class="form-control" placeholder="Classes Attended" name="attended<?= $cnt; ?>" id="attended"></td>
<td><input data-parsley-type="digits" type="text" class="form-control" placeholder="Total Classes Taken" id="totalclasses" name="totalclasses<?= $cnt; ?>"></td>
<input type="hidden" name="student_id<?= $cnt; ?>" value="<?=$student_id?>">
<input type="hidden" name="testmarks<?= $cnt; ?>" value="0">
<input type="hidden" name="assignmentmarks<?= $cnt; ?>" value="0">
<input type="hidden" name="submitted" value="true">

Here's my JavaScript code which should be doing the job:

<script type="text/javascript">
        $(document).ready(function() {
            $('form').parsley();
        });
        $(function() {                                       // <== Doc Ready
            $("#totalentered").change(function() {           // When the total number of classes are changed
                $('#totalclasses').val(this.value);          // copy it over to the individual student for convenience
            });
        });
    </script>

Anyone who can help me out with what's wrong? Thanks in advance!

_There are multiple fields with the id 'totalclasses'_ - [The `id` attribute must be unique](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page), so you will need to change this. — Sean Bright, Aug 08 '18 at 16:21
Any idea what alterations I can make, to get the desired result? I need it to be replicated into all those fields which are being generated... — Vidul Talwar, Aug 08 '18 at 16:21
Also, I forgot to mention, it was working when I originally wrote this code for multiple fields with the same ID, for some unknown reason. — Vidul Talwar, Aug 08 '18 at 16:23
@AshishKumar the class is same even for fields which aren't supposed to have that data, for styling purposes - that's the reason I didn't use class — Vidul Talwar, Aug 08 '18 at 16:24
you can give any no of class for an element so build some logic to add unique classes for all record which has to be same — MyTwoCents, Aug 08 '18 at 16:26

No Name · Answer 1 · 2018-08-08T16:26:11.457

1

You should not have multiple elements with the same id. In your PHP code, change the totalclasses into a class attribute.

Then replace

$('#totalclasses').val(this.value);

with

$('.totalclasses').val(this.value);

From the jQuery docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

edited Aug 08 '18 at 16:26

answered Aug 08 '18 at 16:22

No Name

612
6
15

Class is same even for fields which aren't supposed to have that data, for styling purposes - that's the reason I didn't use class... – Vidul Talwar Aug 08 '18 at 16:25

score 0 · Accepted Answer · answered Aug 08 '18 at 16:35

I also agree that you should not use more than one id with the same name in your HTML. The great thing about jquery though is that you can use a number of ways to lookup an element. For instance:

<input myInput="great">Some text</a>
<script>
$( "input[myInput|='great']" ).val(this.value); //Search for an attribute name value pair
$( "input[myInput]" ).val(this.value); //Just search for an attribute name
$( "input[myInput*='eat']" ).val(this.value ); //star based search
</script>

You can see a full list of all available css selectors here:

https://api.jquery.com/category/selectors/

Thanks - this was perfect. – Vidul Talwar Aug 08 '18 at 16:59 — Vidul Talwar, Aug 08 '18 at 16:59

score 0 · Answer 3 · edited Aug 08 '18 at 17:48

Write id in input field as id="totalclasses"

<script type="text/javascript">
    $(document).ready(function() {
        $('form').parsley();
    });
    $(function() {                                       
        $("#totalentered").change(function() { 
            var cnt = "<?php echo $cnt ?>";
            $('#totalclasses' + cnt).val(this.value);         
        });
    });
</script>

I'm not able to copy an Input Field value to multiple fields using Javascript

3 Answers3