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

【问题标题】：could not get input field value in jquery无法在 jquery 中获取输入字段值
【发布时间】：2019-01-07 15:19:33
【问题描述】：

我正在像这样使用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>

当值为“生成器”时，我必须禁用此输入字段

【问题讨论】：

您对每个输入使用相同的 id，因此您始终获得第一个值。
迭代时更改input字段的id
你还期待什么？
@IronyStack 每个输入字段的值不同
@RonyLoud 那么我将如何在 javascript 中获得价值？对于不同的 id，s？

标签： javascript jquery html

【解决方案1】：

试试：

$('[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>

.val() 调用一次将始终只产生一个值； .val() docs：

获取匹配元素集中第一个元素的当前值。
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 } ?>

它将为每个输入生成不同的id 属性，typename_0、typename_1、...、typename_n，例如：

$('[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 attribute selector，匹配所有具有id 属性以typename_ 开头的元素。

【讨论】：

【解决方案2】：

您应该永远不要对多个元素使用相同的 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();

【讨论】：

同样的结果。它只提醒第一个值
用 var_dump($data) 更新你的问题，$data 是什么？
实际上我必须在 '#typename'.val 的基础上禁用某些字段，所以我无法单独获得它
再一次，.. 你应该“从不”使用相同的 id，任何功能都可能不起作用，所以使用 class 而不是 id，然后重做“禁用某些字段”，问题（我'我几乎可以肯定）你在 $data 中，所以请分享它，以便其他人能够提供帮助；）
数组（[0] => 数组（[asset_id] => abc-02 [asset_name] => 冷冻机）[1] => 数组（[asset_id] => xyz-01 [asset_name] => 冰箱）[2] => 数组（[asset_id] => 300001 [asset_name] => 发电机））

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个，这将为 form-control 类的每个输入调用警报函数

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

你的代码有一个很大的错误，你不能对多个输入字段使用相同的id，当循环运行多个输入字段会创建相同的id，你必须使id动态，你可以使id每次创建输入字段时，通过向 id 附加一些唯一值来动态地使用该 id 来获取数据。

如果您需要示例代码，请告诉我。

【讨论】：

【解决方案7】：

纯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;
    });
}

【讨论】：

【解决方案8】：

你是用你的 id 触发的，所以它只触发了第一个元素值。

这就是你可以用你当前的代码做到这一点的方法

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

但是，强烈建议您必须为每个元素使用唯一 id，否则使用类来执行您想要的操作。

【讨论】：

【解决方案9】：

id 属性为 HTML 元素指定一个唯一的 id，在页面上多次使用相同的 ID 不是一个好习惯，而不是 ID 属性循环 jquery 中的类属性。

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

【讨论】：

【解决方案10】：

元素 id 应该是唯一的。并在事件中尝试它，因为动态添加元素不会获取就绪状态。

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

【讨论】：

【解决方案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 是您必须提供要禁用的输入字段的类

【讨论】：