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

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); } });

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

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>

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related