• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 950
  • Last Modified:

JQuery Intercept Submit Form Basic Auth via Form

Hello, I am trying to allow a form to login to a page that requires basic authentication.  I have a form with a user name and password field and a jquery script that I want to capture the user name and password and then do ajax to authenticate to the form and then redirect to the form logged in.  Here is my code so far, but the jquery is not intercepting the form and running.  Can someone tell me how to fix it?  Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" language="javascript"></script>
  <script type="text/javascript" language="javascript">  
   $(document).ready(function()
  {
    $('#loginForm').submit(function()
    {
      var username = $('#usernameInput').val();
      var password = $('#passwordInput').val();

      $.ajax(
        {
          'password' : password,
          'username' : username,
          'url'      : 'private.php',
          'type'     : 'GET',
          'success'  : function(){ window.location = 'private.php'; },
          'error'    : function(){ alert('Bad Login Details');},
        }
      );

      return false;
    });
  });
</script>
</head>
<body>

<form name="loginForm">
User: <input name="usernameInput" type="text" /> Password:<input name="passwordInput" type="password" />
      <input type="submit" value="Log In" /></form>

</body>

</html>
0
smower
Asked:
smower
  • 3
2 Solutions
 
evedderCommented:
try using id instead of name <form id="loginForm">
0
 
HainKurtSr. System AnalystCommented:
first try

'error'    : function(){ alert('Bad Login Details');},
-->
'error'    : function(){ alert('Bad Login Details');}

remove , at the end
0
 
HainKurtSr. System AnalystCommented:
keep the name but add id as evedder said

<form name="loginForm">
-->
<form name="loginForm" id="loginForm">
0
 
HainKurtSr. System AnalystCommented:
here with all fixes
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" language="javascript"></script>
  <script type="text/javascript" language="javascript">  
   $(document).ready(function()
  {
    $('#loginForm').submit(function()
    { alert(0);
      var username = $('#usernameInput').val();
      var password = $('#passwordInput').val();

      $.ajax(
        {
          'password' : password,
          'username' : username,
          'url'      : 'private.php',
          'type'     : 'GET',
          'success'  : function(){ window.location = 'private.php'; },
          'error'    : function(){ alert('Bad Login Details');}
        }
      );
alert(1);
      return false;
    });
  });
</script>
</head>
<body>

<form name="loginForm" id="loginForm">
User: <input name="usernameInput" type="text" /> Password:<input name="passwordInput" type="password" />
      <input type="submit" value="Log In" /></form>
</body>

</html>

Open in new window

0
 
smowerAuthor Commented:
Thanks! You guys were fast.  I changed the name fields to id and I also had to change the textbox field names to id also as per below. This is the working code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" language="javascript"></script>
  <script type="text/javascript" language="javascript">  
   $(document).ready(function()
  {
    $('#loginForm').submit(function()
    {
      var username = $('#usernameInput').val();
      var password = $('#passwordInput').val();

      $.ajax(
        {
          'password' : password,
          'username' : username,
          'url'      : 'private.php',
          'type'     : 'GET',
          'success'  : function(){ window.location = 'private.php'; },
          'error'    : function(){ alert('Bad Login Details');},
        }
      );

      return false;
    });
  });
</script>
</head>
<body>

<form id="loginForm">
User: <input id="usernameInput" type="text" /> Password:<input id="passwordInput" type="password" />
      <input type="submit" value="Log In" /></form>

</body>

</html>
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now