My form inside a modal is not working PHP HTML - php

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>

Related

Sending one more value via POST PHP

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>';
}

Laravel modal form pass input to route as parameter

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>

Show modal based on PHP variable

I am having issues with displaying a modal when a user types a duplicate email or username, I have defined a boolean to store true when the modal should be shown and false when not. Even when I type a new username and email, the modal is still being shown and i am really confused why.
PHP:
if($checkUser->rowCount() > 0 || $checkEmail->rowCount() > 0){
$showModal = true;
}else{
$showModal = false;
HTML:
<?php if($showModal===false): ?>
<input type="submit" id="submit" name="submit" value="Register" readonly="readonly"/>
<?php else: ?>
<input type="" id="submit" name="submit" data-toggle="modal" data-target="#myModal" value="Register" readonly="readonly"/>
<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">Registration Error!</h4>
</div>
<div class="modal-body">
<p>You have entered a Username or Email Address which has already been registered!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php endif; ?>
I remove the type 'submit' from the modal input as it was causing the modal to break as the page was being refreshed.
Any help is appreciated, thanks.

Codeigniter- Bootstrap Popover Unable to save data

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.

Cannot display PHP $_POST variables in bootstrap modal

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.

Categories