Modal not opening when I click on button

Modal not opening when I click on button - javascript

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>

Related

I just want to disable the Approve button in updating process with modal boostrap

This is the modal form that show after clicking the view button in my table.
Every field already have data value because I am updating a list.
Now I want to disabled the Approve button base on status which is "Pending" and "Approved"
<form action="code_book.php" method="POST">
<div class="modal fade" id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<input type="hidden" name="update_id" id="update_id">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Appointment Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- start modal content -->
<div class="modal-body">
<div class="mb-3">
<label for="#service" class="col-md-6">Appointment Date</label><label for="#description" class="col-md-6">Appointment Time</label><br>
<input type="text" class="col-md-6 inputdesign" name="date" id="date" readonly>
<input type="text" class="col-md-6 inputdesign" name="time" id="time" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Name</label><label for="#description" class="col-md-6">Contact</label><br>
<input type="text" class="col-md-6 inputdesign" name="username" id="username" readonly>
<input type="text" class="col-md-6 inputdesign" name="contact" id="contact" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Pet Name</label><label for="#description" class="col-md-6">Service</label><br>
<input type="text" class="col-md-6 inputdesign" name="bookpet_id" id="bookpet_id" readonly>
<input type="text" class="col-md-6 inputdesign" name="service_id" id="service_id" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-12">Complaint</label>
<input type="text" class="form-control inputdesign" name="complaint" rows="3" id="complaint" readonly>
</div>
<div class="mb-3">
<label for="#description" style="margin-top: 10px;" class="form-label">Status</label>
<input type="text" class="form-control inputdesign" name="status" id="status" placeholder="Enter the service" readonly>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>

You need some easy JavaScript for that, assuming you're just initializing the button once because the input is readonly.
$(document).ready(function() {
$('#datatableid tbody').on('click', '.updatebtn', function() {
$('#updatemodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#date').val(data[1]);
$('#time').val(data[2]);
$('#username').val(data[3]);
$('#contact').val(data[4]);
$('#bookpet_id').val(data[5]);
$('#service_id').val(data[6]);
$('#complaint').val(data[7]);
$('#status').val(data[8]);
// disable input if not approved
$('#updatedata').prop('disabled', data[8] !== 'Approved');
});
});
<input type="text" id="status" placeholder="Enter the service" value="Pending" readonly />
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>

How to update values for each columns of row from modal?

I have an HTML code like this:
<body>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
In modal code
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
name="nGiaSanPham">
</div>
</form>
</div>
And an Javascript code like this:
function editProductModal() {
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("th").each(function () {
document.getElementById("iMaSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cTenSanPham").each(function () {
document.getElementById("iTenSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cGiaSanPham").each(function () {
document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
});
});
}
I want when I click the button 'Chỉnh sửa' on any row, a modal will open and fill data from this row into this modal (the modal of bootstrap 4). I can edit on this modal, then I press a button to pass updated data to table. How to do it in function editProductModal() in file JS. Thank you so much

var $currentEditRow;
$(document).on("click", ".edit", function() {
$currentEditRow = $(this).parents("tr");
editProductModal($(this).parents("tr"));
});
function editProductModal(row) {
document.getElementById("iMaSanPham").value = $(row).find("th").text();
document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text();
document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, ''));
}
function update() {
$currentEditRow.find("th").text(document.getElementById("iMaSanPham").value);
$currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value);
$currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value);
$('#exampleModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 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">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="update()">Save</button>
</div>
</div>
</div>
</div>
When editing the current tr row, store the dom of the current row, so you can determine which line to update to in the modal.
You can try to update the row data in my code snippet.

You are improperly mixing inline onclick and jQuery click event listeners together.
Remove the function and the onclick and just use the jQuery code inside the function by itself to manage the event
You also don't need an each loop to access the elements within the row.
Simplified version:
$(document).on("click", ".edit", function() {
var $row = $(this).closest('tr'),
thText = $row.find('th').text(),
cTenSanPham = $row.find('.cTenSanPham').text(),
cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, '');
$('#iMaSanPham').val(thText);
$('#iTenSanPham').val(cTenSanPham);
$('#iGiaSanPham').val(cGiaSanPham);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
<tr>
<th>66</th>
<td class="cTenSanPham">Another Item</td>
<td class="cGiaSanPham">99.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Modal</h3>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>

.show() not working after 'display :block'

attached is my javascript and html.
in debug mode, I can confirm that 'display: none' changes to 'display :block'
but I don't see popupEventForm form open up.
Any ideas why?
Thanks,Peter
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>

You also have the bootstrap hide class included..
<div id="popupEventForm" class="modal hide" style="display: none;">
Change your js to this:
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show().removeClass('hide');
$('#eventTitle').focus();
}

You need to remove the "hide" class from the modal. As well as you can use .modal('show') to open the modal
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').removeClass('hide');
$('#popupEventForm').modal('show');
$('#eventTitle').focus();
}

