無法在jQuery中獲取輸入字段值

Question

我正在使用這樣的foreach循環創建輸入字段

<?php foreach($data as $key=>$val) { ?>
<td class="table-td-1">  
<input readonly class="form-control" name="model[]" id="typename" type="text" value="<?php echo $val['asset']; ?>">
</td>
<?php } ?>

$ data是數組

(
    [0] => Array
        (
            [asset_id] => abc-02
            [asset_name] => Freezer
        )

    [1] => Array
        (
            [asset_id] => xyz-01
            [asset_name] => Refrigerator
        )

    [2] => Array
        (
            [asset_id] => 300001
            [asset_name] => Generator
        )
)

並且在javascript中，我嘗試使用此代碼獲取值，但它始終會警告輸入的第一個值。

<script type="text/javascript">
 $(document).ready(function () {
           var typename = $('#typename').val();
           alert(typename);     
});
</script>

當值是“ Generator”時，我必須禁用此輸入字段

Answer 1

您永遠不要對多個元素使用相同的ID。

更新代碼以進行調試，您將看到有一個數組：

<script type="text/javascript">
 $(document).ready(function () {
           var typename = $('[name="model[]"]')
              .toArray().map(e => e.value);
           alert(JSON.stringify(typename));
});
</script>

您應該更新您的php，為周期中繪制的每個元素設置不同的ID，即：

<?php $i=1;foreach($nomatter as $a) {?>
<input id="typename_<?=$i++?>">
<?php } ?>

因此，您將能夠分別處理eash輸入：

       var typename = $('#typename_1').val();

Answer 2

使用類而不是重復的id這樣。

<?php foreach($data as $key=>$val) { ?>
<td class="table-td-1">  
<input readonly class="form-control clsValue" name="model[]" id="typename" type="text" value="<?php echo $val['asset']; ?>">
</td>
<?php } ?>

並在jquery循環中使用this瞬間獲取類的值。

$(document).ready(function () {
        $( ".clsValue" ).each(function( index ) {
          var typename = $(this).val();
           alert(typename);     
    });
});

Answer 3

嘗試：

 $('[readonly].form-control').each(function(i,e) { console.log($(e).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td class="table-td-1"> <input readonly class="form-control" name="model[]" id="typename" type="text" value="1"> <input readonly class="form-control" name="model[]" id="typename" type="text" value="2"> <input readonly class="form-control" name="model[]" id="typename" type="text" value="3"> <input readonly class="form-control" name="model[]" id="typename" type="text" value="4"> <input readonly class="form-control" name="model[]" id="typename" type="text" value="5"> </td> 

1. 一次調用.val()只會產生一個值； .val()文件 ：

   獲取匹配的元素集中第一個元素的當前值。

2. HTML id屬性應該是唯一的，請嘗試使用此屬性。

---

<?php 
   $count = 0;
   foreach($data as $key=>$val) { 
?>
    <td class="table-td-1">  
        <input readonly class="form-control" name="model[]" id="typename_<?php echo $count++; ?>" type="text" value="<?php echo $val['asset']; ?>">
    </td>

<?php } ?>

對於每個輸入，它將為typename_0 ， typename_1 ，...， typename_n生成不同的id屬性，例如，您可以：

 $('[id^="typename_"]').each(function(i,e) { console.log($(e).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td class="table-td-1"> <input readonly class="form-control" name="model[]" id="typename_0" type="text" value="1"> <input readonly class="form-control" name="model[]" id="typename_1" type="text" value="2"> <input readonly class="form-control" name="model[]" id="typename_2" type="text" value="3"> <input readonly class="form-control" name="model[]" id="typename_3" type="text" value="4"> <input readonly class="form-control" name="model[]" id="typename_4" type="text" value="5"> </td> 

其中[id^="typename_"]是CSS屬性選擇器 ，將所有元素與以typename_開頭的id屬性匹配。

Answer 4

試試這個，這將為每個帶有form-control類的輸入調用警報功能

 $(document).ready(function () {
          $(".form-control").each(function(){

           alert($(this).val());
     })  
});

Answer 5

設置class =“ typename”而不是id =“ typename” ：

   <?php foreach($data as $key=>$val) { ?>
    <td class="table-td-1">  
    <input readonly class="form-control" name="model[]" class="typename" type="text" value="<?php echo $val['asset']; ?>">
    </td>
    <?php } ?>

您可以獲取如下值：

<script type="text/javascript">
 $(document).ready(function () {
           var typename1 = $('.typename')[0].val();
           var typename2 = $('.typename')[1].val();
           alert(typename1);     
});
</script>

Answer 6

您的代碼中有一個大錯誤，您不能對多個輸入字段使用相同的ID，當循環運行多個輸入字段時，將使用相同的ID創建ID，您必須使ID動態，然后可以通過附加ID來使ID動態每次您創建輸入字段時，ID都會使用一些唯一的值來使用ID來獲取數據。

如果您需要示例代碼，請告訴我。

Answer 7

id屬性為HTML元素指定一個唯一的id，在一個頁面上多次使用相同的ID並不是一個好習慣，而不是ID屬性循環jquery中的class屬性。

  <script type="text/javascript"> $(document).ready(function () { $('.common-class').each(function() { alert($(this).val()); }); }); </script> 

  <?php $incr_var = 1; ?> <?php foreach($data as $key=>$val) { ?> <td class="table-td-1"> <input readonly class="form-control common-class" name="model[]" id="typename<?php echo $incr_var ?>" type="text" value="<?php echo $val['asset']; ?>"> </td> <?php } ?> 

Answer 8

純js方法;

用類替換id;

<?php foreach($data as $key=>$val) { ?>
<td class="table-td-1">  
<input readonly class="form-control typename" name="model[]" type="text" value="<?php echo $val['asset']; ?>">
</td>
<?php } ?>

JS

window.onload = alertTypeNames();

function alertTypeNames() {
    document.getElementsByClassName('typename').map((inputTag) => {     
        alert(inputTag.value);
         return true;
    });
}

Answer 9

您使用自己的ID觸發了，這就是為什么僅觸發第一個元素值的原因。

這就是您可以使用當前代碼執行的操作

$(document).ready(function () {
   $('input[name="model[]"]').each(function(){
       alert($(this).val());
    });
});

但是，強烈建議您必須為每個元素使用唯一的ID，否則要使用類來完成您想要的操作。

Answer 10

元素ID應該是唯一的。 並在事件內嘗試它，因為動態添加元素將無法獲取就緒狀態。

http://api.jquery.com/live/

Answer 11

<?php foreach($data as $key=>$val) { ?>
<td class="table-td-1 status">  
<input readonly class="form-control" name="model[]" id="typename" type="text" value="<?php echo $val['asset']; ?>">
</td>
<?php } ?>

而在jQuery中

$(document).on('change','.status',function(){
        var $status = $(this).val();
        if($status == 'not_working'){
            $(this).closest('tr').find('.reason').removeAttr('disabled');
        }
    });

reason是類，您必須提供要禁用的輸入字段