欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

ajax提交表单实现按enter执行

其实这个问题很白痴。

有些时候,提交表单为了用户体验,用ajax无刷新技术提交。

我一般是用jqeruy 鼠标点击事件提交ajax

可是用户在输入完成之后一般会按enter提交,这里就要同步这个功能:

html code:

<form onSubmit="return entersubmit('ljqh_id');">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="85"><img src="index/email_ico.jpg" width="79" height="32"></td>
    <td width="198"><div class="posetion_re"><input type="text" name="ljqh"  class="typetext email"><div class="tipinfo">请填写您的电子邮件</div></div></td>
    <td align="center"><div class="yes ljqhemail"></div></td>
  </tr>
   <tr><td></td> <td>
<div class="formtip ljqhemail">

</div>
    </td>
    <td >
    </td>
  </tr>
  <tr>
    <td><img src="index/tel_ico.jpg" width="79" height="32"></td>
    <td><div class="posetion_re"><input type="text" name="tel"  class="typetext tel"><div class="tipinfo">请填写您的手机号码</div></div></td>
    <td align="center"><div class="yes ljqhtel"></div></td>
  </tr>
   <tr><td></td> <td>
<div class="formtip ljqhtel">

</div>
    </td>
    <td >
    </td>
  </tr>
   <tr style="display:none">
    <td><img src="index/yzm_ico.jpg" width="79" height="32"></td>
    <td><input type="text" name="yzm"  class="typetext yzm3" style="width:82px; background:url(index/yzm_ico2.png) no-repeat;"><a href="javascript:changeVerify();"><img src="/default.php/Public/verifyCode/" id="verifyimglogin"  style=" margin:0 0 0 3px ; vertical-align:middle; height:28px; "></a></td>
    <td align="center"><div class="yes yzm1"></div></td>
  </tr>
   <tr><td></td> <td>
    
<div class="formtip yzm1">

</div>
    </td>
    <td >
    </td>
  </tr>
  <tr>
    <td colspan="3" align="center">
    <br>
	<a href="javascript:;" id="ljqh_id">
    </a>
         <br>  
       <br>
    </td>
  </tr>
</table>
<input type="submit"  style=" display:none">
</form>

这里注意3个地方:

1.

// 这里是提交事件发生,然后执行我自定义的js entersubmit方法。
2.上面第一点传递的参数要求是点击提交的按钮的id
3. //这个要写,让表单可以在按下enter键的时候提交。

js function code:

function entersubmit(id){//这里传递当前提交按钮的id过来,模拟执行click事件。
	$("#"+id).click();
	return false;
	}

此方法只适用于火狐浏览器!坑爹。看我换方法:

html里面不要用a提交。改用:

<input type="submit"  id="dl_dl"> 

这样就兼容了所有浏览器。

其实还有一种方法更简单:

你的ajax程序直接放在一个function里面。然后在提交的时候 onSubmit=”return 你自定义这个function”;

这样不管你是点击提交,还是按下回车提交都可以了!

注意方法里面一定要return false;不然页面会跳转。

更多

本文固定链接: http://shanmao.me/web/ajax-ti-jiao-biao-dan-shi-xian-enter-zhi-xing | 山猫的博客

该日志由 admin 于2013年03月22日发表在 jQuery, 网页前端 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: ajax提交表单实现按enter执行 | 山猫的博客
关键字: ,