I have a form that have a select input, and there's another pop up that sets a session. i want to save the selected values while the page reloading for the session setting is there's any solution for that ?
example of my code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="">
<select name="first">
<option value="example1">first opt</option>
<option value="example2">second opt</option>
</select>
<input type="submit" value="Done">
</form>
<p>you have added > <?php echo $_SESSION['sessionset']; ?></p>
<button data-toggle="modal" data-target="#myModal">Adding something by setting a session</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form method="post" action="">
<select name="sessionset">
<option value="cupcake">cupcake</option>
<option value="cookie">cookie</option>
</select>
<input type="submit" value="Done">
</form>
</div>
</div>
php
if(isset($_POST['sessionset'])) {
$_SESSION['sessionset'] = $_POST['sessionset'];
}
this is a little example of my page, now i need to set the session and i don't want the user to reset his select because of the reload
Related
I am using a CodeIgniter script which has the following to clarify this is the full code for the login form in a modul
<!-- modal login -->
<div id="login" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog white-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p id="myModalLabel"><i class="icon icon-user"></i> Login </p>
</div><!-- modal-header -->
<div class="modal-body">
<?php if (isset($login_message)) {
echo $login_message;
}
?>
<form method="post" action="/users/login" class="form" id="login-form">
<input type="text" name="uname" placeholder="username" class="form-control" /><br/>
<input type="password" name="upwd" placeholder="****" class="form-control" /><br/>
<input type="submit" name="sbLogin" value="<?=_('Login')?>" class="btn btn-black"/>
Lost Password<br />
<br /><div class="fb-login-button" data-max-rows="1" data-size="small" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"></div>
<br /><br />Don't have an Account? Create one
</form>
<br />
<div id="login_output_div"></div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div><!-- .modal dialog -->
To protect the form can I add
<input type="hidden" name="<?=$csrf['name'];?>" value="<?=$csrf['hash'];?>" />
and use
$csrf = array(
'name' => $this->security->get_csrf_token_name(),
'hash' => $this->security->get_csrf_hash()
);
in the header of the page after enabling CSRF in the config? Will doing so mess up my other forms and will I need to add this to every form?
<input type="hidden" name="<?=$csrf['name'];?>" value="<?=$csrf['hash'];?>" />
Thanks.
What you need to do is to open this file:
application/config/config.php
Then set the CSRF to true
$config['csrf_protection'] = true;
then go to this file
application/config/autoload.php
add form to array item called helper
$autoload['helper'] = array('form');
Then you should use the form helper in codeigniter, which you can read about it in this link:
codeigniter form helper
It does add the csrf and validates it for you.
Then on your view, you can simple use:
<?php $attributes = array('id' => 'login-form');
echo form_open('/users/login', $attributes); ?>
it will automatically create <form> tag and adds the csrf to it, then once this form is submitted, the csrf will be validated by codeigniter, and if the csrf was successful, the code will resume, otherwise, it will fail and gives you error message.
I know this question has many solutions in SO.But still I cant spot my mistake.The following is my bootstrap modal form
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/lib/bootstrap/css/bootstrap.min.css">
<script src="../asset/modal/js/jquery.min.js"></script>
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<? if(isset($_POST["sendmail"]))
echo "Form 1 have been submitted";
?>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<? echo $token; ?>
<!-- Modal content-->
<form class="form-horizontal" role="form" method="post" name="sendmail" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<textarea rows="8" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" >Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
But whenever i submit the form it redirects to the index page of my project.Please Help me spotting my error.:-(
Yes its because you are not directing it anywhere...You need to write something like this:-
<form class="form-horizontal" role="form" method="post" name="sendmail" action="page_name_here.php" >
So you need to add action="page_name_here.php">
If you want to stay on the same page then just write action="#">
Update:-
<button type="submit" class="btn btn-default" name="send">Send</button>
Add a name to the button send then in the Php:-
<? if(isset($_POST["send"]))
echo "Form 1 have been submitted";
?>
This way when you click the send button everything in the form is submitted, since its a button of type=submit
Use this for the submit button. Your button has not been named as sendmail for the POST so the info will not pass.
<? if(isset($_SERVER['REQUEST_METHOD'] == 'POST' ))
echo "Form 1 have been submitted";
?>
Add empty action as shown for the same page
<form class="form-horizontal" role="form" method="post" name="sendmail" action="">
I have a form that makes a calculation, enter the database and returns the value through an alert.
I would like to replace this alert for modal.
HTML
<form method="post" action="#">
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send">Send</button>
</form>
PHP
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
echo '<script>';
echo 'alert("'.$imc.'");';
echo '</script>';
}
I tried as follows:
- Added the php after the tag </html> code;
- Added the variable responsible for the calculation: $imc;
- I linked the button Send with modal.
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Enviar" data-toggle="modal" data-target="#myModal">Enviar</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php echo'.$imc.';?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
PHP
<?php
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
return $imc;
}
?>
Thus, when I click on Send button (with all the empty fields), it opens the modal and displays the '.$imc.' as String.
When I insert the data and click on the button Send a dims window (early effect of modal) and quickly back to normal. I believe the modal is being called, but some stretch it gives erros and closes.
How can I solve this?
AJAX, top of code:
<?php
$imc = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['altura'], $_POST['peso']);
}
?>
End of body
<?php
if ($imc !== false){
echo "<script>$('#myModal').modal('show');</script>";
}
?>
Would it be this? I tried to add this code, but gave the same result. By submitting the form, the window dims and quickly back to normal.
---------------------------------UPDATED / I MANAGED TO DO THAT I WANTED-------------------------------
<form method="post" action="#">
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send" data-toggle="modal" data-target="#myModal">Send</button>
</form>
<?php
$imc = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['altura'], $_POST['peso']);
}
?>
<?php
if ($imc !== false){
echo '<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>';
echo '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>';
echo "<script>$('#myModal').modal('show');</script>";
}
?>
</body>
</html>
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">';
echo $imc; // RESULT OF CALC MODAL INSIDE
echo '</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>';
}
?>
POST Method:
<?php
function calcularIMC($altura,$peso){
$imc = 0;
if($altura >0 && $peso >0){
$imc = $peso / ($altura * $altura);
}
return $imc;
}
$imc = "";
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$imc = calcularImc($_POST['alt'], $_POST['peso']);
?>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Send">Send</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php echo $imc;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Errors you made:
Addres altura as $_POST['altura'] instead of $_POST['alt'] (as its name attribute is alt)
You started your modal.show script before the page was loaded. So the modal might not exist yet. Wrap it in $(window).load(function(){})
Printed the variable in the wrong way: echo'.$imc.' should have been echo $imc;
Even nicer would be to use AJAX. Then you don't have to refresh the page. If you want to do that, lookup AJAX. You could also avoid using PHP. #AceWebDesign Answer explains nicely how this can be done without PHP.
You could use jQuery for this.
instead of
echo '<script>';
echo 'alert("'.$imc.'");';
echo '</script>';
You could use this on the page. It may need some tweaking as it was quick and rough, and the modal was a little rusty.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="#">
<input type="hidden" name="acao" id="acao" value="cadastrar"/>
<input type="text" name="alt" id="altura" required><br><br>
<input type="text" name="peso" id="peso" required><br><br>
<button type="submit" id="Enviar" data-toggle="modal" data-target="#myModal">Enviar</button>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).off("click", ".btn-default").on( "click", ".btn-default", function(e) {
var altura = $('#altura').val();
var peso = $('#peso').val();
var imc =0;
if (altura > 0 )
{
var imc = peso / (altura * altura);
}
$(".modal-body").html(imc);
$('#myModal').modal('show');
});
return false;
});
</script>
</body>
</html>
My modal for asking name
<?php session_start(); ?>
<div class="modal name fade modal-scrollable" id="name" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title myModalLabel">Your name!</h4>
</div>
<div class="modal-body">
<form id="nameForm" action="index.php" method="post">
<div class="form-group">
<label class="col-xs-3 control-label">Your name : </label>
<div class="col-xs-4">
<input type="text" class="form-control name" name="name" required/>
</div>
</div></div><br/><br/>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="ok">Ok</button>
</div>
</form>
</div>
</div>
</div>
Script code
<?php
if(!$_SESSION['user']['name']){
echo "<script>
$(window).load(function(){
$('#name').modal({
backdrop: 'static',
keyboard: true
})
$('#name').modal('show');
});
</script>";
}
?>
<script>
$('#ok').submit(function(){
<?php
$_SESSION['user']['name']=$_POST['name'];
print"location.reload();";
?>
});
</script>
This code actually works fine. The code is that on page load it will ask the name of user and set the session variable to set the entered name. It will open the modal only if session variable is not set. But in reality the user has to enter his name twice.I even tried reload() but it didnt work. Please help!
Your session is being set correctly. However, you are not initializing the session. The first line after your <?php tag should be:
session_start();
Please, also note that in this part of your code, you should print your JavaScript code:
<?php
$_SESSION['user']['name']=$_POST['name'];
print "location.reload();";
?>
I'm searching for a solution to display a mysql result in a modal box. Saying I'm going to make a voting form. Which is the user choose an option and click submit. After a submit is clicked, a modal box is called and display the number of vote they just chosen.
I'm looking for this kinda example everywhere but no result. I'm wondering if there's any one of them on the planet. So could you guy please suggest or give me an idea how to achieve this.
You can send the data as shown in script below upon form post if you calculate the number of votes in php or you can query the database in your popup using the id for which you need total votes, so in this case you will need to pass id only.
//This script reads the itema id and votes using class open-AddBookDialog and add the values //to input fields id and votes in modal box
<script type="text/javascript">
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#id').val($(this).data('id'));
$('#votes').val($(this).data('votes'));
$('#myModal_3').modal('show');
});
});
</script>
// your button
<input type="button" class="open-AddBookDialog" data-votes="<?php echo $votes;?>" data-id="<?php echo $id; ?>" role="button" data-toggle="modal" />
//Modal box
<div id="myModal_3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="clearfix"></div>
<form class="form-horizontal" method="post" action="">
<div class="control-group">
<label class="control-label" >Name</label>
<div class="controls">
<input type="hidden" name="id" id="id" value=""/>
<input type="text" name="votes" id="votes" value=""/> </div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-info" name="send" value="Send">
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
</div>