Having trouble getting a form using PHP, JQuery Form plugin, and JQuery Validate plugin to work as expected. I’m using Validation plugin v 1.8.1, so it is not due to the bug with dataType: 'json', being read as jsonp. Below is the html:
<?php require_once('includes/initialize.php'); ?>
<?php require_once('layouts/header.php'); ?>
<body>
<div class="container_12">
<div class="grid_4" id="form">
<form action="actions/register.php" method="POST" class="cmxform" name="frmPrntRgstr" id="frmPrntRgstr">
<p>
<label>Desired Username:</label>
<input type="text" name="userName" id="userName" value="" />
</p>
<div class="clear"></div>
<p>
<label>Password:</label>
<input type="password" name="Pwd" id="Pwd" />
</p>
<p>
<label>Confirm Password:</label>
<input type="password" name="confirmPwd" id="confirmPwd" />
</p>
<div class="clear"></div>
<p>
<label>First Name:</label>
<input type="text" name="firstName" id="firstName" value="" />
</p>
<div class="clear"></div>
<p>
<label>Last Name:</label>
<input type="text" id="lastName" name="lastName" value="" />
</p>
<div class="clear"></div>
<p>
<label>Email Address:</label>
<input type="text" id="email" name="email" value="" />
</p>
<div class="clear"></div>
<p>
<label>Cell Phone:</label>
<input type="text" id="cellPhone" name="cellPhone" value="" />
</p>
<p>
<label>Home Phone:</label>
<input type="text" id="homePhone" name="homePhone" value="" />
</p>
<input type="hidden" id="role" name="role" value="2" />
<input type="hidden" id="approved" name="approved" value="0" />
<input type="hidden" id="school" name="school" value="0" />
<p>
<input class="submit" type="submit" id="regUser" value="Submit" />
</p>
</form>
<p id="frmPrntRgstrRspns" style="display: none;">A Response goes here.</p>
</div>
</div>
Simplified version of register.php without error checking:
<?php require_once('../includes/initialize.php'); ?>
<?php require_once('../layouts/appheader.php'); ?>
<?php
if (isset($_POST["userName"])) {
$auser = new User();
$auser->userName = $_POST['userName'];
$auser->hshdPwd = sha1($_POST['Pwd']);
$auser->firstName = $_POST['firstName'];
$auser->lastName = $_POST['lastName'];
$auser->email = $_POST['email'];
$auser->cellPhone = $_POST['cellPhone'];
$auser->homePhone = $_POST['homePhone'];
if(!is_null($_POST['school'])) {
$auser->school = $_POST['school'];
} else {
$auser->school = "0";
}
$auser->prelim_role = $_POST['role'];
$auser->approved = $_POST['approved'];
if($auser->create()) {
$abc = array('response'=>"Request successfully submitted"); ;
} else {
$abc = array('response'=>"Errors.");
}
return ?>
<script type="text/javascript">
var resp2 = '<?php echo json_encode($abc, JSON_FORCE_OBJECT); ?>';
</script>
<?php
}
?>
Below is the register.js file:
$(document).ready(function() {
$("#frmPrntRgstr").validate({
rules: {
firstName: "required",
lastName: "required",
userName: {
required: true,
minlength: 6
},
Pwd: {
required: true,
minlength: 6
},
confirmPwd: {
required: true,
minlength: 6,
equalTo: '#Pwd'
},
homePhone: {
required: true,
},
cellPhone: {
required: true,
},
email: {
required: true,
email: true
},
},
messages: {
firstName: "Please enter your firstname",
lastName: "Please enter your lastname",
userName: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
},
hshdPwd: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirmPwd: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
},
submitHandler: function(form) {
$("#frmPrntRgstr").ajaxSubmit({
dataType: 'json',
success: processJson,
})
}
});
function processJson() {
var resp3 = $.parseJSON(resp2);
$("#frmPrntRgstr").slideUp("normal", function() {
$(resp3.response).appendTo("#frmPrntRgstrRspns", function() {
$("#frmPrntRgstrRspns").slideDown("normal");
})
})
}
});
I have tried changing content type to “application/json” in all files. When I remove dataType: 'json' and have a success function like $("#frmPrntRgstr").slideUp("normal", function () { $("#frmPrntRgstrRspns").slideDown("normal") }); everything works fine. When I add dataType: 'json', even when I’m not trying to parse the json server response or use it in the success function, the new user will be inserted into the MySQL database, but the client-side sees no response. Any help would be greatly appreciated.
This is what your script returns:
This is not JSON, it’s a fragment of HTML that contains a script tag with a javascript variable declared inside of it.
A JSON response would look like
<?php echo json_encode($abc); ?>alone.