Reputation: 81
So, I followed a tutorial here to be able to submit a form with ajax. I followed the tutorial exactly (atleast I thought I did) and when I try to submit the form the page just refreshes and it never gets to the php script to send it to the database.
The script that I am using is below:
$(function () {
$(".button").click(function () {
$(function () {
$('.error').hide();
$("#submit_btn").click(function () {
//validate and process form here
$('.error').hide();
var firstname = $("input#firstname").val();
if (firstname == "") {
$("label#firstname_error").show();
$("input#firstname").focus();
return false;
}
var lastname = $("input#lastname").val();
if (lastname == "") {
$("label#lastname_error").show();
$("input#lastname").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var pin = $("input#parent_pin").val();
if (pin == "") {
$("label#parent_pin_error").show();
$("input#parent_pin").focus();
return false;
}
var login = $("input#login").val();
if (login == "") {
$("label#login_error").show();
$("input#login").focus();
return false;
}
var passwd = $("input#passwd").val();
if (passwd == "") {
$("label#passwd_error").show();
$("input#passwd").focus();
return false;
}
var cpasswd = $("input#cpasswd").val();
if (cpasswd == "") {
$("label#cpasswd_error").show();
$("input#cpasswd").focus();
return false;
}
var user_type = $("input#user_type").val();
if (user_type == "") {
$("label#user_type_error").show();
$("input#user_type").focus();
return false;
}
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login='
login + '&passwd='
passwd + 'user_type' = user_type;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "studentAccess/files/AddNewUser.php",
data: dataString,
success: function () {
$('#form-body').html("<div id='message'></div>");
$('#message').html("<h2>New User Added Successfully!</h2>");
}
});
});
});
});
});
The error that I am receiving in Google Chrome's console is:
Uncaught SyntaxError: Unexpected identifier AddNewUser.js:65
Line 65 would be:
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;
I'm not sure how to fix this problem because I don't know what the error means. Any help would be great!
UPDATE
<?php
$con = mysqli_connect("");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "INSERT INTO members (firstname, lastname, email, login, psswd, user_type)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[email]', '$_POST[login]', '$_POST[psswd]', '$_POST[user_type]')";
if (!mysqli_query($con, $sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
Upvotes: 2
Views: 362
Reputation: 89780
In the below line, it should be '&user_type=' + user_type;
instead of 'user_type' = user_type;
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;
Also, if the button is a submit
button, you should prevent the default form submit action using event.preventDefault();
within the button's click
event.
In addition, the first two lines of code is not required. I have commented them out.
/*$(function () {
$(".button").click(function () {*/
$(function () {
$('.error').hide();
$("#submit_btn").click(function (event) {
event.preventDefault();
//rest of your current validation code should be put here.
});
});
Upvotes: 0
Reputation: 6820
At the very end of that line you have:
'user_type' = user_type;
It needs to be:
'&user_type=' + user_type;
You may also need to add return false;
after your ajax to prevent the page from refreshing (and clearing out your form).
$.ajax({
type: "POST",
url: "studentAccess/files/AddNewUser.php",
data: dataString,
success: function () {
$('#form-body').html("<div id='message'></div>");
$('#message').html("<h2>New User Added Successfully!</h2>");
}
});
return false; //Keep page from refreshing
Further EDIT:
You also have a .click()
embedded in a .click()
. You cannot click two buttons at one time. You need to change this:
$(function () {
$(".button").click(function () {
$(function () {
$('.error').hide();
$("#submit_btn").click(function () {
to this...
$(function () {
$('.error').hide();
$("#submit_btn").click(function (e) {
e.preventDefault();
...
Upvotes: 1
Reputation: 3925
You have missed +
symbols in the #65 line
Should be
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' + login + '&passwd=' + passwd + '&user_type=' + user_type;
Please read http://en.wikipedia.org/wiki/JavaScript_syntax
Remove $(function () {
in .button
click handler. Now it just registers a handle on button click but not executes it
Upvotes: 1