I'm trying to pass the user_id contained in my database to a form that's displayed within a Bootstrap Modal upon clicking a button.
The button:
<td id="fired">
<button class="btn btn-default btn-danger btn-xs fired" data-id="<?php echo $row['user_id']; ?>">
Fired
</button>
</td>
JQuery:
$(document).ready(function(){
$(".fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});
Modal:
<div class="modal fade" id="firedModal" tabindex="-1" role="dialog" aria-labelledby="firedModal" 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="firedModal">Fire Habbo</h4>
</div>
<form class="form-signin" role="form" action="" method="post">
<div class="modal-body">
<input type="text" class="form-control" placeholder="Firing Reason" name="fired_reason" required autofocus />
<input type="text" class="form-control" placeholder="Firing Tag" name="fired_tag" required />
<input type="text" class="form-control" placeholder="Date" name="fired_date" required />
<input type="text" class="form-control" placeholder="Status (MAY JOIN AS RECRUIT/PARDONED/NEVER REHIRE)" name="fired_status" />
<input type="hidden" class="form-control" name="user_id" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Fire</button>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</form>
</div>
</div>
</div>
However, on clicking the button the modal shows but the value of the user_id input is not filled by the row's user_id. What am I doing wrong? Thanks.
Modify your code , with this one.
<input type="hidden" class="form-control" id="user_id" name="user_id" value="" />
$(document).ready(function(){
$("#fired").click(function(){
$("#user_id").val($(this).attr('data-id'));
$('#firedModal').modal('show');
});
});
Related
I am trying to display data in the Modal when I click the button. This is the HTML code I wrote everything is looking fine but it won't open the Modal when I click the button. If I put an alert inside the script it popup when I click the button but anything else like the modal is not working. What I am doing wrong?
<tr th:each="course : ${courses}">
<td th:text="${course.courseid}"></td>
<td th:text="${course.name}"></td>
<td th:text="${course.year}"></td>
<td th:text="${course.syllabus}"></td>
<td th:text="${course.semester}"></td>
<td th:text="${course.attendance}"></td>
<td>
<a th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
<script>
function openModal() {
$(document).ready(function(){
event.preventDefault();
var href = $(this).attr("href");
$.get(href, function(course, status){
$(".editForm .courseid").val(course.courseid);
$(".editForm .name").val(course.name);
$(".editForm .year").val(course.year);
$(".editForm .syllabus").val(course.syllabus);
$(".editForm .semester").val(course.semester);
$(".editForm .attendance").val(course.attendance);
});
$("#editModal").modal('show');
});
}
</script>
<div class="editFrom" id="editModal">
<form th:action="#{/courses/editCourse}" method="POST">
<div class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#383434">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="editModal">Update Course</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" style="background-color:#383434">
<label for="courseidEdit" class="col-form-label">ID</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
<label for="nameEdit" class="col-form-label">Name</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />
<label for="yearEdit" class="col-form-label">Year</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
<label for="syllabusEdit" class="col-form-label">Syllabus</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />
<label for="semesterEdit" class="col-form-label">Semester</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
<label for="attendanceEdit" class="col-form-label">Attendance</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
Hopefully this work.
<tr th:each="course : ${courses}">
<td th:text="${course.courseid}"></td>
<td th:text="${course.name}"></td>
<td th:text="${course.year}"></td>
<td th:text="${course.syllabus}"></td>
<td th:text="${course.semester}"></td>
<td th:text="${course.attendance}"></td>
<td>
<a th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
<script>
function openModal() {
event.preventDefault();
var href = $(this).attr("href");
$.get(href, function(course, status){
$(".editForm #courseidEdit").val(course.courseid);
$(".editForm #nameEdit").val(course.name);
$(".editForm #yearEdit").val(course.year);
$(".editForm #syllabusEdit").val(course.syllabus);
$(".editForm #semesterEdit").val(course.semester);
$(".editForm #attendanceEdit").val(course.attendance);
});
$("#editModal").modal('show');
}
</script>
<div class="modal" id="editModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#383434">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="editModal">Update Course</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" style="background-color:#383434">
<form class="editForm" th:action="#{/courses/editCourse}" method="POST">
<label for="courseidEdit" class="col-form-label">ID</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
<label for="nameEdit" class="col-form-label">Name</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />
<label for="yearEdit" class="col-form-label">Year</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
<label for="syllabusEdit" class="col-form-label">Syllabus</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />
<label for="semesterEdit" class="col-form-label">Semester</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
<label for="attendanceEdit" class="col-form-label">Attendance</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Update:
Adding here, the comments I added on the question.
you don't need document.ready event, because you are opening modal by clicking on the button that means your dom is already ready.
Modal and Form are not in correct hierarchy, Form should be inside Modal, and you should call method .modal('show') on modal instance not on form.
As in comment your data is not reflected in controls, the reason could be $(".editForm .courseid"), $(".editForm .name") etc. are not present in the html. (Updating the answer with correct selectors).
Add data-bs-toggle & data-bs-target, works for bootstrap
<a data-bs-toggle="modal" data-bs-target="#editModal" th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()">
<img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" />
</a>
let myOtherModal = new bootstrap.Modal(
document.getElementById("signUpModal"),
{}
);
myOtherModal.show();
let myModal = new bootstrap.Modal(document.getElementById("myModal"), {});
myModal.show();
I have the above code on the js file linked to the layout page. It works out with the first modal, that correctly pops up when the page is loaded, but does not work with the second one. It doesn't work also when I move myOtherModal.show() to after the myModal variable declaration...
Why does order matters here and how can I make all modals work?
HMTL code - view "profile"
<div
class="modal fade"
id="myModal"
tabindex="-1"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/login" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Log In</button>
</form>
</div>
</div>
</div>
</div>
HTML code - view "index"
<div
class="modal fade"
id="signUpModal"
tabindex="-1"
aria-labelledby="signUpModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signUpModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/signup" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
I have to develop a CRUD function to manage a DB. The button EDIT and DELETE open modal window and interact with the DB. What I cannot get is that the script works perfectly for EDIT but seems to be ignored for DELETE...what is wrong?
Those are my routes:
Route::get('/', 'DataController#overview');
Route::get('/myproject', 'ProjectsController#getForm');
Route::post('/myproject/create', 'ProjectsController#create');
Route::post('/myproject/update', 'ProjectsController#update');
Route::post('/myproject/delete', 'ProjectsController#delete');
Route::get('/upload','DataController#showform');
Route::post('/upload', 'DataController#read_xsl');
Route::get('/jobcontents', 'DataController#showscrape');
Route::post('/jobcontents', 'DataController#scrape');
This is my controller:
public function update(Request $request)
{
#$projectID = \DB::table('projects')->select('id')->get(),
try
{
//Find the project id in Project_model
#var_dump($request->toArray());
#var_dump($request->get('id'));
#exit;
$project = Project_model::findOrFail($request->get('id'));
//Set project object attributes
$project->name = $request->get('name');
$project->description = $request->get('description');
// Save/update project.
$project->save();
#return view('form_project')->with('project', $project);
return redirect()->back()->with('project', $project);
#return back();
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
public function delete(Request $request)
{
try
{
var_dump($request->toArray());
exit;
$project = Project_model::findOrFail($request->get('id'));
$project->delete();
return redirect()->back()->with('project', $project);
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
This is my blade:
//search and retrieve data from Modal
$(document).ready(function() {
$('#editModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var name = button.data('myname')
var description = button.data('mydesc')
var project_id = button.data('projectid')
var modal = $(this)
//put the values in modal <input>
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #description').val(description);
modal.find('.modal-body #project_id').val(project_id);
})
$('#deleteModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var projctid = button.data('projid')
var modal = $(this)
modal.find('.modal-body #projid').val(projctid);
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
<h3 class="jumbotron">Create here your project</h3>
<form method="post" id="projectform" class="w3-container w3-light-grey" action={{action( 'ProjectsController#create')}} enctype="multipart/form-data">
{{csrf_field()}}
<p>
<label>Project Name</label>
<input class="w3-input w3-border w3-round" name="name" type="text"></p>
<p>
<label>Project Description</label>
<input class="w3-input w3-border w3-round" name="description" type="text"></p>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
</form>
</div>
<div class="container-fluid">
<h3 class="jumbotron">Your Projects</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
<th>created_at </th>
<th>updated_at </th>
</tr>
</thead>
<tbody>
#if(isset($project_data)) #foreach($project_data as $project)
<tr>
<td> {{$project->id}} </td>
<td> {{$project->name}} </td>
<td> {{$project->description}} </td>
<td> {{$project->created_at}} </td>
<td> {{$project->updated_at}} </td>
<td>
<button type="button" class="btn btn-warning btn-detail open-modal" data-projectid="{{$project->id}}" data-myname="{{$project->name}}" data-mydesc="{{$project->description}}" data-toggle="modal" data-target="#editModal">Edit</button>
<button type="button" class="btn btn-danger btn-delete open-modal" data-projid="{{$project->id}}" data-toggle="modal" data-target="#deleteModal">Delete</button>
<button class="btn btn-info">See Jobs</button>
</td>
</tr>
#endforeach #endif
</tbody>
</table>
</div>
</div>
<!-- Modal (Pop up when edit button clicked) -->
<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="editModalTitle">Edit your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#update')}} id="frmSave" name="frmSave" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="project_id">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Project Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmSave" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal (Pop up when delete button clicked) -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="deleteModalTitle">Delete your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#delete')}} id="frmDel" name="frmDel" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="projid">
<p class="text-center">
Are you sure you want to delete this?
</p>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmDel" class="btn btn-primary" id="btn-delete" value="">Yes, delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, don't!</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
---EDIT---
These are the results when I run console.log(button) and console.log(projctid)
Hope this can help newbie like me in the future!
The problem was just related to Chrome CACHE REFRESH!!!
So be sure to clear cache (Shift+F5) and not only refresh the page when something does not work!
I have a form contain two inputs, username and password and a modal to confirm the task. After the modal gets open and try to submit, It does nothing:
<form action="login.php" method="POST" id="form1">
<input class="form-control" placeholder="Enter username" name="username" id="username">
<input class="form-control" placeholder="Enter password" name="password" id="password">
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
</form>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
</div>
<div class="modal-body">
is your username and password correct?
<table class="table">
<tr>
<th>username</th>
<td id="uname"></td>
</tr>
<tr>
<th>password</th>
<td id="psw"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
<script>
$('#submitBtn').click(function() {
$('#uname').text($('#username').val());
$('#psw').text($('#password').val());
});
$('#submit').click(function(){
$('#form1').submit();
});
</script>
Form data must be sent to the server using POST method. How to achieve this? Any answer is appreciated.
Your Modal form is outside the form tag so, it is not part of the HTML form and hence it doesn't Post any Data.The HTML form element defines a form that is used to collect user input and can contain other HTML Elements.
Also, you can use <input type="submit"> or <button type="submit"> to Submit the data directly to the form.
$('#submitBtn').click(function() {
$('#uname').text($('#username').val());
$('#psw').text($('#password').val());
});
$('#submit').click(function(){
$('#form1').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="login.php" method="POST" id="form1">
<input class="form-control" placeholder="Enter username" name="username" id="username">
<input class="form-control" placeholder="Enter password" name="password" id="password">
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
</div>
<div class="modal-body">
is your username and password correct?
<table class="table">
<tr>
<th>username</th>
<td id="uname"></td>
</tr>
<tr>
<th>password</th>
<td id="psw"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
</form>
Modal can't be displayed because there is value single quote (') javascript:edit in variable three. please resolve this problem...
I've been using htmlspecial character in javascript function, but still no effect in single quotes.
thanks before -_-.
<div class="modal fade" id="mEditComment" 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">Edit comment</h4>
</div>
<br>
<form name="editCmmt" class="form-horizontal" method="POST">
<fieldset>
<div class="control-group">
<!-- nama -->
<label class="control-label">Email</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- nama -->
<label class="control-label">Name</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- asal-->
<label class="control-label">Komentar</label>
<div class="controls">
<input type="text" name="comment" class="input-xlarge">
</div>
</div>
</fieldset>
<div class="modal-footer">
<input type="submit" name="edit" class="btn btn-success" value="Update">
<input type="reset" name="reset" class="btn btn-danger" value="reset">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//open modal dialog for edit
function edit(satu, dua, tiga) {
document.editCmmt.email.value = satu;
document.editCmmt.name.value = dua;
document.editCmmt.komentar.value = tiga;
$('#mEditComment').modal('show');
</script>
Edit comment
Simply escape the single quote with \
<a href="#"
onclick="javascript:edit('bagus#domain.com','Bagus Wicaksono','the prob\'lem was here')"
data-toggle="modal"
class="btn btn-success btn-lg">
Edit comment</a>
and it'll work. This tells the parser that you want a literal ' to be inserted into the string.