如何使用jquery引用另一个文本框来验证动态生成的文本框 [英] how to validate dynamically generated textbox with reference to another textbox using jquery
本文介绍了如何使用jquery引用另一个文本框来验证动态生成的文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在阅读此问题之前，请检查此 - 点击此处作业演示。
如果用户为我的父文本框（这是静态的txtbox）提供任何值，我生成3个文本框（在关键事件中动态地）。现在我想做验证
我有一个文本框（如父文本框），如果用户输入任何数字，则3个文本框将动态生成。 （即id，用户名，金额）
现在我想对它进行aj查询验证，以便所有输入金额值的总和应等于在父文本框中输入的值。
<！DOCTYPE html>
< html>
< head>
< style> #multiple {
margin-bottom：10px;
border：1px solid＃333;
背景：#efefef;
颜色：＃000;
}
#autoresult input {
margin-left：5px;
border：1px solid＃333;
背景：＃a4c4f4;
margin-top：5px;
}
< / style>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< / head>
< body align =center>
< form id =frm>
请选择好友：< select id =multiplemultiple =multiplestyle =width：120px; height：120px;>
< option value =1>
Ashutosh
< / option>
< option value =6>
捷克债券
< /期权>
< option value =7>
Danial Crack
< / option>
< option value =8>
Dan Brown
< / option>
< option value =9>
Angilina Jolly
< / option>
< / select>
< br />
<！ - 用户将在此文本框中输入金额 - >
< 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 ='输入我的金额'size =' 120' > < p>想验证此文本框< / p> < font color ='red'>所有动态生成的文本框值的总和超过总预算金额< font>
; // autoresult应该显示在此文本框中.ie（autoresult =金额/数量）
autoresult + =< / div>;
}）;
}
//设置自动结算
$（＃autoresult） .html（autoresult）;
}）;
$（＃amount）。keyup（function（）{
var multipleValues = $（＃ （））。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>
解决方案
工作演示： http://codebins.com/bin/4ldqp7a/3
请检查上面的链接
Please check this-click here working demo before reading this question. I am generating 3 textboxes (Dynamically on key-up event), if users provide any value to my parent textbox(this is static txtbox). Now i want to do Validation
I have a text-box(say parent text-box), if user enters any number in it then 3 text box are generating dynamically.(namely id,username, amount) Now i want to do a j query validation on it, such that the sum of all the entered amount values should be equal to the Values entered in the parent text box.
<!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>
解决方案
working Demo: http://codebins.com/bin/4ldqp7a/3
Please check above link
这篇关于如何使用jquery引用另一个文本框来验证动态生成的文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
