Inaccurate retrieval of values from an input fields using javascript referenced by inputs class names

问题

I have created an input fields populated by ids that I will use later to make a query in my database via javascript. Using foreach loop, the fields were populated correctly by their respective ids. Using javascript I want to be able to access this ids, however, using the onclick function that is based on their class name, the values for the first and second input fields are the only fields that returns the correct id value and the rest input field values were taken from the second input field having the id value of 2 instead of returning the right id value. What is the wrong with this? How could I retrieve right id values from this input fields? Thanks a lot. Here is my code

View:

<?php

     foreach($data_currencies as $row){

    ?>
     <div class="row-fluid">

            <div class="span2"><input type='checkbox' class="currency_check_box" id='chk' name='currency_id[]'  value="<?php echo $row->id; ?>" /></div>
            <div class="span4" style="text-color:black;"><?php  echo anchor("currencies/edit_currency/$row->id/$tennant_id",$row->pretty_name);?></div>
            <div class="span4" style="text-color:black;"><?php  echo $row->currency_code;?></div>
            <div class="btn-group span1" id="condition" data-toggle="buttons-radio" >
            <?php if($row->status==1) { ?>
            <input type="text" value="<?php echo $row->id; ?>" class="btn active first" id="enable"/>
            <input type="text" value="<?php echo $row->id; ?>" class="btn passive" id="disable"/>
            <?php }
             else{ ?>
            <input type="text" value="<?php echo $row->id; ?>" class="btn off" id="enable"/>
            <input type="text" value="<?php echo $row->id; ?>" class="btn active on" id="disable"/>
            <?php } ?>
            </div>
     </div>
    </address>
    <address>
     <?php
     }
     ?>

Javascript

<script type="text/javascript">


$(".first").click(function(){
   alert($(".first").val());
});

$(".passive ").click(function(){
   alert($(".passive").val());
});

$(".off").click(function(){
   alert($(".off").val());
});

$(".on ").click(function(){
   alert($(".on").val());
});

</script>

Output:

Clicking the input field with id value 1

enter image description here

Clicking the input field with id value 2

enter image description here

Clicking the remaining input fields gives the same outputs

enter image description here

回答1:

The problem is that you need to use the this keyword in your js. Otherwise you will just be getting the element with the first occurence of that class. Also considering all of your input fields have the 'btn' class why don't you change your js to

$(".btn").click(function(){
   //Use 'this' to get the value of the element you clicked on
   alert($(this).val());
});

Note You are looping through your rows in your PHP code but each time giving the elements the same id (id="enable" and id="disabled"). This will cause multiple elements to have the same id, which will invalidate your HTML and could cause you problems later on.

回答2:

Try this

$(".first").click(function(){
   alert($(this).val());
});

$(".passive ").click(function(){
   alert($(this).val());
});

$(".off").click(function(){
   alert($(this).val());
});

$(".on ").click(function(){
   alert($(this).val());
});

来源：https://stackoverflow.com/questions/18338073/inaccurate-retrieval-of-values-from-an-input-fields-using-javascript-referenced

标签

javascript

jquery

html

codeigniter