I have a nav bar with options for signup or login. Once clicked on either it will display a modal window using Bootstrap. What I am trying to do is that when the user is finished with the join modal window (pressed submit button and submitted data to the controller), I want to show the signin modal window right after. Show my idea was when submitting the form data to the controller. The controller would respond back with a display-type equaling "join, signin, nothing" and reinclude the page. In the page it will check what the display-type is then will call either show_join_modal() function if the display-type is signup or call either show_signin_modal() function if the display-type is login.
My idea using JQuery was something like this, Here is code in the startpage.php
<script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo 'show_signin_modal();';
else if ($display_type == 'join')
echo 'show_join_modal();';
else
;
?>
function show_signin_modal() {
$("#signinModal").modal("show");
}
function show_join_modal() {
$("#joinModal").modal("show");
}
function hide_all_modal() {
$("#joinModal").modal("hide");
$("#signinModal").modal("hide");
}
</script>
<div class="container">
<div class="modal fade" id="joinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='Join'></input>
<h1>Register</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password" required> Password</label>
<div class="col-sm-10">
<input name="password" type="password" placeholder="Enter password..">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email" required> Email</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="Enter email..">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="signinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='SignIn'></input>
<h1>Login</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password"> Password</label>
<div class="col-sm-10">
<input name="password" type="text" placeholder="Enter password.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
However, I could not get it to work.
Any ideas. Any sample code? Thanks in advance!
Replace this code with the current on your controller.
<script>
function show_login_modal() {
$("#loginModal").modal("show");
}
function show_signup_modal() {
$("#signupModal").modal("show");
}
function hide_all_modal() {
$("#signupModal").modal("hide");
$("#loginModal").modal("hide");
}
</script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo '<script type="text/javascript">show_signin_modal();</script>';
else if ($display_type == 'join')
echo '<script type="text/javascript">show_join_modal();</script>';
//echo 'show_join_modal();';
else
;
?>
I found out how to do it with help from "https://codepen.io/elmahdim/details/azVNbN" which he posted on "Bootstrap modal: close current, open new" under username "Mahmoud". So in order to go from the joinModal window to the signinModal window right after the user submits the form on the joinModal window. I updated the submit button in the joinModal window with:
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#signinModal" data-dismiss="modal">Submit</button>
Related
I have a form from where the user imput data to the database and a php file with the function to do so.
I'd like to show an alert message on the same form page using javascript without refresing the page.
I don't know much about JS and I have tried every possible solution I came across but I cannot find the solution yet, what am I doing wrong? I hope someone could help me.
Edit: I decided to use modals to do this but modal is not showing and PHP file gets opened
Edit 2: I got it to show the modal on screen, but It has no message, not even the title specified in the h4 tags
What I'd like the user to see as message is the echo in the PHP file.
this is what I tried:
form code:
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
<div class="col-sm-12 form-group">
</div>
</form>
Modal:
<!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MSJ">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS function in the form page:
<script type="text/javascript">
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario="EnviarUsuario"; //name
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
url : 'Logica/Usuario.php',
success : function(data){
$("#MSJ").html(data);
$("#ModalMSJ").modal("show");
}
});
return false;
});
</script>
PHP file:
$IDUsuario=$_POST["txtIDUsuario"];
$NombreRepresentante=$_POST["txtNombreRepresentante"];
$NombreComercial=$_POST["txtNombreComercial"];
$Expediente=$_POST["txtExpediente"];
$Observacion=$_POST["txtObservaciones"];
if(isset($_POST["btnEnviarUsuario"]))
{
$Conexion = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($Conexion->connect_error)
{
die("Connection failed: " . $Conexion->connect_error);
}
$sql = "insert into usuario
(NombreRepresentante,NombreComercial,Expediente,Observacion)
values
('$NombreRepresentante','$NombreComercial','$Expediente','$Observacion');";
if($Conexion->query($sql) === TRUE) {
/*Message I'd like to show to user*/
echo "Usuario guardado exitosamente";
}
Just remove the form tag and it won't fully refresh the page.
Then remove your alert from the php file and put it as shown below
<script>
$(document).ready(function(){
$("#EnviarUsuario").click(function(){
$.ajax({
url: "Logica/Usuario.php",
type: 'post',
data: {"btnEnviarUsuario":document.getElementByName("EnviarUsuario").value},
success: function(result){
//You put here your alert
alert("Usuario guardado exitosamente");
}
});
});
});
</script>
seems you having problem for using bootstrap. I wrap it using jsfiddle and fake JSON API. You could try it. I Hope it help. It's just simple problem that you have there. , your code is wrong on the ajax data.
see this.
https://jsfiddle.net/hp9jzfmo/1/
$(function(){
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario=$('#EnviarUsuario').val();
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize(), // This is the right one
url : 'https://jsonplaceholder.typicode.com/posts',
success : function(data){
$("#MSJ").html(JSON.stringify(data));
$("#ModalMSJ").modal('show');
}
});
return false;
});
});
the body should be
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MSJ">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The PHP Part I think you could do your self, as far as the data passed to server. I hope it helps :)
This is the final solution:
Form Code:
<form role="form" id="frmUsuario">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> ID Usuario:</label>
<input type="text" class="form-control" id="IDUsuario" name="txtIDUsuario" readonly>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Nombre Comercial:</label>
<input type="text" class="form-control" id="NombreComercial" name="txtNombreComercial" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Nombre del Representante:</label>
<input type="text" class="form-control" id="NombreRepresentante" name="txtNombreRepresentante" required>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Expediente:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Expediente" name="txtExpediente" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Observaciones:</label>
<textarea style="resize:none" class="form-control" type="textarea" id="Observaciones" name="txtObservaciones" maxlength="6000" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="btnEnviarUsuario" id="EnviarUsuario" class="btn btn-lg btn-default pull-right" >Enviar →</button>
</div>
<div class="col-sm-12 form-group">
</div>
</form>
Modal Code
<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Usuario</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="color:red;" id="MSJ">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS Code:
<script type="text/javascript">
$("#frmUsuario").submit(function(e){
e.preventDefault();
var btnEnvUsuario="EnviarUsuario"; //variable to check if user clicked the button
$.ajax({
type : 'POST',
data: $("#frmUsuario").serialize()+"&btnEnviarUsuario="+btnEnvUsuario,
url : 'Logica/Usuario.php',
success : function(data){
$("#MSJ").html(data);
$("#ModalMSJ").modal("show");
}
});
return false;
});
</script>
PHP File Code:
$IDUsuario=$_POST["txtIDUsuario"];
$NombreRepresentante=$_POST["txtNombreRepresentante"];
$NombreComercial=$_POST["txtNombreComercial"];
$Expediente=$_POST["txtExpediente"];
$Observacion=$_POST["txtObservaciones"];
if(isset($_POST["btnEnviarUsuario"]))
{
$Conexion = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($Conexion->connect_error)
{
die("Connection failed: " . $Conexion->connect_error);
}
$sql = "insert into usuario
(NombreRepresentante,NombreComercial,Expediente,Observacion)
values
('$NombreRepresentante','$NombreComercial','$Expediente','$Observacion');";
if($Conexion->query($sql) === TRUE) {
/*Message I'd like to show to user*/
echo "Usuario guardado exitosamente";
}
im trying to build a modal, with a try-catch block, so if everyting is valid and entered correctly in the form, the modal should be closed
This is the function login, i wonder why $('#dialog').modal('hide'); does not work
<script>
function login() {
var kontakt = new Kontakt();
kontakt.name = document.getElementById('name').value;
kontakt.email = document.getElementById('email').value;
kontakt.plz = document.getElementById('plz').value;
kontakt.ort = document.getElementById('ort').value;
kontakt.strasse = document.getElementById('strasse').value;
try {
kontakt.pruefe();
}
catch(err) {
return window.alert(err.message);
}
kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');
</script>
</head>
This is the modal
<div class="container">
<h2></h2>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dialog">
Login-Dialog öffnen
</button>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login (im header)</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<p>im body:</p>
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
</div>
</div>
</div>
</div>
</div>
The only problem you have is that the $("#dialog").modal('hide') statement isn't inside your login function body.
This should work.
function login() {
var kontakt = new Kontakt();
kontakt.name = document.getElementById('name').value;
kontakt.email = document.getElementById('email').value;
kontakt.plz = document.getElementById('plz').value;
kontakt.ort = document.getElementById('ort').value;
kontakt.strasse = document.getElementById('strasse').value;
try {
kontakt.pruefe();
}
catch(err) {
return window.alert(err.message);
}
kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide');
}
It seems like you are closing your login function on the line before the call to close the modal.
Try to change this:
kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');
to this:
kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide'); }
I have a specific request from a customer. I'm more a designer than a developer. I'm working on a WordPress theme with a custom contact form integrated.
I need to place a link on the "Submit" button that when clicked will open a confirm popup. In the popup, the user would find a checkbox with a text saying "I declare that I have read, understood and accepted the information on the processing of my personal data".
Once they check the checkbox, a "Continue" button on the bottom of that popup should enable (prior to checking the checkbox, the Continue button is disabled). When the Continue button is clicked, the popup would go away and the form will be launched.
Here's how I would like the popup to look like:
Here's the HTML of the form:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<input type="submit" class="btn btn-custom up animated hiding" value="<?php _e("Send Message",'Pixelentity Theme/Plugin'); ?>" data-animation="fadeInUpBig">
</form>
You are use Bootstrap Modal. If the control that should close the dialog is placed within the modal, then just add data-dismiss="modal" attribute to this control. To lock or unlock Continue button use handler for the chechkbox click event.
Also you could implement another sequence of user actions that is demonstrated below.
$(".modal").on('show.bs.modal', lock);
$("#MyModal [type=checkbox]").click(lock);
$("#MyModal .btn-primary").click(function() {
$("#MyForm").submit();
});
function lock() {
var flag = $("#MyModal [type=checkbox]").prop('checked');
if (!flag) {
$("#MyModal .btn-primary").attr("disabled", "disabled");
} else {
$("#MyModal .btn-primary").removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Modal -->
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Privacy Policy</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input type="checkbox"> I declare that I have read, understood and accepted the information on the processing of my personal data.
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" disabled="disabled">Continue</button>
</div>
</div>
</div>
</div>
<!-- Form with confirmation request -->
<form id="MyForm" action="/">
<p>You will have to accept our privacy policy to submit the form data.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">Submit</button>
</form>
The Submit button opens dialog box that contains the checkbox for confirmation. The Continue button submits the form, but it is disabled until the checkbox will be checked.
You should do it with JavaScript jQuery. So install the jQuery plugin first.
Put the popup inside the form like this and change the submit button to a onclick event:
<form method="post" name="contactform" class="peThemeContactForm">
<div class="col-md-5 col-sm-5 col-xs-12 animated hiding" data-animation="slideInLeft">
<div class="form-group">
<input type="text" name="author" class="form-control input-lg" placeholder="<?php _e("Full Name",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control input-lg" placeholder="<?php _e("Email",'Pixelentity Theme/Plugin'); ?>" required />
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control input-lg" placeholder="<?php _e("Phone",'Pixelentity Theme/Plugin'); ?>">
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-12 animated hiding" data-animation="slideInRight">
<div class="form-group">
<textarea name="message" class="form-control input-lg" placeholder="<?php _e("Message",'Pixelentity Theme/Plugin'); ?>" required ></textarea>
</div>
</div>
<a onclick="popupshow()" class="btn btn-custom up animated hiding" data-animation="fadeInUpBig"><?php echo _e("Send Message",'Pixelentity Theme/Plugin'); ?></a> //Submit-Button
//PopUP
<div id="popup" style="display:none;">
<input type="checkbox" id="checkbox" onchange="checkboxclick()">
<button type="submit" id="mycheckbox" disabled>Continue</button>
</div>
</form>
Now do the Javascript Functions (Put them in your head section):
<script>
function popupshow() {
document.getElementById("popup").style = "";
}
function checkboxclick() {
if (document.getElementById("mycheckbox").checked) {
$('#mycheckbox').prop('disabled', false);
} else {
$('#mycheckbox').prop('disabled', true);
}
}
</script>
This should show the popup if you click the submit-button and should activate the continue-button if the checkbox is checked.
I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>
your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}
Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});
I am using bootstrap admin theme in one of my project. I have a popup modal in one of the php page and i have a registration form in that popup, now when i enter the details and click on submit, the data is actually being inserted into the database and modal closes by default, but the page doesn't refreshes, as i have a table of registered members in the page, i only can see that entry when i refresh the page, and again when i refresh the page, it asks me to reload the page or close the alert box, when i click on reload, the entry goes into the database for two times, i am attaching my code, please help, i am new to stack overflow and bootstrap as well.
Modal code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add New Member </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Member</h4>
</div>
<div class="modal-body">
<form method="post">
<fieldset>
<div class="form-group">
<label>First Name</label>
<input name="fname" class="form-control" placeholder="First Name" type="text" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input name="lname" class="form-control" placeholder="Last Name" type="text" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input name="email" class="form-control" placeholder="Email Address" type="email" required>
</div>
<div class="form-group">
<label for="h-input">Cell Number</label>
<input name="cell" type="text" class="form-control" placeholder="XXX XXX XXXX (Enter number without space)">
</div>
<div class="form-group">
<label>Member Type</label>
<select class="form-control" name="membertype">
<option value="Member">Member</option>
<option value="Guest">Guest</option>
</select>
</div>
<div class="form-group">
<label>Member Status</label>
<select class="form-control" name="memberstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</fieldset>
<div>
<input name="addmember" class="btn btn-primary" value="Add New Member" type="submit"/>
</div>
</form>
<?php
if(isset($_POST['addmember'])) {
require('config.php');
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$cell = $_POST['cell'];
$mtype = $_POST['membertype'];
$mstatus = $_POST['memberstatus'];
$addmember = "INSERT INTO members (fname, lname, email,cellnumber,type,status,regdate) VALUES (:fname,:lname,:email,:cell,:mtype,:mstatus,CURDATE())";
$q = $conn->prepare($addmember);
$q->execute(array(
':fname'=>$fname,
':lname'=>$lname,
':email'=>$email,
':cell'=>$cell,
':mtype'=>$mtype,
':mstatus'=>$mstatus,
));
if(!$q) {
echo "Error: Member not added.";
}
else {
header("Location: addMembers.php");
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have created this modal file as a separate file and included in my main php file where table of registered members is printed.
Location requires an absolute path. Check the second to last note in the Notes section.
http://php.net/manual/en/function.header.php
When you manually refresh the page you are just resending the form data that was submitted which is why you get two entries in the DB.