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

时间:2017-11-15 06:42:08

标签: javascript jquery html

我正在使用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 is Array

(
    [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'时,我必须禁用此输入字段

11 个答案:

答案 0 :(得分: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();

答案 1 :(得分:1)

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

答案 2 :(得分: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>

  1. .val()一次调用只会产生一个值; .val() docs

      

    获取匹配元素集中第一个元素的当前值。

  2. HTML id属性应该是唯一的,请尝试这样做。

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

    它会为每个输入idtypename_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_匹配。

答案 3 :(得分:0)

试试这个, 这将使用form-control

为每个输入调用alert函数
 $(document).ready(function () {
          $(".form-control").each(function(){

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

你的代码中存在一个很大的错误,你不能对多个输入字段使用相同的id,当循环运行多个输入字段将使用相同的id创建时,你必须使id动态化,你可以制作通过在每次创建输入字段时向id添加一些唯一值来使用id获取数据。

如果您需要示例代码,请与我们联系。

答案 6 :(得分:0)

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

答案 7 :(得分:0)

纯粹的js方法;

用class替换id;

#include <boost/asio.hpp>

constexpr auto noop = [](auto&& ...){};

int main()
{
  using boost::asio::ip::tcp;
  boost::asio::io_service io_service;

  // Create all I/O objects.
  tcp::acceptor acceptor{io_service, {{}, 0}};
  tcp::socket socket1{io_service};
  tcp::socket socket2{io_service};

  // Connect sockets.
  acceptor.async_accept(socket1, noop);
  socket2.async_connect(acceptor.local_endpoint(), noop);
  io_service.run();
  io_service.reset();

  // Verify socket2 has no data.
  assert(0 == socket2.available());

  // Initiate an asynchronous write.  However, do not run
  // the `io_service`.
  std::string data{"example"};
  async_write(socket1, boost::asio::buffer(data), noop);

  // Verify socket2 has data.
  assert(0 < socket2.available());
}

JS

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

答案 8 :(得分:0)

你用你的id解雇了这就是为什么它只触发了第一个元素值。

这是您使用当前代码

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

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

答案 9 :(得分:0)

元素ID应该是唯一的。并在事件中尝试它,因为动态添加元素不会抓住就绪状态。

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

答案 10 :(得分:0)

<?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是您必须提供要禁用哪个输入字段的类