Develop Reference

Modal not opening when I click on button

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>

Deletion of data is done reverse order

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<br />
<div class="table-responsive">
<div align="right">
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%"> Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
<th width="15%">Delete</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
$id=$row['id'];
?>
<tr>
<td><?php echo $row["employee_name"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>
<td><button type="button" name="add" id="deleteBtn" data-toggle="modal" data-target="#delete_data_Modal" class="btn btn-info btn-xs ">delete</button></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<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">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<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"></h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<br />
<label>Enter Age</label>
<input type="text" name="age" id="age" class="form-control" />
<br />
<input type="hidden" name="employee_id" id="employee_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="delete_data_Modal" class="modal fade">
<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"></h4>
</div>
<div class="modal-body">
<form method="post" >
<p>Are You Sure Want to Delete this data?????</p>
</form>
</div>
<div class="modal-footer">
Delete
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!---delete.php--->
<?php
require_once('db.php');
$get_id=$_GET['id'];
// sql to delete a record
$sql = mysqli_query($conn,"Delete from employee where id = '$get_id' ");
// use exec() because no results are returned
if($sql)
{
header('location:index.php');
}
else
{
echo "not";
}
?>
This code is to edit, view and display the datas from the table using ajax through bootstrap modal box and which will display the error message after submiting the corresponding buttons. Now editing, updating and viewing datas are going successfully and also displaying error nessage successfully. But, during the time of deletion of data, when click on first delete button last datas are being deleting. Table structure and code for deletion are given above.

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')"

Show modal bootstrap with optional value from javascript with single quote

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.

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