I have a "Sign Up" form inside a modal and a script like this:
$(function () {
$("#lala").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'signup.php',
data: $("#lala").serialize(),
success: function () {
alert('form was submitted');
}
});
});
});<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="myModalLabel">Log In</h4></a></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" style="padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a href="#Registration" data-toggle="tab">Sign Up</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal" style="padding-top: 20px;" method="post" id="lala">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control" name="honorific">
<option>Mr.</option>
<option>Ms.</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Name" name="fullname" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email" name="email"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" name="password"/>
</div>
</div>
<div class="form-group">
<label for="typeOfParticipant" class="col-sm-2 control-label">Sign up as</label>
<div class="row">
<div class="col-md-3">
<select class="form-control" onChange="option1(this.value)" name="persona">
<option value=""></option>
<option value="participant">Participant</option>
<option value="researcher">Researcher</option>
<option value="exhibitor">Exhibitor</option>
</select>
</div>
</div>
<div id="op1" style="margin-left: 11px;"></div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm" name="submit">
Submit</button>
<button type="reset" data-dismiss="modal" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>My "signup.php" looks like this:
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "eam";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn){
die("Connection failed: " . mysqli_connect_error());
}
$email = $_POST["email"];
$pwd = $_POST['password'];
$honorific = $_POST['honorific'];
$fullname = $_POST['fullname'];
$persona = $_POST['persona'];
$sql = "SELECT MAX(id) AS maxid FROM registered";
$result = $conn->query($sql);
if ($result->num_rows == 0) {
$id = 1;
}
else{
$row = $result->fetch_assoc();
$id = $row['maxid']+1;
}
$sql = "INSERT INTO registered (id, email, password, honorific, fullname, persona)
VALUES ({$id}, {$email}, {$pwd}, {$honorific}, {$fullname}, {$persona})";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>The problem is that, no matter what I have tried, the form variables just will not pass in signup.php. I have checked them and yes, they are empty. Is there any way you can help me figure out why?
</div>
