post form data using ajax?

Question

i have the following form:

<form name="register" id="register" action="include/process_registration.php" method="post"> 
<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div>    

<div class="left_form2" >
<div class="inner_form1">
<p>Your First Name:*</p>
<p>Your Last Name:*</p>
<p>Date of Birth:*</p>
</div>
<div class="inner_form2">
<input type="text" name="firstname" id="firstname" class="login_form2" autocomplete="off"><br/>
<input type="text" name="lastname" id="lastname" class="login_form2" autocomplete="off"><br/>  
<input type="text" name="dob" id="dob" class="login_form2"><br/>
</div>    
</div>


<div class="left_form2" style="text-align:right;">
<div class="inner_form1">
<p>Email Address:*</p>
<p>Confirm Email:*</p>
</div>
<div class="inner_form2">
<input type="text" name="email" id="email" class="login_form2" autocomplete="off"><br/>
<input type="text" name="email2" id="email2" class="login_form2" autocomplete="off"><br/>  
</div>
</div>



<input type="submit" id="register1" name="register" value="Register" class="buttons_register"> 
</form>

i am then using ajax to post my form data to my mysql query process_registration.php:

Ajax:

  <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#register1').click(function() {
                    var a = $('#firstname').html();
                    var b = $('#lastname').html();
                    var c = $('#dob').html();
                    var d = $('#email').html();
                    var f = $('#email2').html();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "include/process_registration.php",
                        data: {theOption: a, theOption2: b, theOption3: c, theOption4: d, theOption5: f},
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>

my php file process_registration which contains my mysql query looks like so:

 <?php 
    session_start();
    include("config.php");
    include("verify.php");
    //retrieve our data from POST

    $firstname = $_POST['theOption'];
    $lastname = $_POST['theOption2'];
    $dob = $_POST['theOption3'];
    $email = $_POST['theOption4'];
    $email2 = $_POST['theOption5'];


    $firstname = stripslashes($firstname);
    $firstname = mysql_real_escape_string($firstname);
    $lastname = stripslashes($lastname);
    $lastname = mysql_real_escape_string($lastname);
    $email = stripslashes($email);
    $email = mysql_real_escape_string($email);
    $email2 = stripslashes($email2);
    $email2 = mysql_real_escape_string($email2);
    $dob = stripslashes($dob);
    $dob = mysql_real_escape_string($dob);

    include '../dependables/secure.php';  

    $sql = "INSERT INTO supplier_registration (id, first_name, last_name, supplier_email, supplier_password, salt, dob, date) VALUES ('', '$firstname','$lastname','$email2', '$hash', '$salt', '$dob', now())";
    $result2 = mysql_query($sql);


    ?>

for some reason i am getting taken to the process_registation.php page on the form submit and getting undefined index errors for all my form values. Can someone please show me where i am going wrong? Thanks

that's because your $('#register1') is type='submit' , so by pressing it you actually submit... try changing to type='button' :) — user3012759
– user3012759, Commented Mar 18, 2015 at 16:46
@user3012759 thanks i tried that but now nothing happens at all the button becomes unresponsive — James Gayle
– James Gayle, Commented Mar 18, 2015 at 16:48
@user3012759 the button is fine how is is, its just because the form is submitting as it would normally, you need to prevent that in the JS — chriz
– chriz, Commented Mar 18, 2015 at 16:49
you sure your ajax call does not happen? can you try to add the debug in your js again and see how far you get? — user3012759
– user3012759, Commented Mar 18, 2015 at 16:51
WARNING: If you're just learning PHP, please, do not learn the obsolete mysql_query interface. It's awful and is being removed in future versions of PHP. A modern replacement like PDO is not hard to learn. A guide like PHP The Right Way can help explain best practices. Always be absolutely sure your user parameters are properly escaped or you will have severe SQL injection bugs. — tadman
– tadman, Commented Mar 18, 2015 at 16:58

Zander · Accepted Answer · 2015-03-18 16:47:05Z

1

You are going to that page because the action of the form says it.

You can prevent that with javascript/jquery when submiting the form and then do the ajax code.

$("#register1").on("click", function(e) {
    e.preventDefault();
    //rest of your code
});

Also you won't get the inputs values with .html(), should use .val()

PS: you can get less code with serialize function for your forms. Take a look on jQuery API.

answered Mar 18, 2015 at 16:47

Zander

1,0861 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Owen Richards · Accepted Answer · 2015-03-18 16:48:01Z

0

Remove this from your form...

action="include/process_registration.php"

Just make it action="" if you want it to reload the current page.

You might want to actually echo something from your process_registration.php too, otherwise the "whatigot" from the success function will always be empty.

answered Mar 18, 2015 at 16:48

Owen Richards

214 bronze badges

Comments

Stewartside · Accepted Answer · 2015-03-18 16:50:24Z

0

You'll want to use e.preventDefault() to stop the submit click working as it is usually expected to.

You also need to use .val() instead of .html() as you should be getting the value of the input and not the html within the input.

$('#register1').click(function(e) {
    e.preventDefault();
    var a = $('#firstname').val();
    var b = $('#lastname').val();
    var c = $('#dob').val();
    var d = $('#email').val();
    var f = $('#email2').val();

    // AJAX Call
});

answered Mar 18, 2015 at 16:50

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Collectives™ on Stack Overflow

post form data using ajax?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related