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>
Related
I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" 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"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" 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"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach
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>';
}
I have two kinds of users in database (teacher / student)
How can i show some functions of my website ( button / review section )for teacher only and vice versa ?
i want to know the concept and any thing to help me
i got an error telling me that Undefined variable user while i am using the same query in another page
<div class="container">
<!-- Trigger the modal with a button -->
<button <?php if($user[0]['type']=="student")?> type="button" id="mah"
class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
>Add Course</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">Add Course</h4>
</div>
<div class="modal-body">
<form action="/action_page.php">
Name:<br>
<input type="text" name="firstname" value="">
<br>
Course Name<br>
<input type="text" name="Add_course" value="">
<br>
Course Link<br>
<input type="text" name="Course_link" value="...">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i would suggest have a different section for teacher and the other for student . Using logic based on the names "teacher/student" the have different teacher adds marks , register student. while student view his enrollment .
Since the code is incomplete do a var_dump() on your array $user your can see if the value exist
Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It was giving the values according to id.
<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>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div>
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I am very upset and confused and don't know what to do.
Any help would highly be appreciated
Edit:
After reading the comments; i have understood that only one id would be updated every time. How could i change the id dynamically and update data of that specific id and each time it should get only clicked id.
Controller Function to update:
public function updateCommunity($id, CommunityRequest $request) {
$updateCommunity = Community::findOrFail($id);
$updateCommunity->update($request->all());
return back();
}
View Buttons:
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
| Delete</td>
</tr>
#endforeach
Update
I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.
The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
| Delete</td>
</tr>
#endforeach
Notice new data-community attribute in edit button.
Now change your modal to provide a template for community edit form instead of providing a form for each community.
<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">Edit: <span></span></h4>
</div>
<div class="modal-body">
<form class="form-group" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
Now what you need to do it listen to edit community button click event (the one from view buttons), get data-community object from it, open a modal and fill with to fit edited community.
search for $('modal-title span') and .html() community name into it
search for $('#editCommunityForm') and change it's action to \update\{community_id}
search for $('button[form="editCommunityForm"]) and on click send form using ajax
There are many other ways to do this, better ways, it's just a simple example on how you can make it work.
Original answer
How come your submit button is outside of foreach but in an image it is displayed after each form? Also you are closing <div> tag in a loop that you opened before that loop.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
After you fix this you can simply edit form id by adding $editCommunity->id to it, like so:
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
Then you can edit button's form parameter to match your form:
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>
You should end up with this:
<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>
</div>
<div class="modal-body">
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
#endforeach
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
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.