Question

I am trying to use jQuery-AJAX to submit the data in my form to my controller (index.php) where it is processed by PHP and inserted via PDO into the database if valid. Once the code is inserted into the database, the div where the form previously existed should be replaced by the contents of another page (newpage.php). The original page should not be refreshed upon submitting of the form, only the div where the form previously existed should be refreshed. There is a particular problem with my code, although I can’t seem to find where the issue is at:

Here is my jQuery:

<script type="text/javascript">

    function processForm() {
    var action= $('#action').val();
    var data = $('#data').val();
    var dataString = 'action=' + action + '&data=' + data;

$.ajax ({
    type: "POST",
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
        }
    });
}
</script>

Here is my HTML: (As a side note, I noticed that when I take the “return false;” out of the HTML, that the form will submit to my database, but the whole page also reloads – and is blank. When I leave the “return false;” in the HTML, the newpage.php loads correctly into the div, but the data does not make it into the database)

<form action="" method="post" onsubmit="processForm();return false;">

    <input type="hidden" name="action" value="action1" />
    <input type="text" name="data" id="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

Here is my PHP:

<?php
$action = $_POST['action'];

switch ($action) {
    case 'action1':
        $data = $_POST['data'];

        pdo ($data);

    exit;
}
?>

I feel like I am making a silly mistake somewhere, but I just can’t put my finger on it. Thanks for any assistance you can provide!

SOLUTION (via Jen):

jQuery:

<script type="text/javascript">
    function processForm() {
        var dataString = $("#yourForm").serialize();

    $.ajax ({
    type: 'POST',
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
          }
        });
    return false;
    });
</script>

HTML:

<form id="yourForm">

    <input type="hidden" name="action" value="action1" />
    <input type="text" id="data" name="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

PHP:

<?php
    $action = $_POST['action'];

    switch ($action) {
        case 'action1':
            $data = $_POST['data'];

            pdo ($data);

        exit;
    }
?>

What I learned: Use the .serialize() jQuery method if it is an option, as it will save a bunch of time writing out the var for each form value and .serialize() does not typically make mistakes sending the info to php.

Answer 1

Give this a try:

 $("#yourForm").submit(function(){


  // Could use just this line and not vars below      
  //dataString = $("#yourForm").serialize(); 

  // vars are being set by selecting inputs by id but id not set in form fields
  var action= $('#action').val(); // value of id='action' 
  var data = $('#data').val();    // value of id='data'
  var dataString = 'action=' + action + '&data=' + data;
  // dataString = 'action=&data=' so nothing is posted to db
  // because input fields cannot be found by id
  // fix by adding id fields to form fields

   $.ajax ({
   type: "POST",
   url: ".",
   data: dataString,
   success: function(){
        $('#content_main').load('newpage.php');
    }
   });
return false; 
});

And change the form to (I added the id attributes):

<form id="yourForm">
<input type="hidden" id="action" name="action" value="action1" />
<input type="text" id="data" name="data" id="data" />

<input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>