Submitting PHP form from jQuery Form Wizard

Question

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());
?>

rm-vanda · Accepted Answer · 2014-11-14T21:08:14.853

2

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...

edited Nov 14 '14 at 21:08

answered Nov 14 '14 at 19:47

rm-vanda

3,122
3
23
34

Thanks I've tried that and still no joy with data, a row is inserted but no records from the form – Jez Nov 14 '14 at 19:59
1

Ok, then in your question, post the PHP code that handles this - and then, put `print_r($_POST); die();` at the top of that php script, and tell use what your console logs when you run it again. – rm-vanda Nov 14 '14 at 20:01
PHP added. will just test the print_r – Jez Nov 14 '14 at 20:57
Ok, so the print_r showed this in the Console.log `Array ( )` – Jez Nov 14 '14 at 20:58
1

OK, then that's gonna be your problem. I bet if you type in your console - `$("#form_myform1").serialize()` - it will return `{}` – rm-vanda Nov 14 '14 at 21:06
I edited my answer - try that - and please note that you will need to change the value of `#idOfYourInputBox` – rm-vanda Nov 14 '14 at 21:08
1

Brilliant stuff, that worked :-), my question from this now, is that what would be the best way to do this if the form is a large form with many input fields, would I need to build the array with everything `apprasename : $("#idOfYourInputBox").val(), apprasename2 : $("#idOfYourInputBox2").val(), etc`? – Jez Nov 14 '14 at 22:45
1

Nah, if you have a long form, you definitely want to get `serialize()` to work - but, that other way is useful if you want to throw some extra logic in the mix, or do something different. If you have a long form, you want to get `serialize()` to work - which, it likely doesn't work because of something weird in the HTML - try running `$("#form_myform1").serialize()` in your console - if that returns a string, then there's something else going on, but in this example, I'm sure it will return blank - which indicates a problem in your HTML - – rm-vanda Nov 15 '14 at 01:49
1

I tried the `$("#form_myform1").serialize()` again and as you said it returned a blank array when I used `print_r`. So based on what you also said I looked back over the HTML. Bang found it, on the actual form wizard I use the id form_myform1 which is attached to the opening div for this section, when I should be using the id on the form to get the data from the submit button. Changed and it all works!! :-) thanks for the help on the above, I learnt something new with the setting of data explicitly `data : { apprasename : $("#idOfYourInputBox").val() }` I didn't know could do this. Thanks – Jez Nov 15 '14 at 22:36
1

Yes, `$.ajax()` is a very cool function that you can actually do a whole lot of things with. You can actually pass a lot of other properties into that function, including `complete:` and a lot of other things that may be useful to you- later down the road. There are also shorthand methods: `$.get()` and `$.post()` which can be useful when you want to prototype something quickly. Good luck-! – rm-vanda Nov 15 '14 at 23:06

score 1 · Answer 2 · answered Nov 15 '14 at 22:40

My now working Ajax code

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

Submitting PHP form from jQuery Form Wizard

2 Answers2