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

To set radio button in the modal from a value using jquery

I am trying to set the radio button in the Modal by using the data attribute value. It works fine if I remove the hidden modal code. However, i want that code as I also use it to add new students(which I have not provided in code) and so i clear it on closing. The textbox works fine but the radio button stops working after selecting one student and then selecting another student.
For ex, I edit John and it works as expected. Now after clicking John and then i close and click Jane the radio button does not work. Is there a way where I can clear the content of the controls on closing the modal but also get the values back in on selection?
$(document).on('click', '.editStudent', function(e) {
var row = $(this).closest('tr');
var name = row.find('td.name').text().trim();
var qualified = $(this).attr("data-qualified");
if (name != null && name != "" && name != undefined) {
$("#ModalName").val(name);
}
if (qualified != null && qualified != "" && qualified != undefined) {
$("input[name='ModalQualified']").val([qualified.toLowerCase()])
}
$('#EditModal').modal('toggle');
})
$('#EditModal').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", false)
.end();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="tblStudent">
<thead>
<tr>
<th style="display:none;">Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none;"><input type="hidden" value="id1" /></td>
<td class="name">John</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
</tr>
<tr>
<td style="display:none;"><input type="hidden" value="id2" /></td>
<td class="name">Jane</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="true"> Edit</a></td>
</tr>
<tr>
<td style="display:none;"><input type="hidden" value="id3" /></td>
<td class="name">Jim</td>
<td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
</tr>
</tbody>
</table>
<div id="EditModal" class="modal fade" 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 Student</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<label>Student</label><br />
<input type="text" id="ModalName" class="form-control medium" />
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<label for="Refrigeration">Qualified</label>
<input type="radio" id="ModalQualified" name="ModalQualified" value="true" />Yes
<input type="radio" id="ModalQualified" name="ModalQualified" value="false" style="margin-left: 15px;" />No<br />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The ID of the radio would have to be different, and then use prop of element:
if(qualified.toLowerCase() == 'true')
$('#ModalQualifiedY').prop('checked',true)
else
$('#ModalQualifiedN').prop('checked',true)

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

Edit data on table row and save in database with ajax

I'm not very good(not at all) with ajax/js and will need a little bit help here.
I have table on page which I show data like this:
<table class="table table-bordered">
<thead>
<tr>
<th>People</th>
<th>Rate per person</th>
<th width="200px">Action</th>
</tr>
</thead>
<tbody>
<?php
$result_rates = $conn->query("SELECT * FROM rates Where user_id = 60");
if($result_rates->num_rows>0){
while ($row=$result_rates->fetch_all(MYSQLI_ASSOC)) {
foreach ($row as $r){
}
}
}
?>
<tr>
<td>1</td>
<td >$ <?php if($r['rate_one'] > 0){echo $r['rate_one'];}else{echo '0';} ?></td>
<td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td>$ <?php if($r['rate_two'] > 0){echo $r['rate_two'];}else{echo '0';} ?></td>
<td><button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button></td>
</tr>
I have also this modal on the Edit button click
<!-- Edit Item Modal -->
<div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Edit Item</h4>
</div>
<div class="modal-body">
<form action="includes/update.php" method="put">
<input type="hidden" name="<?php echo $r['rate_id']; ?>" class="edit-id">
<div class="form-group">
<label class="control-label" for="title">People:</label>
<input type="text" name="rate_one" class="form-control" />
</div>
<div class="form-group">
<label class="control-label" for="title">Prise:</label>
<input type="text" name="rate_two" class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
So when I click on Edit button modal is opened and the data is loaded. If I change some data and click on Submit I've got message for success but data isn't changed in database.
This is the ajax part
/* Edit Item */
$("body").on("click",".edit-item",function(){
var id = $(this).parent("td").data('id');
var rate_one = $(this).parent("td").prev("td").prev("td").text();
var rate_two = $(this).parent("td").prev("td").text();
$("#edit-item").find("input[name='rate_one']").val(rate_one);
$("#edit-item").find("input[name='rate_two']").val(rate_two);
$("#edit-item").find(".edit-id").val(id);
});
/* Updated new Item */
$(".crud-submit-edit").click(function(e){
e.preventDefault();
var form_action = $("#edit-item").find("form").attr("action");
var rate_one = $("#edit-item").find("input[name='rate_one']").val();
var rate_two = $("#edit-item").find("input[name='rate_two']").val();
var rate_id = $("#edit-item").find(".edit-id").val();
$.ajax({
dataType: 'json',
type:'POST',
url: form_action,
data:{rate_one:rate_one, rate_two:rate_two,rate_id:rate_id}
}).done(function(data){
getPageData();
$(".modal").modal('hide');
toastr.success('Rate Updated Successfully.', 'Success Alert', {timeOut: 5000});
});
});
When I look in dev console I see that rate_id isn't passed too. Can anyone help a bit?
$id = $_POST["rate_id"];
$post = $_POST;
$sql = "UPDATE rates SET rate_one = '".$post['rate_one']."'
,rate_two = '".$post['rate_two']."'
WHERE rate_id = '".$id."'";
it is for testing purposes and thats why it isn't with prepared statements

In form data you are not setting rate id in value. Please do the below changes.
<input type="hidden" name="edit-id" class="edit-id" value=<?php echo $r['rate_id']; ?>>
and also please share the php code of update.php for better help.

Ajax not working on multiple inserts - CI

I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.

Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">