We Keep Coding

Submit form to add column in table

I have a table like this:
<table id="criteria-table">
<thead>
<tr>
<th rowspan="2" class="text-center align-middle">#</th>
<th rowspan="2" class="text-center align-middle">Employee</th>
<th colspan="3" class="text-center">Order</th>
</tr>
<tr>
<th class="text-center">Priority</th>
<th class="text-center">Criteria</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
<tr class="tr_template">
<td class="text-center">1</td>
<td class="text-center">Employee A</td>
<td class="text-center">75%</td>
<td class="text-center">10</td>
<td class="text-center">order</td>
</tr>
</tbody>
</table>
And I have 2 button in the end of this table:
<a class="btn btn-add-criteria btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD CRITERIA
</a>
<a class="btn btn-add-employee btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD EMPLOYEE
</a>
When I click add criteria button, a popup will open to type criteria data and submit:
<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content clear-form">
<!-- Body modal -->
<div class="modal-body">
<!-- Form -->
<form id="frm-add-criteria">
<div class="row">
<div class="col-lg-12">
<div class="m-form__group">
<div class="criteria-content">
<!-- Criteria -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Criteria</label>
<div class="input-group">
<select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
<option value="1">Order</option>
<option value="2">Contract</option>
<option value="3">Revenue</option>
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Priority</label>
<div class="input-group">
<input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
</div>
</div>
</div>
<!-- Amount -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Amount</label>
<div class="input-group">
<input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer modal -->
<div class="modal-footer">
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
<div class="m-form__actions m--align-right">
<button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
<span class="ss--text-btn-mobi">
<i class="la la-arrow-left"></i>
<span>CANCEL</span>
</span>
</button>
<button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
<span class="ss--text-btn-mobi">
<i class="la la-check"></i>
<span>SAVE</span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
After I submit the form in modal, it will add one more column like this for all employee row in table:
Here is my old table:
After submit form modal:
Same like this, when I click add employee, it will show a modal for me to choose employee, then it will insert one more employee row to this table with all criteria I add before.
Here is my JSFiddle to show you what I did.
I really don't know how to do this so forgive me if you feel I just give you about code not solution.
Hope you can give me a good advise to handle this.
Thank you very much!

You can use JS / JQuery DOM manipulation.
here's an example using JQuery and Bootstrap:
Table
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>John</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Person
</button>
I put an id to the table body (tbody) element so I can access it directly from script side using JQuery.
Modal
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Insert Person</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-6">
<label>Gender</label>
<select id="gender" class="form-control">
<option>Choose Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addPerson()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I put id on every input for JQuery access. and since we are not to sending it to a database or another http request, there's no need for a form.
The JQuery Script:
<script>
function addPerson() {
var name = $('#name').val();
var gender = $('#gender').val();
var html = '';
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + gender + '</td>';
html += '</td>';
$('#tableBody').append(html);
$('#name').val('');
$('#gender').val('Choose Gender');
}
</script>
first I make 3 variables to contain empty string, the value of name, and the value of gender. then I make a table row mock up and fill it with the values from name and gender on that empty string variable, after that I add the new data to the table using the $('#tableBody').append(html); command. and then refresh the form using $('#name').val('');and $('#gender').val('Choose Gender');. hit me up if you need more elaboration.

Autocomplete other field In Modal

I need some help in modal bootstrap. I want to make autocomplete name field when I choose id column table.
I have modal script like this :
My input field is like this :
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" name="name"/>
</div>
</div>
</div>
My modal script like this :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="1" >1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="2" >2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And then the javascript :
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
How to make name field can get autocomplete from id field ?