Instead of using style "display:none" use $('#popupEventForm').hide();
and $('#popupEventForm').show();
Or you can use $('#popupEventForm').attr("display","block").

I can't retrieve the value typed in a text input using Javascript

I have a problem, when i try to retrieve the value I have typed in the text input, and I try to print it in alert , it shows nothing, the variable is empty
here is the code:
I have here the input textfield 'Montant', i would like to retrieve it using the onClick event on the button on the bottom
<form name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
<div class="modal-body">
<p>Veuillez saisir le montant à payer pour cette échéance</p>
<div class="form-group">
<label for="exampleInputEmail1">Montant:</label>
<input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-primary" onclick='return test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
</div></form>
here is the script:
<script>function test(a,b){
window.alert('a= '+a+'b= '+b);}</script>
it shows nothing, notice that i am using Bootstrap, and LARAVEL
here is a more detailed code I retreive it from my own project:
#foreach($inscriptions as $inscription)
<?php
// some treatments
?>
<tr class="{{$rowstyle}}">
<td><img src="images/{{ $inscription->photo }}"></td>
<td>{{ $inscription->cne }}</td>
<td>{{ $inscription->nom }}</td>
<td>{{ $inscription->prenom }}</td>
<td>{{ $inscription->ville }}</td>
<!-- the button who open the forms modal-->
<td>
<button class="btn btn-sm btn-primary btn-success" data-toggle="modal" data-target="{{"#smallModalEspece".$count}}">Espèce</button>
</td>
<td>
<a class="btn btn-sm btn-danger" href="{{ route('retirer',[ 'cne' => $inscription->cne ]) }}"><i class="fa fa-trash-o"></i></a>
<a href="{{ route('detailetudiant',[ 'id' => $inscription->id ]) }}" class="btn btn-sm btn-default">
<i class="fa fa-info-circle"></i> Détails
</a>
</td>
</tr>
<!-- the modal who contains the form -->
<div id="{{"smallModalEspece".$count}}" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Paiement en espèce</h4>
</div>
<form name="formEspece" method="get" action="{{route('EffectuerPaiement')}}" >
<div class="modal-body">
<h3>Le montant restant à payer pour l'étudiant {{\fc\etudiant::find($inscription->cne)->nom.' '.\fc\etudiant::find($inscription->cne)->prenom}} est : {{$paiement->montant-$totalPaiement}}</h3>
<p>Veuillez saisir le montant à payer pour cette écheance</p>
<div class="form-group">
<input type="hidden" name="MontantPaye" value="{{$paiement->montant-$totalPaiement}}"/>
<label for="exampleInputEmail1">Montant:</label>
<input required type="number" id="idMontant1"class="form-control" placeholder="Saisissez un montant" name="Montant" >
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="_token" value=" {{ csrf_token() }} ">
<input type="hidden" name="idpaiment" value="{{$paiement->idPaiement}}">
<input type="hidden" name="nbrEcheance" value="{{$nbrE}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="button" id="#buttonid" class="btn btn-primary" onclick='test(document.getElementById("idMontant1").value,{{$paiement->montant-$totalPaiement}})' value="valider"/>
</div>
</form>
</div>
</div>
</div>
#endforeach

ID's must be unique, but you use the same ID idMontant1 for each number-input.
(A browser may not guess which element you mean, he will always select the same input)
Possible solution:
you may omit the ID, instead pass the button as argument to test() .
Via the button you'll be able to find the desired input:
find the form(it's the form-property of the button)
find the input with the name Montant within the form(e.g. via element.querySelector)
Simple demo(I've removed the irrelevant markup)
function test(btn) {
var val = btn.form.querySelector('input[name="Montant"]').value;
alert(val);
}
<form>
<input type="number" name="Montant" value="12" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="34" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="56" />
<input type="button" onclick="return test(this)" value="valider" />
</form>
<form>
<input type="number" name="Montant" value="78" />
<input type="button" onclick="return test(this)" value="valider" />
</form>

add an id to the button and try this
<script>
$("#buttonid").click(function(){
var in = $("#idMontant1").val();
window.alert(in);});
</script>

You can use the below script:
<script>
function affich(montant){
windows.alert('montant');
}
</script>
Then in input you can do:
onclick="affich('montant')"

Passing value to form in Bootstrap Modal

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

Develop Reference

JavaScript is the programming language of the Web.

Modal not opening when I click on button - javascript

Related

I just want to disable the Approve button in updating process with modal boostrap

How to update values for each columns of row from modal?

.show() not working after 'display :block'

I can't retrieve the value typed in a text input using Javascript

Passing value to form in Bootstrap Modal

Categories

Resources