Search code examples
jqueryjquery-form-wizard

Submitting PHP form from jQuery Form Wizard


I have a form through the jQuery Form Wizard, all the sections work fine and the last tab gives the user the chance to look over the inputs before submit.

On Submit I have put the below code to send the data to the database. My issue is that the POST data doesnt get to the database, a row is inserted, but it is a blank row.

I've tested the Insert and have manually input data so that when the Submit is clicked this is input into the db.

How can I get the data from the form into the database?

$('#form_myform1').find('.button-previous').hide();
        $('#form_myform1 .button-submit').click(function (e) {
            $.ajax({
                url:'includes/myforms/myforms_form1.php',
                data:$(this).serialize(),
                type:'POST',
                success:function(data){
                    console.log(data);
                    $(".alert-success").show().fadeOut(5000);
                },
                error:function(data){
                    $(".alert-danger'").show().fadeOut(5000);
                }
            });
        }).hide();

My PHP POST code (Yes I know it's not PDO ;-) I have other issue with PDO and my init.php file on from this location hence using mysql_ for now.)

<?php
require '../../assets/functions/core/cnn.php';

if(!empty($_POST['appraisename'])) {
    $appraisename = htmlspecialchars(trim($_POST["appraisename"]));
}

$form1sql = "INSERT INTO myforms_personaldetails (name)
            VALUES('".$appraisename."') ";
    mysql_query($form1sql) or die(mysql_error());
?>

Solution

  • Your problem is that the line that reads data:$(this).serialize(),. the this in that line is referring to the button, not the form...

    Change that line to :

    data:$("#form_myform1").serialize(), - and this should work properly.

    In your case, however, it seems this is still returning something blank.

    So, since you're only using one bit of data, anyway - just set the data explicitly:

    data : { apprasename : $("#idOfYourInputBox").val() }

    As per why the serialize() didn't work --- I would need to see the form markup...