一个表格上的两个提交按钮。使用jquery

时间:2016-02-18 16:45:47

标签: javascript jquery html forms

我的页面上有一个带有两个提交按钮的表单。有没有办法将文本字段与提交按钮相关联,并在键盘上输入时按下以执行正确的按钮。示例 - 如果我填写搜索文本字段并按键盘上的Enter键,它将执行搜索提交按钮。如果我将搜索留空并尝试登录,则会在我按下键盘上的Enter键时检测登录密码字段并执行登录提交按钮。

注意:搜索按钮适用于为其编写的脚本,但如果我添加用于登录的脚本(如果搜索文本字段中没有填写任何内容),则它不起作用。 :(

请帮忙。

这是我到目前为止所做的:

HTML

<!DOCTYPE>
<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript">
    //<![CDATA[
     $(window).load(function(){
     (function() {
      $('#s').keyup(function(){
        var empty1 = false;
        $('#s').each(function() {
         if($(this).val() == ''){
           empty1 = true; 
         }
        });
        if(empty1) {
         $('#s_btn').attr('disabled','disabled');
         //this is where i add login script if password has values
          if($('#pass').val() == '') {
           $('#login').removeAttr('disabled');
           function lkey(event) {
           var l = event.keyCode;
              if(l == 13) {
                  $('#login').click(); 
              }
           } //function lkey
          });
         //end of login script
        }else{
             $('#s_btn').removeAttr('disabled');
          function skey(event) {
             var s = event.keyCode;
             if(s == 13) {
                $('#s_btn').click(); 
             }
          }
        }
      }); //keyup
     })() //function
    }); //load
    //]]>
    </script>
  </head>
<body>
 <div>
  <form method="post" action="">
    <div class="top menu">
    <input type="text" name="search" id="s" />
    <input type="submit" name="searchBtn" val="Search" id="s_btn" disabled="disabled" />
    </div><!--end top menu-->
    <div class="content">
     <div class="left-col">
      <table>
        <tr>
           <td><label for="user">Username: </label></td>
           <td><input type="text" name="username" id="user" /></td>
        </tr>
        <tr>
           <td><label for="pass">Password: </label></td>
           <td><input type="password" name="password" id="pass" /></td>
        </tr>
        <tr>
           <td colspan="2"><input type="button" name="loginBtn" id="login" disabled="disabled"/></td>
        </tr>
      </table>
     </div><!--end left-col-->
     <div class="right-col">
      <ul>
        <li>Stuff</li>
        <li>Stuff</li>
      </ul>
     </div><!--end right-col-->
    </div><!--end content-->
  </form>
 </div>
</body>
</html>

0 个答案:

没有答案