无法在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是类，您必须提供要禁用的输入字段