You can change the data-id value to match what you want.
function openmodal(input) {
$('#myModal').modal('show');
}
$(".hello").unbind().click(function(event) {
$("#input").val($(this).attr("data-id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);" />
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" id="input" name="name" />
</div>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="Robert">1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="Julia">2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

how to load dynamically generated table data into form inside modal?

I have a table which is dynamically generated. the table looks like:-
<table id="datatables" class="table table-striped table-no-bordered table-hover"
cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.N</th>
<th>Branch Name</th>
<th>Branch Location</th>
<th>Status</th>
<th class="disabled-sorting text-right">Actions</th>
</tr>
</tfoot>
<tbody>
<tr th:Each="b,iter : ${branches}">
<td th:text="${iter.index}+1"></td>
<td th:text="${b.branchName}"></td>
<td th:text="${b.branchLocation}"></td>
<td th:text="${b.status}"></td>
<td style="text-align: right;">
<button class="btn btn-warning" data-toggle="modal" data-target="#branchModal">Edit</button>
<button class="btn btn-warning">Deactivate</button>
</td>
</tr>
</tbody>
</table>
and i have bootstrap modal. now when i click edit button of the table i want to load the clicked table row data inside the form of modal.
<div class="modal fade" id="branchModal" 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">New message</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 for="branch-name" class="col-form-label">Branch Name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="branch-location" class="col-form-label">Branch Location:</label>
<textarea class="form-control" id="branch-location"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button style="margin-right:10px;" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
how can i achieve it ?
note:- i am not using jquery so solution with plain javascript will be appreciated.

If you have a function loadDataOnModal to handle displaying your modal, add this to your edit button:
th:onclick="| loadDataOnModal('${b.branchName}', '${b.branchLocation}')|"
I see you only need branch name & location in your modal body.

Hi simply run this code on the click event that opens your modal for each value you wish to change:
document.getElementById('recipient-name').value = 'Value you wish to set'
You can also access the value of the element you are clicking by passing in the event variable like so:
document.getElementById('clicked').addEventListener('click', event => {
document.getElementById('recipient-name').value = event.target.value
})
This is basic concept you can take it further from there...
Hope this helps

update and delete in the same table

in my project i have table(images). there is checkboxes column, when the user check record and press delete button record will be deleted. thats work fine.
then there is visible column(boolean) which is by default(true). So when record is checked and click hide/show button it will update visible value(from 1 to 0 or from 0 to 1)
My problem is that, delete and show/hide buttons work individually. i want both work at the same time. I don't know how combine them in the same table.
this is my view(in which only show/hide work)
<button type="submit" class="btn btn-danger" id="deleteImg"><i class="fa fa-trash"></i> Delete</button>
<form action="{{url('admin/images/hideimg')}}" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('post')}}
<div class="pull-right form-group" style="padding: 12px">
<button class="btn btn-warning" id="hideImg">
Hide/Show</button>
</div>
#if($images)
<table class="table panel panel-default" id="table">
<thead class="panel-heading">
<tr>
<th><input type="checkbox" id="options"> </th>
<th>Visible?</th>
<th>photo</th>
<th></th>
</tr>
</thead>
<tbody id="tablecontents" class="panel-body">
#foreach($images as $image)
<tr class="row1" data-id="{{ $image->id }}">
<td><input class="checkboxes" type="checkbox" id="option" name="checkBoxArray[]" value="{{$image->id}}" data-imageid="{{$image->id}}"></td>
<td>{{$image->visible == 1?'yes':'no'}}</td>
<td ><img src="/uploads/{{$image->path}}" id="img" ></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#endif
</form>
form action="delete/images" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('delete')}}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style="text-align: center" id="modalLabel">Delete Confirmation</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="text-center">Are you sure you want to delete the following service?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close</button>
<button type="submit" class="btn btn-danger" name="delete_all" value="Delete">
<span id="" class='glyphicon glyphicon-trash'></span> Delete</button>
</div>
</div>
</div>
</div>
</form>

Passing PHP variable to bootstrap modal

So I checked a lot of topics about this title but couldn't find a good answer to it.
So basically I have this table:
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered tablesorter">
<thead>
<tr>
<th>Email <i class="fa fa-sort"></i></th>
<th>Akcje <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
$subs = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$subs->bindParam(":id",$ID);
$subs->execute();
?>
<form method="post">
<?php foreach($subs as $sub){ ?>
<tr>
<td>
<?php echo $sub['adminEmail']; ?>
</td>
<td>
<input type="hidden" name="id">
<button type="button" value="<?php echo $sub["adminEmail"]; ?>" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-id="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
<button type="button" class='btn btn-warning btn-xs' data-toggle="modal" data-target="#myModalE"><span class="fa fa-edit"></span></button>
</td>
</tr>
<?php } ?>
</form>
</tbody>
</table>
</div>
</div>
So this is basically the table with users that have sub-admins and there's 1 action "Delete".
When someone clicks button delete, this modal will show:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<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="modal_nameDELETE">Sure?</h4>
</div>
<div class="modal-body">
Are you sure you want to remove sub-admin <label><?php echo $sub['adminEmail'];?></label> ?
<br>
</div>
<form method="post">
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
The problem is when there's for example 3 people in the table and I click the delete button for user 3, the modal pops-up but the email is wrong.