如何在查询中使用名称比较表单的元素?



如果我在表单f1中选择特定的输入,我必须做一些操作…
所以我需要比较和检查哪个输入被单击,并使用ajax在jquery name的帮助下将键入的文本显示到第二个表单。但我不知道怎么做。
请帮助我如何选择一个元素内的表单使用其各自的名称…为了进一步澄清,我附上了代码。

<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
<h1>
Enter Your details :
</h1>
<form name="f1" action="Servlet2" on>
<p>
<label>First name : </label>
<input type="text" name="fname2">
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname2">
</p>
<p>
<label>Date of birth : </label>
<input type="date" name="dob2">
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood2">
</p>
<p>
<label>Email : </label>
<input type="text" name="email2">
</p>
<p>
<label>City : </label>
<input type="text" name="city2">
</p>
<p>
<label>State : </label>
<input type="text" name="state2">
</p>
<p>
<label></label>
<input style="width: 100px" type="submit" value="signup">
</p>
</form>
<h1>Entered details : </h1>
<form name="f2">
<p>
<label>First name : </label>
<input type="text" name="fname1" readonly>
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname1" readonly>
</p>
<p>
<label>Date of birth : </label>
<input type="text" name="dob1" readonly>
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood1" readonly>
</p>
<p>
<label>Email : </label>
<input type="text" name="email1" readonly>
</p>
<p>
<label>City : </label>
<input type="text" name="city1" readonly>
</p>
<p>
<label>State : </label>
<input type="text" name="state1" readonly>
</p>
</form>
</body>

试试这个script,我想这就是你要问的。使用keyup事件,我确定您从表单1中编写的元素,并将其复制到表单元素2,替换input的属性name的最后一个字符(例如fname2由fname1)以获得表单元素2。

<script>
$(document).on('keyup',function(e) {                
var inputF2 = e.target.name;
inputF2=inputF2.replace(/2$/,"1")
$('input[name="'+inputF2+'"]')[0].value =  $('input[name="'+e.target.name+'"]')[0].value;
});
</script>

<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).on('keyup',function(e) {                
var inputF2 = e.target.name;
inputF2=inputF2.replace(/2$/,"1")
$('input[name="'+inputF2+'"]')[0].value =  $('input[name="'+e.target.name+'"]')[0].value;
});
</script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
<h1>
Enter Your details :
</h1>
<form name="f1" action="Servlet2" on>
<p>
<label>First name : </label>
<input type="text" name="fname2">
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname2">
</p>
<p>
<label>Date of birth : </label>
<input type="date" name="dob2">
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood2">
</p>
<p>
<label>Email : </label>
<input type="text" name="email2">
</p>
<p>
<label>City : </label>
<input type="text" name="city2">
</p>
<p>
<label>State : </label>
<input type="text" name="state2">
</p>
<p>
<label></label>
<input style="width: 100px" type="submit" value="signup">
</p>
</form>
<h1>Entered details : </h1>
<form name="f2">
<p>
<label>First name : </label>
<input type="text" name="fname1" readonly>
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname1" readonly>
</p>
<p>
<label>Date of birth : </label>
<input type="text" name="dob1" readonly>
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood1" readonly>
</p>
<p>
<label>Email : </label>
<input type="text" name="email1" readonly>
</p>
<p>
<label>City : </label>
<input type="text" name="city1" readonly>
</p>
<p>
<label>State : </label>
<input type="text" name="state1" readonly>
</p>
</form>
</body>

最新更新