I want to display a number in a bootstrap modal after i use post method to submit a form .
But the bootstrap modal cannot show out the number ($_POST[number]).
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
<?php
$number = $_POST['number'];
?>
<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" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
How can i do it?
A few observations and flaws with your approach:
Fix HTML Errors (e.g. you are not properly closing your form, add: </form>
PHP is a server-side scripting language.
Bootstrap cannot function without Jquery which is a client-side scripting language.
You cannot trigger a Bootstrap modal on a form submission button, unless its Ajax driven!
Show the Modal after the form has been submitted (Page load) see jsfiddle example
Complete code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
</form>
<?php if (isset($_POST["number"])) : ?>
<!-- Show the 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" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo htmlspecialchars($_POST["number"]);
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php else : ?>
<!-- Do other stuff here -->
<?php endif; ?>
You need to add one more button ( input submit button ). that button will send the post request to self and update the variable $number.
First of all, you didn't close your form tag and you are trying to use submit button as a button for your modal...I don't know if that is gonna work.
Close your form tag and add input field of submit type...and then add a button for modal..that will work.
Here is the working code:
<html>
<head>
<link rel="stylesheet" href="../includes/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../includes/css/bootstrap.min.css">
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<input type="submit" value="submit">
</form>
<?php
$number = $_POST['number'];
?>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">Modal</button>
<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" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../includes/js/bootstrap.min.js"></script>
</body>
</html>
Change <script> and <link> tag source according to your needs.
u can remove class model and fade from 'myModel' class div or can write style for display:block. I tried your code and checked in my browser and removed above classes. I hope you get the problem. You can also view your number with viewing page source.
I also noticed something about this Modal Problem, remove type="button" from your <button> and the code runs.
Would have posted this as comment but I don't have enough rep yet.
This is because the PHP code gets executed server side and is executed before the HTML is loaded, so the $number is an empty string.
Related
It's my first post so welcome!
I'm struggling with one problem in my project. As you can see at my screenshot, i have few names which are fetched from database, and displayed in main menu. after clicking "modal" button, modal from bootstrap is showed with php form. user can type a 4 digit pin code, next step is to match this pin with database records. But 2 users can have same pin so i need to compare not only pin with database, but name too. i don`t know how to send "name" value with post. Here is my code and screenshot:
index.php:
<?php
$data = $worker->select_workers();
$worker->show_workers($data);
$worker->show_modal();
worker.php:
<?php
require_once('db.php');
class Worker extends db {
protected $select_workers;
public function select_workers(){
return $this->select_workers = $this->query('SELECT * FROM worker')->fetchAll();
}
public function show_workers($data){
foreach ($data as $users) {
echo '<p id="p_name">'.$users['name'].'</p><a id="button_modal" href="/?name='.$users['name'].'" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Modal
</a><br>';
}
}
public function show_modal(){
echo '<!-- Button trigger modal -->
<!-- Modal -->
<form action="test.php" id="submit_ajax" method="post">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_title" name="name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="hidden_name" type="text" value="" name="name" />
Hasło:<input type="text" name="password"><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Przerwa/powrót</button>
</form>
</div>
</div>
</div>
</div>';
}
Main menu of my application
I belive that solution is really simple but like always - i waste too many times for complicated things which are not working. Sorry for my english, it's not my native language :)
Thank you
Put value here <input id="hidden_name" type="text" value="<?= $name ?>" name="name" />, but if you fetch data from db, isn't it better to use ids instead of names?
Not clean solution. make for every worker a modal.
<?php
require_once('db.php');
class Worker extends db {
protected $select_workers;
public function select_workers(){
return $this->select_workers = $this->query('SELECT * FROM worker')->fetchAll();
}
public function show_workers($data){
$i=0;
foreach ($data as $users) {
$i++;
echo '<p id="p_name">'.$users['name'].'</p><a id="button_modal" href="/?name='.$users['name'].'" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal'.$i.'">
Modal
</a><br>
<!-- Button trigger modal -->
<!-- Modal -->
<form action="test.php" id="submit_ajax" method="post">
<div class="modal fade" id="exampleModal'.$i.'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal_title" name="name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="hidden_name" type="text" value="'.$users['name'].'" name="name" />
Hasło:<input type="text" name="password"><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Przerwa/powrót</button>
</form>
</div>
</div>
</div>
</div>';
}
How can i show my modal when i click submit?
The output is success without modal but if i use modal popup its show nothing.
This is my body html
<form action="" method="post">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="hobby[]" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby[]" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby[]" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby[]" value="Memancing"> Memancing <br>
</div>
</div>
<div class="row">
<div class="offset-5 col-sm-7">
<input type="submit" name="proses" class="btn btn-primary" value="Proses" data-toggle="modal" data-target="#exampleModal">
</div>
</div>
</form>
this is my modal show :
<!-- AWAL MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<h3>OUTPUT : </h3>
<?php
if (isset($_POST['proses'])) :
if (!empty($_POST['hobby'])) :
foreach ($_POST['hobby'] as $selected) :
echo $selected . "</br>";
endforeach;
endif;
endif;
?>
</div>
</div>
</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>
<!-- AKHIR MODAL -->
my modal just don't submit the information
ok, as you whant, here is the modal showing the values:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<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">
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form>
<h3>Please select:</h3>
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="values" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="values" value="Membaca"> Membaca <br>
<input type="checkbox" name="values" value="Menulis"> Menulis <br>
<input type="checkbox" name="values" value="Memancing"> Memancing <br>
</div>
</div>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" >modal</button>
</body>
</html>
<script>
$(document).ready(function(){
$("#button1").click(function() {
var p=$("#myModal1 #checkid");
$(p).html("you have selected:");
$.each($("input[name='values']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
</script>
This is my code, I was supposed to get the inputted value in db and php tag isnt working.. It is not also redirecting to "myorders.php"; My form inside is not working.. Thank you.. Really need some help :(((
<div class="container">
<form method="post">
<h2>Enter your Pin Number</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter your Pin Number</h4>
</div>
<div class="modal-body text-center">
<input type="password" id="first-name" required="required" class="form-control" name="pin">
</div>
<div class="modal-footer">
<button type="submit" name="submit3" class="btn btn-default" data-dismiss="modal"><i class="fa fa-key"></i> Confirm Pin</button>
</div>
</div>
</div>
</div>
<!-- START OF PHP -->
<?php include ('connectdb.php');
if(isset($_POST['submit3']))
{
$pin = $_POST["pin"];
$pww = "123";
if ($pin!=$pww) {
echo "WRONG PIN.. TRY AGAIN..";
}
else{
header('Location: myorders.php');
}
} // SUBMIT
?>
</form>
</div>
As per my comment, remove data-dismiss="modal" from your submit button. data-dismiss="modal" is used to close the modal dialog. You already have it here
<button type="button" class="close" data-dismiss="modal">×</button>
I have a button that calls a modal form where the user can enter a name. I want the submit button in my modal to take that inputted string and append it as a parameter in a specific route. I can't find an example that shows how to get the modal input value into the route call.
Button code in view:
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
onClick="$('#myModal').modal()"
style="margin-top: 2px;">
New Name
</button>
Modal form code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper" style="width:50%">
<div class="modal-dialog vertical-align-center">
<div class="horizontal-alignment-helper">
<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">Create New Plan</h4>
</div>
<div class="modal-body">Enter a name for your new plan and we'll do the rest...
<p></p>
<div class="form-group form-group-lg">
<label for="firstname" class="control-label"> Plan Name:</label>
<div>
<input class="form-control" type="text" id="lg">
</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">Create Plan</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Route I want the submit button to invoke:
Route::get('create-plan/{plan_name}', ['uses' => 'GeneratePlanController#createplan'])->middleware('auth');
How can I get the user input from the form control <input class="form-control" type="text" id="lg"> into the route call as the {plan_name} parameter?
I'm working in Laravel 5.5 and PHP 7 on XAMPP. My modal form works fine, as does the route/controller when manually called. Just need to wire the two together.
Thanks in advance.
You could possibly use javascript onclick event for this:
<button type="button" class="btn btn-primary" onclick="window.location.href = '/create-plan/'+document.getElementById('lg').value;">Create Plan</button>
I am trying to save data inserted from a modal. I have tried the script in localhost its works perfect. After upload to Production, The "note" field not save into DB table. But my hidden type='hidden' name='leaveID' manage to save in DB table. Not sure why? Please help...
Below is my view file..
<button type="button" class="btn-cs btn-sm-cs" data-toggle="modal" data-target="#myModal" data-html="true" href="#" id="modal"><span class="fa fa-pencil"></span> Note</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<form action="<?php echo base_url('leave/note'); ?>" id="formid" method="POST" >
<textarea class="form-control" id="note" name="note" ><?=set_value('note')?></textarea>
<input type='hidden' name='leaveID' value="<?= set_value("leaveID", $leave->leaveID) ?>" />
</div>
<div class="modal-footer">
<button type="submit" name="submit" class="btn btn-info " >Add Note</button></div>
</div>
</form>
<script>
$("[data-toggle=modal]").popover({
html: true,
content: function() {
return $('#modal-header').html();
}
});
</script>
</div>
</div><?php } ?>
Manage to solve the issue. Just has some permission issue.