jquery ajax php/mysql - Simple registration form with _POST method
Question
I have a problem with registration form (jquery) coding and do not know how to proceed. What I am trying to do is implementing a standard registration form with jquery, ajax and php/mysql.
The problem is that when I run the page in Chrome I got an error message: Maximum cell stack size exceeded. I looked at the code many times, checked the brackets, dots etc and cannot find the issue.
The code should - after clicking a 'Create an account' button - validate the form and call php script registerEngine.php I have a logging on, on a server side and I cannot see any logs from that script.
Can anybody please look at the bellow code and advice where the problem might be? (the code is compilation of several examples available on internet.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/login.css">
<script src="js/produkty.js" defer></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var dialog, form,
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( name, "username", 3, 16 );
valid = valid && checkLength( email, "email", 6, 80 );
valid = valid && checkLength( password, "password", 5, 16 );
valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( valid ) {
$.ajax({
method: "POST",
url: "registerEngine.php",
data: {"name": name, "email": email, "password": password},
}).done(function( data ) {
var result = $.parseJSON(data);
var str = '';
if(result == 1) {
str = 'User record saved successfully.';
}else if( result == 2) {
str == 'All fields are required.';
} else{
str = 'User data could not be saved. Please try again';
}
});
dialog.dialog( "close" );
}
return valid;
}
dialog = $( "#dialog-form" ).dialog({
autoOpen: true,
height: 400,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addUser();
});
} );
</script>
<title>Jadłospis - Rejestracja</title>
</head>
<body>
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
</body>
</html>
The registerEngine.php is attached bellow:
<?php
include 'db_connection.php';
include 'functions.php';
error_log("-->registerEngin.php:"."\n", 3, "/var/www/html/jadlospis/errors.log");
if (isset($_POST['name'])){
$T_nazwa = $_POST['name'];
//$SQL = "DELETE FROM produkty WHERE nazwa='".$T_nazwa."' AND status='T'";
//error_log("-->registerEngin.php:"."\n", 3, "/var/www/html/jadlospis/errors.log");
if (mysqli_query($conn, $SQL)) {
include 'usunProduktOK.php';
} else {
echo "Błąd usuniecia rekordów: " . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
Sorry for a newbie question but I do not have much experience with js/jquery and do not know how to overcome the issues.
Many thanks in advance for yours help.
2 answers
solution1
1 ACCPTED 2019-02-02 15:05:57
To get the value of an input field you must use .val() after the element selector. So In your ajax call
data: {"name": name, "email": email, "password": password},
Instead of the above try this,
data: {"name": name.val(), "email": email.val(), "password": password.val()},
This way the value is selected and passed on to the data in your ajax call. I hope this works for you.
solution2
1 2019-02-02 15:25:41
Yunus Aslam has provided a solution that works for me. The problem was missing .val() part of the code. The correct line should be:
data: {"name": name.val(), "email": email.val(), "password": password.val()},
This does not solve the issue with error message in Chrome, but it looks good in Firefox so I can proceed for now. Thank you Yunus for your help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.