我正在使用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'时,我必须禁用此输入字段
答案 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>
.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_
匹配。
答案 3 :(得分:0)
试试这个,
这将使用form-control
类
$(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应该是唯一的。并在事件中尝试它,因为动态添加元素不会抓住就绪状态。
答案 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
是您必须提供要禁用哪个输入字段的类