We Keep Coding

How to show Data from Javascript to form Modal HTML

I want to ask my problem hehe: in my case I want to show my data selector from JavaScript to my modal.
From my code, I have done using console.log() to view the data and it works, but it still didn't want to show in my form modal. Please help me where i'm missing it hehe ...
This is my JavaScript
<script>
let namaToko = document.getElementById("namaToko").innerHTML;
let alamatToko = document.getElementById("alamatToko").innerHTML;
let buttonDetail = document.querySelectorAll('.view-detail');
buttonDetail.forEach(function(_el) {
_el.addEventListener('click', function(e) {
jQuery('#modalUpdate').modal('show');
let row = document.querySelector(`[data-row-id="${e.target.dataset.id}"]`);
let nama = row.querySelector('td:nth-child(2)');
let alamat = row.querySelector('td:nth-child(3)');
console.log(nama);
console.log(alamat);
namaToko = nama;
alamatToko = alamat;
});
});
</script>
This is my form modal and the datatable
<!-- Bagian Edit Form Modal -->
<div class="modal fade modalUpdate" tabindex="-1" role="dialog" aria-hidden="true" id="modalUpdate">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Edit Data Toko</h4>
<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 = "library/services/formAction.php">
<input type="hidden" name="pageReferrer" value="http://localhost/city/?page=store" >
<input type="hidden" name="actionObject" value="toko" >
<input type="hidden" name="actionType" value="update" >
<div class="form-group">
<label for="namaToko" class="col-form-label">Nama Toko</label>
<input type="text" class="form-control" id="namaToko" placeholder="Masukkan Nama Toko" name="namaToko" required>
</div>
<div class="form-group">
<label for="alamatToko" class="col-form-label">Alamat Toko</label>
<input type="text" class="form-control" id="alamatToko" placeholder="Masukkan Nama Toko" name="alamatToko" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Akhir Edit Bagian Modal -->
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Toko</th>
<th>Alamat</th>
<th>Status</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php
$n=1;
$toko = getDataToko();
while ($dataToko = mysqli_fetch_array($toko)) {
if($dataToko['status_ot']==1)
{
$status = "Aktif";
$idStatus = "1";
}
if($dataToko['status_ot']==2)
{
$status = "Tidak Aktif";
$idStatus = "2";
}
?>
<tr data-row-id="<?= $dataToko['id_ot'] ?>">
<td>
<?php echo $n++; ?>
</td>
<td>
<?php echo $dataToko['nama_ot'] ?>
</td>
<td>
<?php echo $dataToko['alamat_ot'] ?>
</td>
<td>
<?php echo $status ?>
</td>
<td>
<button type ="button" class ="view-detail btn btn-success" data-id="<?= $dataToko['id_ot'] ?>"> Edit </button>
<button type = "button" class = "btn btn-danger deletebtn"> Delete </button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
And this is the picture where i'm click the Edit Button, and the data was showing in the console but didn't show up in my modal form:

If you give your form a name you can then set its input values using their name.
<form name="myForm" method = "post" action = "library/services/formAction.php">
const myForm = document.forms.myForm;
myForm.elements.namaToko.value = namaToko;
myForm.elements.alamatToko.value = alamatToko;

To set value
jQuery("#modalUpdate #namaToko").val(nama.innerText);
jQuery("#modalUpdate #alamatToko").val(alamat.innerText);

JS onclick event doesn't work in firefox but work in chrome based on codeigniter & bootstrap

I have this code to fill the field based on data in table triggered by on click updateinputSediaModal that echo 1 data-id to trigger ajax function for populate the updateinputSediaModal field forms, it populate function work in chrome browser but not in firefox.
In my View Page
<table id="inputsedia_tb" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kode Persediaan</th>
<th scope="col">Jurusan</th>
<th scope="col">Uraian</th>
<th scope="col">Satuan</th>
<th scope="col">User Penginput</th>
<th scope="col">Tanggal Input</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
<?php foreach ($sediaMaster as $sm) : ?>
<tr>
<th scope="row"><?= $i; ?></th>
<td><?= $sm['id_sedia']; ?></td>
<td><?= $sm['nama_jur']; ?></td>
<td><?= $sm['nama_sedia']; ?></td>
<td><?= $sm['sedia_satuan']; ?></td>
<td><?= $sm['user_input']; ?></td>
<td><?= $sm['tgl_input']; ?></td>
<td>
Ubah
Hapus
</td>
</tr>
<?php $i++ ?>
<?php endforeach; ?>
</tbody>
</table>
<!-- Modal Update Menu -->
<div class="modal fade" id="updateinputSediaModal" tabindex="-1" role="dialog" aria-labelledby="updateinputSediaLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateinputSediaLabel">Update Data Persediaan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="<?= base_url('persediaan/updatemasterSedia') ?>" method="post">
<div class="modal-body">
<input type="hidden" name="id_sediaUpd" id="id_sediaUpd">
<div class="form-group">
<input type="text" class="form-control" id="namasediaUpd" name="namasediaUpd" placeholder="Nama Barang Praktik">
</div>
<div class="form-group">
<input type="text" class="form-control" id="satuanUpd" name="satuanUpd" placeholder="Satuan">
</div>
<div class="form-group">
<input type="text" class="form-control" id="nikUpd" name="nikUpd" value="<?= $user['nik']; ?>" readonly>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Ubah</button>
</div>
</form>
</div>
</div>
</div>
In my footer page
<script>
//script update input persediaan (persediaan/input persediaan)
$('.updateinputSediaModal').on('click', function() {
const id = $(this).data('id');
$.ajax({
url: "<?= base_url('persediaan/getSediaid'); ?>",
data: {
id: id
},
method: 'post',
dataType: 'JSON',
success: function(data) {
$("#id_sediaUpd").val(data[0].id_sedia);
$("#namasediaUpd").val(data[0].nama_sedia);
$("#satuanUpd").val(data[0].sedia_satuan);
$("#nikUpd").val(data[0].user_input);
}
});
});
</script>
can I get explain how this happening ?

I can't see where you are defining jQuery, so are you getting $ is not defined error?
Another thing I notice is you have $('.updateinputSediaModal') but I do not see any class called updateinputSediaModal however I do see this element;
<div class="modal fade" id="updateinputSediaModal" ...
So perhaps change $('.updateinputSediaModal') to be $('#updateinputSediaModal')?
As it is an ID not a CLASS.

Onclick function not working with custom popup

I have created custom popup to show my records.
I am using CodeIgniter, I am fetching records from database and display on the view page which is working.
Now I have records in the view page like this
EmpName EMPID Mobile No. Status Action
xyz 122 0012141010 Pending view archive
mnb 123 0124541021 Pending view archive
poiu 124 0000000000 Approved view archive
What I am doing is, When user click on " pending" then it will ask for confirmation popup "Are you sure want to continue?" If the user clicks on "Later" button then the popup will close. It will not take any action. There is no issue till now.
Now let's talk about Sure button. Sure button not taking any action. I don't understand why it's not calling the submit action. Even it's not working on the archive.
Note: I don't want to use confirm() or any alert() popup
View page
<div class="white_bg pad0 m_b_20">
<div class="emp_list">
<div class=" ">
<?php if (!empty($get_emp_records)) {?>
<table cellspacing="0" id="tableData">
<thead>
<tr>
<th class="" width="3%"> <input type="checkbox" id="selectall" />
</th>
<th class="" width="15%"> EmpName </th>
<th class="" width="7%"> EMP ID</th>
<th class="" width="11%"> Mobile No. </th>
<th class="" width="13%"> Status </th>
<th class="" width="23%"> Action </th>
</tr>
</thead>
<?php
foreach ($get_emp_records as $row)
{ $encryption_id=base64_encode($this->encryption->encrypt($row->id));//encrpt the id
?>
<tbody>
<tr>
<td width="3%"><input type="checkbox" name="crm" class="crm_select" value="0" /></td>
<td>
<?php echo $row->firstname; echo $row->lastname;?>
</td>
<td>
<?php echo $row->employee_id;?>
</td>
<td>
<?php echo $row->mobileno;?>
</td>
<?php if ($row->is_approved == 1): ?>
<td>Approved</td>
<?php else: ?>
<td>
<span>Pending</span>
</td>
<?php endif; ?>
<td>View
Archive
</td>
</tr>
<!--conformation popup-->
<div class="confirmation_alert" id="popup-<?=$row->id;?>" style="display: none;">
<div class="opacity"></div>
<div class="profile_content">
<div class="profile_header clearfix">
x
<div class="profile_name_pic"> Confirmation!!! </div>
<div class="profile_header_right">
</div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<h3>Are you sure want to continue?</h3>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
</div>
</div>
</tbody>
<?php } ?>
</table>
<?php }else{echo "No record found";}?>
</div>
</div>
</div>
Script
var url = "<?php echo base_url();?>";
function approve(obj) {
var id = $(obj).data('id');
$("#popup-" + id).show();
var el = document.getElementById("confirm");
if (el.addEventListener) {
el.addEventListener("click", function() {
//alert("clicked");
window.location = url + "Employee_control/approved_user?key=" + id;
});
}
return false;
}
function closePopup(obj) {
var id = $(obj).data('id');
$("#popup-" + id).hide();
};

Hope this will help you :
Since your r not submitting any form you should change your button type from submit to button like this :
<div class="profile_footer clearfix">
<button type="button" class="btn_default submit_btn" id="confirm">Sure</button>
<button type="button" class="btn_default edit_btn" onclick="closePopup(this)" data-id="<?=$row->id;?>">Later</button>
</div>
Your js code should be like this :
var url="<?php echo base_url();?>";
function approve(obj)
{
var id = $(obj).data('id');
$("#popup-"+id).show();
$('.submit_btn').on('click',function(e) {
alert('hi i am working');
window.location = url+"Employee_control/approved_user?key="+id;
e.preventDefault();
});
}
</script>

$(document).ready(function(){
var modalConfirm = function(callback){
$(".btn-confirm").on("click", function(){
$("#mi-modal").modal('show');
});
$("#modal-btn-si").on("click", function(){
callback(true);
$("#mi-modal").modal('hide');
});
$("#modal-btn-no").on("click", function(){
callback(false);
$("#mi-modal").modal('hide');
});
};
modalConfirm(function(confirm){
if(confirm){
alert('delete works fine');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type='button' value="delete" class="btn btn-danger btn-confirm">
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Do you want to delete?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" id="modal-btn-si"><i class="icon-ok icon-white"></i> Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no"><i class="icon-ban-circle icon-white"></i> No</button>
</div>
</div>
</div>
</div>

Hope it will work, try adding click event on idof submit
try using
$('#confirm').click(function()
{
// do tricks
});

pop up form data not insert in database

I'm trying to insert data to my PHP using ajax post method.I have passed the first form data to hidden value in first script , but data is not inserted in database.Now I want to pass those variables (response.lastname, response.firstname ) into my database.Please help me to solve this issue. Any example will be very useful.. thank u in advance.
php ajax
<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> <form role="form" id="add_name" method="post" enctype="multipart/form-data" action="">
<div class="modal-body">
<table class="table">
<tr>
<th>Last Name</th>
<td id="lname" name="lname" ></td>
</tr>
<tr>
<th>First Name</th>
<td id="fname" name="fname"></td>
</tr>
<tr><td>name</td>
<td><input type="text" name="nam"></td>
</tr> </table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
<button type="submit" class="btn btn-success" id="submit" name="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</form><div id="response"></div>
<script>
$(document).ready(function(){
$('#submitBtn').click(function() {
$('#lname').text($('#lastname').val());
$('#fname').text($('#firstname').val());
var fname = $('#firstname').val();
$('#fname').val(fname);
alert(fname);
var laname = $('#lastname').val();
$('#lname').val(laname);
alert(laname);
});
});
</script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var lname = $('#lname').val();
var fname = $('#fname').val();
alert(lname);
$.ajax({
url:"insert.php",
method:"POST",
data:$('#add_name').serialize(),
beforeSend:function(){
$('#response').html('<span class="text-info">Loading response...</span>');
},
success:function(data){
$('form').trigger("reset");
$('#response').fadeIn().html(data);
setTimeout(function(){
$('#response').fadeOut("slow");
}, 5000);
}
});
});
});
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "demoss");
$name = mysqli_real_escape_string($connect, $_POST["lname"]);
$message = mysqli_real_escape_string($connect, $_POST["fname"]);
$query = "INSERT INTO tbl_form(name, message) VALUES ('".$name."', '".$message."')";
if(mysqli_query($connect, $query))
{
echo '<p>You have entered</p>';
echo '<p>Name:'.$name.'</p>';
echo '<p>Message : '.$message.'</p>';
}
?>

Try This:
<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>
<form role="form" id="add_name" method="post">
<div class="modal-body">
<table class="table">
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" id="lname"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>name</td>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="submit">
<i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</form>
<div id="response"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submit').click(function () {
var lname = $('#lname').val();
var fname = $('#fname').val();
alert(lname);
$.ajax({
method: "POST",
url: "insert.php",
data: $('#add_name').serialize(),
beforeSend: function () {
$('#response').html('<span class="text-info">Loading response...</span>');
},
success: function (data) {
$('form').trigger("reset");
$('#response').fadeIn().html(data);
setTimeout(function () {
$('#response').fadeOut("slow");
}, 5000);
}
});
});
});
</script>

