Javascript 无法在jquery中获取输入字段值

我使用

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 } ?>

在javascript中，我试图使用这段代码获取值，但它总是提醒输入的第一个值

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

$（文档）.ready（函数（）{
var typename=$（'#typename'）.val（）；
警报（类型名称）；
});

---

当值为“Generator”时，我必须禁用此输入字段。

您应该切勿对多个元素使用相同的id

更新调试代码，您将看到您有一个数组：

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

试试这个， 这将使用

表单控件

类为每个输入调用警报功能

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

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

---

使用类，而不是像这样重复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 } ?>

设置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 } ?>

尝试：


$（'[readonly].form-control'）。每个（函数（即，e）{
log（$（e）.val（））；
});
您的代码中有一个很大的错误，您不能对多个输入字段使用相同的id，当循环运行多个输入字段将使用相同的id创建时，您必须使id动态化，您可以通过在每次创建输入字段时向id附加一些唯一的值使id动态化—使用该id获取数据

如果您需要示例代码，请告诉我。
id属性为HTML元素指定了一个唯一的id。在一个页面上多次使用同一id不是一个好的做法，而不是在jquery中使用id属性循环class属性。

$（文档）.ready（函数（）{
$（'.common类'）。每个（函数（）{
警报（$（this.val（））；
});
});


纯js方法

用class替换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 } ?>

您使用您的id启动，这就是为什么它只启动第一个元素值

这是如何使用当前代码实现的

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

但是，强烈建议您必须为每个元素使用唯一的id，否则使用的类将执行您想要执行的操作。
元素id应该是唯一的。并在事件内部尝试，因为动态添加元素不会获取就绪状态


原因
是您必须给出要禁用哪个输入字段的类
您对每个输入使用相同的id，因此始终获得第一个值。在迭代时更改
输入
字段的id，以便您还希望得到什么？@IronyStack每个输入都有不同的值field@RonyLoud那么我如何在javascript中获得价值呢？对于不同的相同的结果。它只提醒第一个值使用var#u dump（$data）更新您的问题，$data是什么？实际上我必须根据“#typename”.val禁用一些字段，所以我无法再次单独获取，。。您应该“从不”使用相同的id，任何功能都可能不起作用，因此请使用类而不是id，并重做“禁用某些字段”，以及您在$data中遇到的问题（我几乎可以肯定），因此请共享它，以便其他人能够提供帮助；）数组（[0]=>数组（[asset\u id]=>abc-02[asset\u name]=>冷冻柜）[1]=>数组（[asset\u id]=>xyz-01[asset\u name]=>冰箱）[2]=>数组（[asset\u id]=>300001[asset\u name]=>生成器））
$(document).ready(function () {
        $( ".clsValue" ).each(function( index ) {
          var typename = $(this).val();
           alert(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>

<?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 } ?>

window.onload = alertTypeNames();

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

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

<?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 } ?>

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