0

I have a form on my page with two submit buttons. Is there a way to associate a text field to a submit button and when pressed entered on the keyboard to execute correct button. Example - If I fill in the search text field and press enter on the keyboard it executes the search submit button. If I leave search blank and try to log in it would detect the login password field and execute the login submit button when I press enter on my keyboard.

Note: The search button works with the script written for it but if I add the script for login (if nothing is filled in with the search text field), it doesn't work. :(

Please help.

This is what I have so far:

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>
venkat
  • 449
  • 4
  • 17
smor
  • 39
  • 2
  • 7
  • `$('#s').each(function() {` is weird. `$('#s')` can only find a single element, so looping is.... not necessary. This is however unrelated to your problem. – Kevin B Feb 18 '16 at 16:48
  • 1
    Why do you have a single form tag when you seem to actually have two separate forms? login and search? why do you have an IIFE inside of a callback? – Kevin B Feb 18 '16 at 16:50
  • You can do it serverside too, look at [Two submit buttons in one form](http://stackoverflow.com/a/547848/959552). – Przemek Feb 18 '16 at 16:55
  • your right about the looping. My main focus is to detect a keyboard enter (13) to detect by text field and execute to right button. Using one form to use in a mvc and validate through it. My main text field is the search which I validate with a token and detect the submit button by its value. Hmmm wrong approach? I am seeing if I could. Thanks. – smor Feb 18 '16 at 17:03
  • 1
    You really should be using 2 separate forms for this. – APAD1 Feb 18 '16 at 17:44
  • Don't ever declare functions inside a conditional...asking for problems and compiler can't hoist them properly – charlietfl Feb 18 '16 at 18:09
  • Ok, thanks everyone for your input. – smor Feb 18 '16 at 22:43

0 Answers0