data:$('#add_name').serialize(), - this convert inputs / textareas in form to one string for url. Your form not have inputs. Try
alert($('#add_name').serialize()) or<br>
alert($('#add_name').serialize().toSource()) // firefox <br>
And, may be second problem, if you call two times $(document).ready, may be rewrite first code with second. Combine to one $(document).ready.<br>
$(document).ready(function(){ callfunction1(); callfunction2(); }

How to access correctly to php variable from a query using a modal bootstrap? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a table where is showed data from a table in a data base. it works but I'm using bootstrap and I added a modal element, when I press the button I get the modal with a list of items that I can choose, but I need to get the current variable and I don't know what happen. If I press the button I receive the first item of my query
<?php
$stmt = $pdo->prepare("SELECT nombre, descripcion, costo FROM tramite WHERE categoria = :categ");
$result = $stmt->execute(array("categ"=>"tramites"));
?>
<table class="table table-bordered">
<tr>
<td><b> Nombre</b> </td>
<td><b> Descripción </b></td>
<td><b> Costo </b></td>
<td><b> Oficina(s) </b></td>
<td><b> Requisito(s) </b></td>
</tr>
<?php
if ($result = $stmt->fetch())
{
do{
?>
<tr>
<td> <?php echo utf8_encode($result['nombre']) . '<br>'; ?> </td>
<td> <?php echo utf8_encode($result['descripcion']) . '<br>'; ?> </td>
<td> <?php echo utf8_encode($result['costo']) . '<br>'; ?> </td>
<?php
$nombre = $result['nombre']; // con esta variable consulto oficinas y requisitos
$stmtOficina = $pdo->prepare("SELECT oficina_nombreSitio FROM tramite_oficina WHERE tramite_nombre = :nombre");
$resultOficina = $stmtOficina->execute(array("nombre"=>$nombre));
?>
<td> <?php do{ echo utf8_encode($resultOficina['oficina_nombreSitio']) . '<br><br>'; } while ($resultOficina = $stmtOficina->fetch());?>
<button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo utf8_encode($nombre); ?>" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Añadir
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Nuevo lugar</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="form-group">
<?php echo utf8_encode($nombre); ?>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>
<script>
$('#exampleModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Nuevo lugar a ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
</td>
<td> null </td>
</tr>
<?php
} while ($result = $stmt->fetch());
}
?>
</table>

You are targeting id, which is problem. Id must be page unique and you create more same ids in the loop.
Change id target <button data-target="#exampleModal" to class target data-target=".exampleModal".
Then <div class="modal fade" id="exampleModal" to <div class="modal fade exampleModal"
Look at example in bootstrap manual.

You must add ID to each entry in database (if you don't have).
Then, in loop create modal for each entry.
do{
// Your table
// Button that opens modal
echo '<button type="button" data-toggle="modal" data-target="#' . $result['id'] . '" data-whatever="<?php echo utf8_encode($nombre); ?>" class="btn btn-default btn-sm">';
// Creating modal
echo '<div class="modal fade" id="' . $result['id'] . '" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';
// Continue modal ....
}
So, for each entry eill be generated modal with <ID> and you can open it with calling <ID>.