Reputation: 99

ajax jquery is not working

I am trying to submit the login request using Jquery Ajax. But the form is not submitting. I am tried to find the issue but can not. the code is vey simple but as I have started learning javascript so I am failing to find the problem in my code. Below is the code Please find the problem with it......

$(function() {
  //get form by id
  var form = $('#login_form');
  //get message container by is
  var message = $('#message');
  //prevent default on form submit
  $(form).submit(function(event) {
    event.preventDefault();
    //serialize form data
    var form_data = $(form).serialize();
    $.ajax({
      type: 'post',
      url: $(form).attr('action'),
      data: form_data
    }).done(function(response) {
      //set the class of message container to success
      $(message).removeClass('error');
      $(message).addClass('success');
      //put data received from server
      $(message).html(response);
      //clear form
      $('#email').val('');
      $('#password').val('');
    }).fail(function(data) {
      //set the class of message container to error
      $(message).removeClass('success');
      $(message).addClass('error');
      //put the error message
      if (data.responseText !== '') {
        $(message).html(data.responseText);
      } else {
        $(message).text('Sorry...! an unexpected error has occured...!');
      }
    });
  });
});

<html>

<head>
  <meta charset="UTF-8">
  <title>Ajax Practice</title>
  <link href="assets/css.css" rel="stylesheet" type="text/css" />
  <script src="assets/jquery.js" type="text/javascript"></script>
  <script src="assets/ajax_code.js" type="text/javascript"></script>
</head>

<body>

  <div class="login_form_div">
    <form action="login.php" method="POST" name="login_form" id="login_form" class="login_form">
      <div class="label">
        <label>Email:</label>
      </div>
      <div class="form_input">
        <input type="text" name="email" id="email">
      </div>
      <div class="label">
        <label>Password:</label>
      </div>
      <div class="form_input">
        <input type="password" name="password" id="password">
      </div>
      <div class="form_input">
        <button type="submit" name="submit_form" id="submit_form">Login</button>
      </div>
    </form>
    <span class="message1 error success" id="message">
            </span>
  </div>
</body>

</html>

Upvotes: -1

Answers (3)

Mian Saeed Akbar

Reputation: 99

Actually the problem was here. as the default form submission is prevented through javascript and I was looking for the message.

if (isset($_POST['submit_form'])) {
$email = mysqli_real_escape_string($_POST['email']);
$password = mysqli_real_escape_string($_POST['password']);
if (!empty($email) && !empty($password)) {
    echo "Login Must be Successful...!";
} else {
    echo "Login Failed....!";
}

}

Upvotes: 0

Ganesan San

Reputation: 174

your html and javascript is working perfectly. can you post your php code?. otherwise try put this code in your login.php file:

<?php
     echo "form submitted";
?>

Upvotes: 1

Jeffin

Reputation: 1209

If you are using js fiddle then import the jquery js file on the dropdown on the left side of the panel.

$(function () {
    //get form by id
    var form = $('#login_form');
    //get message container by is
    var message = $('#message');
    //prevent default on form submit
    $(form).submit(function (event) {
        event.preventDefault();
        //serialize form data
        var form_data = $(form).serialize();
        $.ajax({
            type: 'post',
            url: $(form).attr('action'),
            data: form_data
        }).done(function (response) {
            //set the class of message container to success
            $(message).removeClass('error');
            $(message).addClass('success');
            //put data received from server
            $(message).html(response);
            //clear form
            $('#email').val('');
            $('#password').val('');
        }).fail(function (data) {
            //set the class of message container to error
            $(message).removeClass('success');
            $(message).addClass('error');
            //put the error message
            if (data.responseText !== '') {
                $(message).html(data.responseText);
            } else {
                $(message).text('Sorry...! an unexpected error has occured...!');
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax Practice</title>
        <link href="assets/css.css" rel="stylesheet" type="text/css"/>
        <script src="assets/jquery.js" type="text/javascript"></script>
          <script src="assets/ajax_code.js" type="text/javascript"></script>
          </head>
<body>

        <div class="login_form_div">
            <form action="login.php" method="POST" name="login_form" id="login_form" class="login_form">
                <div class="label">
                    <label>Email:</label>
                </div>
                <div class="form_input">
                    <input type="text" name="email" id="email">
                </div>
                <div class="label">
                    <label>Password:</label>
                </div>
                <div class="form_input">
                    <input type="password" name="password" id="password">
                </div>
                <div class="form_input">
                    <button type="submit" name="submit_form" id="submit_form">Login</button>
                </div>
            </form>
            <span class="message1 error success" id="message">
            </span>
        </div>
    </body>
    </html>

Upvotes: 1

ajax jquery is not working

Answers (3)

Related Questions