Question

I’ve been putting together my first Ajax powered form (here), with the end goal of sending the form data to a MySQL database. I have minimal experience with PHP and Javascript, and have therefore adopted JQuery Formwizard as my path of choice. The form works great, however I haven’t had much luck finding resources to help me write my ‘process.php’ script.

The form, by default, currently returns a string such that item1=foo&item2=bar…, which displays on submit. I have attached the JS below and the gist of my process.php file, but am not sure how the two tie together. The submit button doesn’t seem to be directing to the script at all. The form is kinda long, but simple, so I’ve just included some of it.
Thanks a lot,

Mike

HTML (SNIPPET)

<form action="path/to/process-form.php" method="POST" id="demoForm" class="bbq">

                <div id="fieldWrapper">

                    <span class="step" id="first">

                        <span class="font_normal_07em_black">Manufacturer Information</span><br />

                        <p class="section-desc">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non est est. Quisque sit amet tellus nulla, 
                        eget molestie velit. Morbi dapibus ornare purus eget ultrices. In et massa ac diam vulputate auctor. 
                        Curabitur ut velit nisi, vel suscipit ligula. Donec non tellus id mauris ornare laoreet sed quis massa. 
                        </p>

                        <br />

                        <div class="clear-line"></div>

                        <br />

                        <label for="manu_name">Manufacturer</label><br />
                        <input class="input_field_12em" name="manu_name" id="manu_name" /><br />

                        <label for="manu_web">Website</label><br />
                        <input class="input_field_12em" name="manu_web" id="manu_web" value="http://" /><br />

                        <label for="manu_email">Email</label><br />
                        <input class="input_field_12em" name="manu_email" id="manu_email" /><br />

                        <label for="manu_phone">Phone</label><br />
                        <input class="input_field_12em" name="manu_phone" id="manu_phone" />
                        <label for="manu_phone_ext">ext</label>
                        <input class="input_field_12em" name="manu_phone_ext" id="manu_phone_ext" /><br />

                        <label for="manu_info">Additional Info</label><br />
                        <textarea class="input_field_12em" name="manu_info" id="manu_info"></textarea><br />

                    </span>

…continued

                <div id="demoNavigation">                           
                    <input class="navigation_button" id="back" value="Back" type="reset" />
                    <input class="navigation_button" id="next" value="Next" type="submit" />
                </div>

</form>

JS

$(function(){
                        $("#demoForm").formwizard({ 
                            formPluginEnabled: true,
                            validationEnabled: true,
                            focusFirstInput : true,
                            formOptions :{
                                        type:'POST',
                                success: function(data){$("#status").fadeTo(5000,1,function(){ $(this).html("Product successfully submitted!").fadeTo(5000, 0); })},
                                beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
                                dataType: 'json',
                                resetForm: true
                            },
                            validationOptions : {
                                rules: {

                                <!-- Manufacturer validation -->

                                    manu_name: "required",
                                    manu_email: {
                                        email: true
                                    },

                                },
                                messages: {
                                    required: "This field is required.",
                                    email: "Please enter a valid email address."
                                }
                                }
                            });
                        });

PHP (process-form.php)

<?php

include('dbconnect.php');

/* manufacturer */

$manu_name  = $_POST['manu_name'];
$manu_web   = $_POST['manu_web'];
$manu_email     = $_POST['manu_email'];
$manu_phone     = $_POST['manu_phone'];
$manu_phone_ext = $_POST['manu_phone_ext'];
$manu_info  = $_POST['manu_info'];

$manu_name  = mysqli_real_escape_string($manu_name);
$manu_web   = mysqli_real_escape_string($manu_web);
$manu_email     = mysqli_real_escape_string($manu_email);
$manu_phone     = mysqli_real_escape_string($manu_phone);
$manu_phone_ext = mysqli_real_escape_string($manu_phone_ext);
$manu_info  = mysqli_real_escape_string($manu_info);

$query = "INSERT INTO pd_products
        (manu_name,manu_web,manu_email,manu_phone,manu_phone_ext,manu_info) 
         VALUES ('$manu_name','$manu_web','$manu_email','$manu_phone','$manu_phone_ext','$manu_info')";

if (!mysqli_query($query,$con))
  {
  die('Error: ' . mysqli_error());
  }
mysqli_close($con)

?>

Answer 1

make sure you change “form action=”path/to/process-form.php”” in the HTML to the actual path where the form is located.

mysqli_query($query,$con) should be mysqli_query($con,$query) with link, they query. Also, why not just use mysql_query($query,$con)?

Seems like you’re using alot of unnecessary code to do something simple.

Place the HTML and PHP in a .php file ( make sure the PHP is in braces), change the form action to it’s own name (to submit to itself), and get rid of the javascript.

Check here for PHP form validation: http://php.net/manual/en/filter.filters.validate.php