通过检查每个动态创建的文本框是否为空来防止表单提交
这里我试图在提交之前检查每一个dynamically创建的textboxes是否是。emptyform
这是HTML代码，
<form>
<table class="table table-hover table-white">
<thead>
<tr>
<th class="col-sm-1">Test ID</th>
<th class="col-md-6">Test Name</th>
<th style="width:100px;">Amount</th>
<th> Action</th>
</tr>
</thead>
<tbody id="rows">
<tr>
<td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td>
<td> <input type="text" style="width:300px" class="form-control test_name" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td>
<td> <input type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td>
<td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td>
</tr>
</tbody>
</table>
<span id="test_id_info" class="info text-danger"></span>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Other Information</label>
<textarea class="form-control" id="description"></textarea>
</div>
</div>
</div>
<div class="text-center m-t-20">
<input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay">
</div>
</form>
我想检查一下test_id textbox是empty. 在动态生成之前textboxes，已经有一行textboxesinclude test_id textbox。我的问题是，在生成之前，它通过使用检查textboxas或不检查，但在生成之后它不会检查。我不知道我哪里错了。emptyfunction
请帮助我，我将不胜感激。
慕田峪91588502回答
-
ABOUTYOU
不使用 elementID，而是使用类名来获取元素集合并迭代它们。我们这里遇到的问题是所有输入都具有相同的 id，因此 jquery 将返回它找到的第一个元素并忽略其余元素，因为使用 ID 我们假设它在整个 DOM 中是唯一的function checkname(el){}$(document).ready(function(){var count=0;$(document).on('click','#add',function() {debugger;count++; var html= '';html += '<tr id="trrows">';html += '<td id="testid"> <input id="test_id" class="form-control test_id" type="text" style="width:200px" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);" onblur="sum(this);" onkeyup="sum(this);" onchange="sum(this);"> </td>';html += '<td id="testname"> <input id="test_name" type="text" style="width:300px" class="form-control test_name" readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';html += '<td id="amounts"> <input id="amount" name="amount" type="text" style="min-width:150px" class="form-control amount" readonly="" > </td>';html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o"></i></a></center> </td>';html += '</tr>';$('#rows').append(html); });$(document).on('click','.remove',function() {$(this).closest("#trrows").remove();});});// generate bill $(document).on('click', '#pay', function () {var test_id = new Array();$('input[id="test_id"]').each(function() {test_id.push(this.value);});var amount = new Array();$('input[name="amount"]').each(function() { amount.push(this.value);});var p_id = $('#p_id').val();var pres_id = $('#pres_id').val();var description=$('#description').val();var valid;valid = validateContact();if (valid) {alert('invoice generated') };// check validationsfunction validateContact() {debugger; var valid = true; $(".demoInputBox").css('background-color', ''); $(".info").html('');//list of test_id inputsvar testIdList = document.getElementsByClassName('test_id')for(let i= 0 ; i<testIdList.length; i++){ if (!testIdList.item(i).value) { $("#test_id_info").html("(Required)"); $("#test_id").css('background-color', '#FFFFDF'); valid = false; } } return valid;}});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form><table class="table table-hover table-white"> <thead> <tr> <th class="col-sm-1">Test ID</th> <th class="col-md-6">Test Name</th> <th style="width:100px;">Amount</th> <th> Action</th> </tr> </thead> <tbody id="rows"> <tr> <td> <input class="form-control test_id" type="text" style="width:200px" id="test_id" onblur="checkname(this);" onkeyup="checkname(this);" onchange="checkname(this);"> </td> <td> <input type="text" style="width:300px" class="form-control test_name" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"></td> <td> <input type="text" style="min-width:100px" class="form-control amount" name="amount" readonly=""> </td> <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td> </tr> </tbody></table> <span id="test_id_info" class="info text-danger"></span><div class="row"> <div class="col-md-12"> <div class="form-group"> <label>Other Information</label> <textarea class="form-control" id="description"></textarea> </div> </div></div> <div class="text-center m-t-20"> <input type="button" class="btn btn-primary submit-btn" name="pay"value="Generate Invoice" id="pay"></div></form> -
长风秋雁
使用类、名称或其他属性代替 id，因为您有多个具有相同 id 的元素 - 它总是会产生问题。如果您需要在提交之前检查“text_id”类的输入，请尝试更改验证功能function validateContact() { var valid = true; $(".demoInputBox").css('background-color', ''); $(".info").html(''); $('.text_id').map(function(i, el){ if(!$(el).val() || $(el).val().trim() == '') { valid = false; $("#test_id_info").html("(Required)"); $(el).css('background-color', '#FFFFDF'); } }); return valid;}
随时随地看视频慕课网APP
PHP