Using AJAX when submitting forms

Question

I'm very new to form submission with AJAX and have been following many tutorials on it's use, however I cannot seem to get it working in my current scenario.

I have a modal with a form inside of it linked to a PHP script and some JQuery AJAX.

When i submit the form the page appears white, I'm fairly sure this is because of the conditional logic in my PHP script.

So, where I have $stmt->rowCount() and the conditional logic it returns nothing as the script does nothing at this point.

Can I link this logic to AJAX success or failure or do I have to return a boolean from my script?

I know this is probably considered a silly question but some clarity would be of great use.

Form

<form id="userForm" method="post" action="test/process_data.php">
    <div class="form-group">
      <label for="email">First name:</label>
      <input type="text" class="form-control" name="forename" id="forename" placeholder="E.g John" required>
    </div>
      <div class="form-group">
      <label for="email">Surname:</label>
      <input type="text" class="form-control" name="surname" id="surname" placeholder="E.g Smith" required>
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" name="email" id="email" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="company">Company:</label>
      <input type="text" class="form-control" name="company" id="company" placeholder="Company name">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="" class="btn btn-default">Just take me to the partner</a>
  </form>

AJAX Script

<script>

      $("#userForm").submit(function(e) {
         var forename = $('#forename').val();
         var surname = $('#surname').val();
         var email = $('#email').val();
         var company = $('#company').val();

      $.ajax({
          url: "process_data.php",
          type: "POST",
          data: {
              "forename" : forename,
              "surname" : surname,
              "email" : email,
              "company" : company
          },
          success: function(data){
            $("#forename").val('');
            $("#surname").val('');
            $("#email").val('');
            $("#company").val('');

          }
      });

        e.preventDefault(); // avoid to execute the actual submit of the form.

      }


</script>

PHP Script to handle data

if (empty($_POST["forename"]) || 
    empty($_POST["surname"]) || 
    empty($_POST["email"]) ||
    empty($_POST["company"]))
    {

    }
    else{

        $forename = $_POST['forename'];
        $surname = $_POST['surname'];
        $email_address = $_POST['email'];
        $company_name = $_POST['company'];
        $id = rand();
        $date_time = date('Y-m-d');


        try
            {
                // Construct the SQL to add a book to the database
                $sql = "INSERT INTO user_data (forename, surname, email_address, company_name, id, date_time)
                VALUES (:forename, :surname, :email_address, :company_name, :id, :date_time)";
                // Prepare the SQL and bind parameters
                $stmt = $conn->prepare($sql);
                $stmt->bindParam(':forename', $forename);
                $stmt->bindParam(':surname', $surname);
                $stmt->bindParam(':email_address', $email_address);
                $stmt->bindParam(':company_name', $company_name);
                $stmt->bindParam(':id', $id);
                $stmt->bindParam(':date_time', $date_time);
                $stmt->execute();

                // If the statement affected the database
                if ($stmt->rowCount() > 0)
                {

                }
                else{

                }

            } catch(PDOException $e){
                echo "Error: " . $e->getMessage();
            }

    }

@ScottMarcus what? Why couldn't someone use AJAX to submit a form? — Jay Blanchard
– Jay Blanchard, Commented Feb 6, 2017 at 16:39
@JayBlanchard You absolutely could, but you don't need the <form> tag and a submit button to do it. Those elements just add a level of redundancy that will never be used and add confusion to the code. — Scott Marcus
– Scott Marcus, Commented Feb 6, 2017 at 16:40
Simpler way to get all the data needed is data:$(this).serialize(),. api.jquery.com/serialize — charlietfl
– charlietfl, Commented Feb 6, 2017 at 16:41

Donald Powell · Accepted Answer · 2017-02-06 17:06:51Z

1

Use serialize() method on the form to define the data property in your ajax call. Also added error handling.

  $.ajax({
      url: "process_data.php",
      type: "POST",
      data:  $("#userForm").serialize(),
      success: function(data){
          //Successful
      },
      error: function (XMLHttpRequest, textStatus, errorThrown)
      {
           if (!window.console) console = { log: function () { } };
           console.log(JSON.stringify(XMLHttpRequest), textStatus, errorThrown);
      }
  });

edited Feb 6, 2017 at 17:06

answered Feb 6, 2017 at 17:01

Donald Powell

7745 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Rasheed · Accepted Answer · 2017-02-06 16:55:02Z

0

Use preventDefault(); before sending ajax request. Now when the form is done submitting you can do like this.

<script>

      $("#userForm").submit(function(e) {
         var forename = $('#forename').val();
         var surname = $('#surname').val();
         var email = $('#email').val();
         var company = $('#company').val();

e.preventDefault(); // avoid to execute the actual submit of the form.

      $.ajax({
          url: "process_data.php",
          type: "POST",
          data: {
              "forename" : forename,
              "surname" : surname,
              "email" : email,
              "company" : company
          },
          success: function(data){


          }
      });
$("#userForm").fadeOut(800, function()
{
     $(this)[0].reset();
}).fadeIn(800);


      }


</script>

answered Feb 6, 2017 at 16:55

Ali Rasheed

2,8152 gold badges23 silver badges35 bronze badges

2 Comments

xhulio Over a year ago

also remove the action at the form

Ali Rasheed Over a year ago

Yeah! I just looked at the jquery part! Thank you @xhulio.

Collectives™ on Stack Overflow

Using AJAX when submitting forms

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related