How to submit a form using AJAX?

Question

I am trying to submit a form using ajax. However, it is not showing the message that the code is wrong. I push errors the same way on the entire website so that part works. This is my code:

<script type="text/javascript" src="jquery.js"></script>
<div id="showerrors"></div>
<script type="text/javascript">
  $(document).ready(function() {
    setInterval(function () {
      $('#showerrors').load('errors2.php')
    }, 1000);
  });
</script>   
<form id="formoid" method="post" action="data/newpass.php">
<div class="row2">
  <input type="email" class="form-control2" placeholder="email adres" aria-describedby="basic-addon1" name="email" required>
</div>
<div class="row2">
  <input type="text" class="form-control2 pull-left" placeholder="Enter code" aria-describedby="basic-addon1" name="captcha" style="width: 70%;" required>
  <div class="capbg1">
    <input type="text" class="disable1b pull-right" value="<?php echo $capcode3;?>" name="captcha" style="width: 29%;" disabled>
  </div>  
</div>  
<div class="row2"></div>
<div class="row2">
  <button type="submit" class="w3-black pull-left" name="req_new_pw">Request new password</button>
</div>
</form>
<script type='text/javascript'>
    $("#formoid").submit(function(event) {
      event.preventDefault();
      var $form = $( this ),
          url = $form.attr( 'action' );
      $.ajax({
        type: "POST",
        url: "data/newpass.php",
        data : { email: $('#email').val(), captcha: $('#captcha').val() },
      });
    });
</script>

// newpass.php - action in the form

<?php
    error_reporting(E_ALL);
    session_start();  
    ob_start();
    $db = mysqli_connect(***);

    if (isset($_POST['req_new_pw'])) 
    {
        $captcha = mysqli_real_escape_string($db, $_POST['captcha']);
        $email = mysqli_real_escape_string($db, $_POST['email']);
        if(isset($_SESSION['capcode3']))
        {
          if($_SESSION['capcode3'] != $captcha)
          {
            array_push($errors, "- Code is incorrect.");
          }
        }     
    }
?>

//errors.php

<?php  if (count($errors) > 0) : ?>
  <div class="isa_error">
     <i class="fa fa-times-circle"></i>
       <b>Oops..</b><br>
    <?php foreach ($errors as $error) : ?>
      <p><?php echo $error ?></p>
    <?php endforeach ?>
  </div>
<?php  endif ?>

//errors2.php - display errors above form

<?php 
 include('errors.php'); 
 if (isset($_SESSION['success'])) : ?>
  <div class="error success" >
    <h3>
      <?php
          echo $_SESSION['success']; 
          unset($_SESSION['success']);
        ?>
      </div>
    </h3>
  </div>
<?php endif ?>

When i submit the form, nothing happens. What am i doing wrong?

Possible duplicate of [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Randy Casburn, Jan 20 '19 at 20:31
"When i submit the form, nothing happens" — What do you *expect* to happen? Your code makes an HTTP request and then stops. It doesn't even try to do anything with the response. Are you saying that no request appears in the Network tab of the browser's developer tools? — Quentin, Jan 20 '19 at 20:33
I can't reproduce the problem. `event.preventDefault()` works as expected when I test it. — Quentin, Jan 20 '19 at 20:40
In newpass.php, nothing is executed because `if (isset($_POST['req_new_pw']))` is always false... You only send `email` and `capcha`. — Louys Patrice Bessette, Jan 20 '19 at 20:49

Batsheva Hansav · Answer 1 · 2019-01-20T21:00:47.870

You don't send $_POST['req_new_pw'] and you are asking if it's set. You can use serialize() to send all form element by post:

<script type='text/javascript'>
    $("#formoid").submit(function(event) {
      event.preventDefault();
      var $form = $( this ),
          url = $form.attr( 'action' );
      $.ajax({
        type: "POST",
        url: "data/newpass.php",
        data : $('#formoid').serialize(),
      });
    });
</script>

Make sure you are setting $_SESSION['capcode3'] either.

score -1 · Answer 2 · answered Jan 21 '19 at 10:32

This works like a charm:

$("#formoid").submit(function(event) {
      event.preventDefault();
      var form_data = $(this).serialize(); //Encode form elements for submission

      $.ajax({
            type: "POST",
            url : "data/newpass.php/",
            data : form_data 
        });
    });

How to submit a form using AJAX?

2 Answers2