Bootstrap register modal not working properly
Question
I hope some of u could help me with my problem.
I'm trying to get my bootstrap modal working, but it seems, it won't do the things I want. I set up my modal like this:
<div id="Sign-Up">
<div class="control-group">
<form name="myForm" role="form" action="register.php" method ="post" onsubmit="return validateForm()">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="TestUser@testsite.com" class="input-large" required="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="TestUser" class="input-large" required=>
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password1">Passwort:</label>
<div class="controls">
<input id="password1" name="password1" class="form-control" type="password" placeholder="********" class="input-large" required=>
<em>1-8 Zeichen</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="password2">Passwort wiederholen:</label>
<div class="controls">
<input id="password2" class="form-control" name="password2" type="password" placeholder="********" class="input-large" required>
</form>
</div>
I added a "register.php" for the database insertion:
<?php
require('connection.php');
// If the values are posted, insert them into the database.
if (isset($_POST['userid']) && isset($_POST['password1'])){
$username = $_POST['userid'];
$email = $_POST['Email'];
$password1 = $_POST['password1'];
$password2 = $_POST ['password2'];
if ($password1 == $password2) {
echo "Password is OK";
} else {
echo "You entered two different passwords";
}
$query = "INSERT INTO `users` (userid, password1, Email) VALUES ('$username', '$password1', '$email')";
$result = mysql_query($query);
if($result){
$msg = "User Created Successfully.";
}
}
?>
And finally the database connection "connection.php":
<?php
define('DB_HOST','localhost');
define('DB_NAME','users');
define('DB_USER','****');
define('DB_PASSWORD','****');
$conn=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$conn) or die("Failed to connect to MySQL: " . mysql_error());
if (mysqli_connect_errno($conn))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else
{
echo "Successfully connected to your database…";
}
?>
If I check the "register.php" inside my browser, I can see that I got a valid database connection. My problem at this point is, that I can't figure out how to submit the data into my database. If I press my register button, the modal just refreshes to my startscreen without any data insertion.
Would be nice, if anyone could check out my code and knows whats the problem there.
Greetings anz
PS: That's the button I coded:
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" type="submit" formmethod="post" class="btn btn-success" value="Anmelden">Anmelden</button>
</div>
</div>
Edit:
That's my fully coded modal now, which still doesn't seem to work:
<!-- Login -->
<div class="modal fade bs-modal-sm" id="myLogin" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#signin" data-toggle="tab">Anmelden</a></li>
<li class=""><a href="#signup" data-toggle="tab">Registrieren</a></li>
<li class=""><a href="#why" data-toggle="tab">Why?</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p>
<br>
Please contact <a mailto:href="..."></a>...</a> for any other inquiries.
</p>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="TestUser" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Passwort:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Eingeloggt bleiben </label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Anmelden</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<!-- Sign Up Form -->
<div id="Sign-Up">
<div class="control-group">
<form name="myForm" role="form" action="register.php" method ="post" >
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="TestUser@test.com" class="input-large" required="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="TestUser" class="input-large" required=>
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password1">Passwort:</label>
<div class="controls">
<input id="password1" name="password1" class="form-control" type="password" placeholder="********" class="input-large" required=>
<em>1-8 Zeichen</em> </div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="password2">Passwort wiederholen:</label>
<div class="controls">
<input id="password2" class="form-control" name="password2" type="password" placeholder="********" class="input-large" required>
</div>
</div>
</div>
<!-- Button -->
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
</div>
</div>
</fieldset>
</form>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
1 answers
solution1
0 ACCPTED 2015-07-28 15:19:34
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1
/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
</style>
</head>
<button class="btn btn-primary" data-toggle="modal" data-target="#myLogin">Modal form</button>
<!-- Login -->
<div class="modal fade bs-modal-sm" id="myLogin" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#signin" data-toggle="tab">Anmelden</a></li>
<li class=""><a href="#signup" data-toggle="tab">Registrieren</a></li>
<li class=""><a href="#why" data-toggle="tab">Why?</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p></p>
<br>
Please contact <a mailto:href="..."></a>...</a> for any other inquiries.
</p>
</div>
<div class="tab-pane fade active in" id="signin">
<fieldset>
<form class="form-horizontal" action="signin.php" method="POST">
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="TestUser" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Passwort:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<input type="checkbox" class="control-label" name="rememberme" id="rememberme-0" value="Remember me">
<label class="control-label" for="rememberme-0">Eingeloggt bleiben </label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Anmelden</button>
</div>
</div>
</form>
</fieldset>
</div>
<div class="tab-pane fade" id="signup">
<fieldset>
<!-- Sign Up Form -->
<div id="Sign-Up">
<form name="myForm" role="form" action="register.php" method ="post" >
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="TestUser@test.com" class="input-large" required="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="TestUser" class="input-large" required=>
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password1">Passwort:</label>
<div class="controls">
<input id="password1" name="password1" class="form-control" type="password" placeholder="********" class="input-large" required=>
<em>1-8 Zeichen</em> </div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="password2">Passwort wiederholen:</label>
<div class="controls">
<input id="password2" class="form-control" name="password2" type="password" placeholder="********" class="input-large" required>
</div>
</div>
<!-- Button -->
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send" id="submit">
</div>
</form>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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.
Related Question
Bootstrap Modal not Working on Click
Bootstrap Modal in Firefox not working
Button inside modal is not working with Bootstrap 4 but is working with Bootstrap 3
Bootstrap - Cards not working properly
Bootstrap Datepicker is not working properly
Bootstrap 4 dropdown not working properly
PHP inside a Bootstrap Modal Not Working
Bootstrap modal not working on loop scenarios
Bootstrap Selectpicker not working on a global modal
Jquery Autocomplete is not working in Bootstrap Modal
Related Tags