我有一个包含多行的表单,其中包含“产品”和“数量”输入字段对。当产品字段在同一行中不为空时,我希望数量字段为必填项。我使用了如下所示的Jquery函数。但是它不能正常工作。希望有人能帮助我。
$('.productSelect').change(function () {
var elementID = $(this).attr("id");
var numberPart = elementID.split("t", 2);
if ($(this).val() != null ) {
$('#quantity'+ numberPart).prop('required',true);
}
});
<form role="form" action="#" method="post" role="form" id="orderform">
<tr>
<td><select class="form-control select2 productSelect" name="product1" style="width: 100%" id="product1">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>
</tr>
<tr>
<td><select class="form-control select2 productSelect" name="product2" style="width: 100%" id="product2">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>
</tr>
<tr>
<td><select class="form-control select2 productSelect" name="product3" style="width: 100%" id="product3">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>
</tr>
<div class="col-md-6">
<div class="box-header">
<input class="btn btn-primary" name="sub" type="submit" value="Submit"/>
</div>
</div>
答案 0 :(得分:1)
Split产生一个数组,其中包含splitting参数前后的值。
这意味着numberpart是一个数组,如果您将其记录如下:
(2) ["produc", "1"]
因此,您要查找的值是“ numberPart [1]”
$('.productSelect').change(function () {
var elementID = $(this).attr("id");
var numberPart = elementID.split("t", 2);
if ($(this).val() != null ) {
$('#quantity'+ numberPart[1]).prop('required',true);
}
});
答案 1 :(得分:1)
您正在拆分ID,但在选择器上未包含ID。
正确的方法是
$('#quantity' + numberPart[1]).prop('required', true);
$('.productSelect').change(function() {
var elementID = $(this).attr("id");
var numberPart = elementID.split("t", 2);
if ($(this).val() != null) {
$('#quantity' + numberPart[1]).prop('required', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form role="form" action="<?php echo base_url(); ?>index.php/order/addOrder" method="post" role="form" id="orderform">
<tr>
<td>
<select class="form-control select2 productSelect" name="product1" style="width: 100%" id="product1">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>
</tr>
<tr>
<td>
<select class="form-control select2 productSelect" name="product2" style="width: 100%" id="product2">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>
</tr>
<tr>
<td>
<select class="form-control select2 productSelect" name="product3" style="width: 100%" id="product3">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>
</tr>
<div class="col-md-6">
<div class="box-header">
<input class="btn btn-primary" name="sub" type="submit" value="Submit" />
</div>
</div>