如何从一个表单(在提交后)显示一个值(在提交后)到另一个表单(两者都在同一页上)
问题描述:
因此,我有form1,我在两个字段中给出值并提交它,如何从一个表单(在提交后)显示一个值(在提交后)到另一个表单(两者都在同一页上)
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
我想在这两个的TextInput和numberinput在窗口2领域被自动写入和可见这些值。
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
我如何使用JavaScript来自动设定值可见,并且准备提交 在Form2的领域???
注意:我使用两种形式,因为它们在点击提交后都有不同的操作,并且这两个表单都在同一页上。
答
下面是使用id
散列一个小例子,有这样的想法,我想你就可以开始,对象hash
会有对列表,
您可以通过提它的ID,代替$('form :input').on()
限制特定形式:
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
答
如果你使用jQuery,您可以序列化的第一种形式,并直接发送到服务器。然后,您从输入字段获取值并将其设置为另一个输入字段。
表1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
脚本:
$("#submit").click(function() {
$.post("new_cand.php", $("#form1").serializeArray(), function() { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
表2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
注意:这是没有测试,需要jQuery和用于后期的方法
你认为只是更新后的第一个子,而不是做一个重复的形式? 另外,除非您异步提交表单,否则您的页面将重新加载,然后才能提交第二个表单。 也许考虑发布两个jquery,然后你可以在两个应该发布到的代码中设置。 –