在阅读此问题之前,请检查this-click here工作演示。 如果用户向我的父文本框提供任何值(这是静态txtbox),我将生成3个文本框(动态启用键盘事件)。现在我想做验证
我有一个文本框(比如父文本框),如果用户在其中输入任何数字,则动态生成3个文本框。(即id,username,amount) 现在我想对它进行j查询验证,这样所有输入的金额值的总和应该等于在父文本框中输入的值。
<!DOCTYPE html>
<html>
<head>
<style>#multiple{
margin-bottom:10px;
border:1px solid #333;
background:#efefef;
color:#000;
}
#autoresult input{
margin-left:5px;
border:1px solid #333;
background:#a4c4f4;
margin-top:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body align="center">
<form id="frm">
Please select your friends: <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
<option value="1" >
Ashutosh
</option>
<option value="6">
Jems Bond
</option>
<option value="7">
Danial Crack
</option>
<option value="8">
Dan Brown
</option>
<option value="9">
Angilina Jolly
</option>
</select>
<br/>
<input type="text" id="amount" name="amount" size="33" id="" placeholder="Enter Total Budget Amount" style="background-color:orange;font-size: 22px;color: blue"/>
<!--User will enter the amount in this textbox -->
<div id="autoresult">
</div>
</form>
<script>
$(function() {
$("#multiple").change(function() {
var multipleValues = $("#multiple").val() || "";
var autoresult = "";
if (multipleValues != "") {
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
$.each(aVal, function(i, value) {
autoresult += "<div>";
autoresult += "<input type='text' readonly='true' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>";
autoresult += "<input type='text' readonly='true' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>";
autoresult += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' ' placeholder='Enter my amount' size='120'> <p>Want a validation for this textbox</p> <font color='red'>Error SUM of all dynamic generated textbox values exceeds the total budget amount <font>"
; //autoresult should display in this textbox .i.e (autoresult= amount/count )
autoresult += "</div>";
});
}
//Set autoresult
$("#autoresult").html(autoresult);
});
$("#amount").keyup(function() {
var multipleValues = $("#multiple").val() || "";
var amount = $("#amount").val();
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
if (multipleValues != "")
{
$.each(aVal, function(i, value) {
var price = amount / count;
$("input[name=option" + (parseInt(i) + 1) + "]").val(price);
});
}
});
$("#amount").keydown(function() {
var multipleValues = $("#multiple").val() || "";
var amount = $("#amount").val();
var aVal = multipleValues.toString().split(",");
var count = $("#multiple :selected").length;
if (multipleValues != "")
{
$.each(aVal, function(i, value)
{
var price = amount / count;
$("input[name=option" + (parseInt(i) + 1) + "]").val(price);
});
}
});
});
</script>
</body>
</html>