• Welcome to Journal web site.

我是 UI设计师

让设计传递下去

Next
没有了

如何同步两个input的值

Data: 2014-02-26 17:57:27Form: JournalClick: 1349

接到一个项目的前端制作任务,需求是:页面的里有一个表单,表单点击提交时,需要弹出框来显示验证码让访客填写正确验证码。

一开始看需求感觉挺简单的,先把框隐藏,然后点击控件来让验证码的框显示即可,写着写着就发现不对劲,提交时直接会把表单直接提交,而跳过了验证码这关,那就是失败的。

思路捋了一下,应该是设置一个控件,例如a链接写着“提交”,其实是控制弹出验证码框的控件,而不会直接提交表单,然后再提交框中再设置一个控件“继续提交”,来达到效果。

弹出框我习惯用jquerylightbox插件,这款插件简单好用,效果也比较出色。

弹出效果完成了,新的问题来了,隐藏容器写在表单里头,弹出就会失效,而且数据也不能很好的提交到程序去,那我们得想个补救的方法。

先设置一个input项,然后hidden属性隐藏,作为前端中转项,写在表单里头,例:

<input name="vcode1" type="hidden" id="vcode"/> 

下面是控制两个input值同步的代码,放在表单外头来控制两个表单的值一致。

<script type="text/javascript">
function vcode(){
 	document.getElementById("vcode2").value=document.getElementById("vcode1").value
}
</script>
<form>
...
<input name="vcode1" id="vcode1" type="hidden" />
....
</form>
<input name="vcode2" id="vcode2" type="text" onkeyup="vcode()"/>

测试通过,原理是填写弹出表单后,输入表单失去焦点就会执行vcode代码,直接同步两个表单的信息。

Name:
<提交>