Develop Reference

Remove rows from a search filter table in jquery

Hello i am trying to make a rest button that removes the rows of the table not only the date inside the textboxes
<form id="advanceSearchForm">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<i class="la la-filter"></i><span>Advanced filter</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse " aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<section class="review-section">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-review review-table mb-0" id="table_achievements">
<thead>
<tr>
<th style="width:40px;"></th>
<th></th>
<th></th>
<th></th>
<!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
</tr>
</thead>
<tbody id="table_achievements_tbody">
<tr>
<th>1</th>
<th>
<select class="form-control" id="fieldName" style="width:280px;">
<option selected="selected" value="0">Field Name</option>
<option value="1">Div1</option>
<option value="2"> Div2</option>
</select>
</th>
<th>
<select class="form-control" id="actionName" style="width:280px;">
<option selected>Select action</option>
<option>Equals</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</th>
<th><input type="text" id="text2" class="form-control" placeholder="Enter Value" style="width:280px;"></th>
<th style="width: 120px;">
<select class="form-control sell" name="argSelect" >
<option value="Arg">Argument</option>
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="ONLY">ONLY</option>
</select>
</th>
<th style="width:54.58px;"></th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<button type="reset" value="Reset" class="btn btn-secondary btn-sm">clear</button>
</div>
</div>
</div>
</div>
</form>
This code is for the advance query search to add rows if you select AND or OR from the dropdown
$(function() {
$(document).on('change','.sell', function() {
var id = $(this).closest("table.table-review").attr('id'); // Id of particular table
var val = $(this).val();
if (val == "AND" || val == "OR") {
console.log(id);
var div = $("<tr />");
div.html(GetDynamicTextBox(id));
$("#" + id + "_tbody").append(div);
$(".fieldName2").select2();
$(".actionName2").select2();
}
else{
$(this).closest("tr").next().remove();
}
});
$(document).on("click", "#comments_remove", function() {
$(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
$(this).closest("tr").remove();
});
function GetDynamicTextBox(table_id) {
//$('#comments_remove').remove();
var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;
return '<td>' + rowsLength + '</td>' +
'<td><select name = "DynamicTextBox" class="select form-control fieldName2" value = "" style="width:280px;"><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
'<td><select name = "DynamicTextBox" class="select form-control actionName2" value = "" style="width:280px;"><option>Select action</option><option>Equals</option><option>Greater than</option><option>Less than</option></select></td>' +
'<td><input type="text" name = "DynamicTextBox" class="form-control" value = "" placeholder="Enter Value" style="width:280px;"></td>' +
'<td><select class="form-control sell" name="argSelect" id="mySelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
'<td style="width:40px;"><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'
}
});
The problem is in this one, i want to removes the rows and leave only the first one when i click the "clear" button
jQuery($ => {
$('#advanceSearchForm').on('reset', () => {
$('#fieldName').val('0').trigger('change');
$('.fieldName2').val('Field Name').trigger('change');
$('#actionName').val('Select action').trigger('change');
$('.actionName2').val('Select action').trigger('change');
$(this).closest("tr").remove();
});
});

all dataTable pages becomes one when being refreshed via AJAX

I was trying to implement this guide from this page: How to update an HTML table content without refreshing the page?
I somehow managed to implement it, unfortunately the Client-Side dataTable is destroyed when refreshing it.
By destroyed, all the data in the dataTable is in a single page.
This is the table.
<table id="earnings_amendment_account" class="table table-bordered" style="table-layout: fixed; display: none">
<thead>
<th></th>
<th>Account Code</th>
<th>Account Title</th>
<th>Account Type</th>
<th>Tools</th>
</thead>
<tbody id="table-body">
<?php include 'tableBody.php';?>
</tbody>
</table>
This is the tableBody.php
<?php include 'backend/conn.php'; ?>
<?php
$params=array();
$sql = "SELECT accountcode,accounttype,accounttitle,accounttype,postedby,dateposted,approvedby,dateapproved FROM earningsamendmentaccount";
$query = sqlsrv_query($conn, $sql, $params, array("Scrollable" => SQLSRV_CURSOR_KEYSET));
if ($query === false ) { echo "Error (sqlsrv_query): ".print_r(sqlsrv_errors(), true); exit; }
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr data-key-1='".$row['postedby']."' data-key-2='".$row['dateposted']."' data-key-3='".$row['approvedby']."' data-key-4='".$row['dateapproved']."'>
<td class='details-control'></td>
<td>".$row['accountcode']."</td>
<td>".$row['accounttitle']."</td>
<td>".$row['accounttype']."</td>
<td>
<button class='btn btn-default btn-sm view btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-eye'></i> View</button>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-edit'></i> Edit</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-trash'></i> Delete</button>
" ?>
<?php if (empty($row['approvedby'])) { echo " <button class='btn btn-warning btn-sm approve btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-check-square-o'></i> Approve</button> "; } ?>
<?php "
</tr>
";
}
?>
This is my jQuery/AJAX - (earnings_amendment_account.php)
function SubmitFormData() {
var add = $("#add").val();
var add_accountcode = $("#add_accountcode").val();
var accounttitle = $("#accounttitle").val();
var accounttype = $("#accounttype").val();
var postedby = $("#postedby").val();
var dateposted = $("#dateposted").val();
$.post("earnings_amendment_account_add.php",
{
add: add,
add_accountcode: add_accountcode,
accounttitle: accounttitle,
accounttype: accounttype,
postedby: postedby,
dateposted: dateposted
},
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
$.get("tableBody.php", function(data) {
$("#table-body").html(data);
$("#earnings_amendment_account").DataTable().ajax.reload();
});
});
}
This is the modal being called.
<form autocomplete='off' id="myForm" class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">
<!-- Table Loader -->
<div class="form-group" id="earnings_amendment_account_modalload">
<div class="col-sm-9" id= "earnings_amendment_account_modalload" style="width:100%">
</div></div>
<div class="form-group">
<label for="accounttitle" class="col-sm-3 control-label">Account Title</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="accounttitle" name="accounttitle" style="text-transform:uppercase;width:90%" required>
</div>
</div>
<div class="form-group" hidden>
<label for="postedby" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="postedby" name="postedby" value="<?php echo $user['firstname'].' '.$user['lastname']; ?>" required>
</div>
</div>
<div class="form-group" hidden>
<label for="dateposted" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="dateposted" name="dateposted" value="<?php echo gmdate('Y-m-d h:i:s'); ?>" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default info btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="button" onclick="SubmitFormData();" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
<div id="results"></div>
</form>
This is the dataTable.
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-bordered">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
} return html += '</table>'; }
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
// Add event listener for opening and closing details
$('#earnings_amendment_account').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = earnings_amendment_account_table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Posted By : ' : tr.data('key-1'),
'Date Posted : ' : tr.data('key-2'),
'Approved By : ' : tr.data('key-3'),
'Date Approved : ' : tr.data('key-4')
})).show();
tr.addClass('shown');
} });
Is there a way for this to be fixed?

try use your datatable object
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
so on your jQuery/AJAX - (earnings_amendment_account.php) change $("#earnings_amendment_account").DataTable().ajax.reload(); to earnings_amendment_account_table.ajax.reload();

Javascript add / remove textbox

I have the below javascript and I cannot take the values from the textbox that code generates to the html
("#btnAdd").bind("click", function () {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td><textarea name = "prodcut_name" type="text" value = " ' + value + '" class="form-control" /></td>' + '" /></td>'+ '<td><textarea name = "product_directions" type="text" value = "' + value + '" class="form-control" /></td>' + '<td><button type="button" class="btn btn-danger remove">X</button></td>'
my html form that I need to take the values
<form action="{{action('ProductController#store', $id)}}" method="post">
<h5 class="text-center">Product</h5>
<section class="container">
<div class="table table-responsive">
<table class="table table-responsive table-striped table-bordered">
<thead>
<tr>
<td>Product Name</td>
<td>Details</td>
<td>Remove</td>
</tr>
</thead>
<tbody id="TextBoxContainer" >
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"></i>+ Add </button></th>
</tr>
</tfoot>
</table>
</div>
</section>

This is how you add text area using pure javascript.
let textAreaDiv = document.getElementById("textAreaDiv");
addButton.onclick = addTextArea;
function addTextArea() {
let textArea = document.createElement("TEXTAREA");
textArea.value = "Nice to see you";
textAreaDiv.appendChild(textArea);
}
<button id="addButton">
Add text Area
</button>
<div id="textAreaDiv">
</div>

body
<form action="server.php" method="post">
<div id="fields"></div>
<button id="btnAdd">Add</button>
<input type="submit" value="Submit">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
(function() {
let fieldIndex = 0
$('#btnAdd').click(() => {
// Create every textarea with different name
let field = $('<textarea>', {
name: `field${fieldIndex++}`
})
$('#fields').append(field)
return false
})
})()
</script>
Get values on server side
server.php
<?php echo json_encode($_POST) ?>

unable to update counter when deleting and creating new section jquery

/*creates phoens dynamically*/
var phoneList = [];
function add_phone() {
var index = phoneList.length+1;
phoneList.push('phone: '+index);
var divtest = '<div class="form-group removeclass'+index+'">'+
'<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+index+' )</span>'+
'<div class="col-sm-3 nopadding">'+
'<div class="form-group">'+
' <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div>'+
'<div class="col-sm-3 nopadding"><div class="form-group">'+
'<input type="text" class="form-control" name="b[]" value="" placeholder="Model"></div>'+
'</div><div class="col-sm-3 nopadding">'+
'<div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color">'+
'</div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> '+
'<select class="form-control" name="d[]">'+
'<option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option>'+
'<option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> '+
'<button class="btn btn-danger" type="button" onclick="remove_phone('+ index +');"> <span '+
'class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div '+
'class="clear"></div>';
$('#education_fields').append(divtest);
updatePhonePicker();
}
function remove_phone(rid) {
$("#phone_picker option[value='"+rid+"']").remove();
$('.removeclass'+rid).remove();
phoneList.splice(phoneList.indexOf(rid),1);
updatePhonePicker();
}
function updatePhonePicker(){
var options = '<option selected disabled>---</option>';
phoneList.forEach(function(element, index){
options+='<option value="'+element+'">'+element+'</option>'
})
$('#tab_logic').find('tr').each(function(ind,ele){
var r = $(ele).find("#phone_picker").empty().append(options);
});
}
/*Add details about phone added here*/
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker'><option selected disabled>---</option></select> </td><td><input name='mail"+i+"' type='text' placeholder='field 1' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='field 2' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
updatePhonePicker();
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Add Phone-->
<div class="panel panel-default">
<div class="panel-heading">Phone Information</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="input-group">
<div class="input-group-btn">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Add Phone.</span>
<button class="btn btn-success" type="button" onclick="add_phone();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<!--Individual phone information-->
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone selected additional details.</span>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
#
</th>
<th class="text-center">
Phone
</th>
<th class="text-center">
Type
</th>
<th class="text-center">
Carrier
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" title="Phone" id="phone_picker">
<option selected disabled>---</option>
</select>
</td>
<td>
<input type="text" placeholder='field 1' class="form-control"/>
</td>
<td>
<input type="text" placeholder='field 2' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Phone</a><a id='delete_row' class="pull-right btn btn-default">Delete Phone</a>
</div>
When clicking on 'Add Phone', I get the option to add as many phones as needed. Phone count (How many phones created) get added on the 'Phone selected additional details' select option when adding or removing a new phone.
My issue is that when I create 3 phone sections then remove phone #1 and add another phone again it give me the same phone counter (example added 1,2,3 removed 1 added another one get 1 and 1 again and it should be like that, it should be a unit counter(phone) everytime).
To be more specific steps go as follow:
click on 'add phone' one time and a 2nd time and a 3rd time.
click on the red button where it's title 'Phone(1)'.
check if the number of phone present match what is on the 'Phone' select/dropdown.
You will see that the number of phone display doesn't match what on select.

Your issue is in this line:
var index = phoneList.length+1;
Because you create new div with a class like removeclass1, removeclass2..... you can consider to get directly the last div and so extract the number instead to increment by one:
var index = 1;
if ($('#education_fields > div').length > 0) {
index = 1 + +$('#education_fields > div:last').attr('class').match(/.*removeclass(\d+).*/)[1];
}
From your comment:
Ok this is good but if you look down the table column 'Phone' and the select/dropdown, it seems not be getting updated when deleting 'phone'/section
You can change updatePhonePicker in order to build dynamically the options getting the data directly from the divs:
From:
phoneList.forEach(function(element, index){
options+='<option value="'+element+'">'+element+'</option>'
})
to:
$('#education_fields > div > span').each(function(idx, ele) {
var txt = ele.textContent.replace(/[()]/g, '').trim();
options+='<option value="'+txt+'">'+txt+'</option>'
})
var phoneList = [];
function add_phone() {
var index = 1;
if ($('#education_fields > div').length > 0) {
index = 1 + +$('#education_fields > div:last').attr('class').match(/.*removeclass(\d+).*/)[1];
}
phoneList.push('phone: '+index);
var divtest = '<div class="form-group removeclass'+index+'">'+
'<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+index+' )</span>'+
'<div class="col-sm-3 nopadding">'+
'<div class="form-group">'+
' <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div>'+
'<div class="col-sm-3 nopadding"><div class="form-group">'+
'<input type="text" class="form-control" name="b[]" value="" placeholder="Model"></div>'+
'</div><div class="col-sm-3 nopadding">'+
'<div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color">'+
'</div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> '+
'<select class="form-control" name="d[]">'+
'<option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option>'+
'<option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> '+
'<button class="btn btn-danger" type="button" onclick="remove_phone('+ index +');"> <span '+
'class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div '+
'class="clear"></div>';
$('#education_fields').append(divtest);
updatePhonePicker();
}
function remove_phone(rid) {
$("#phone_picker option[value='"+rid+"']").remove();
$('.removeclass'+rid).remove();
phoneList.splice(phoneList.indexOf(rid),1);
updatePhonePicker();
}
function updatePhonePicker(){
var options = '<option selected disabled>---</option>';
$('#education_fields > div > span').each(function(idx, ele) {
var txt = ele.textContent.replace(/[()]/g, '').trim();
options+='<option value="'+txt+'">'+txt+'</option>'
})
$('#tab_logic').find('tr').each(function(ind,ele){
var r = $(ele).find("#phone_picker").empty().append(options);
});
}
/*Add details about phone added here*/
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker'><option selected disabled>---</option></select> </td><td><input name='mail"+i+"' type='text' placeholder='field 1' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='field 2' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
updatePhonePicker();
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Add Phone-->
<div class="panel panel-default">
<div class="panel-heading">Phone Information</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="input-group">
<div class="input-group-btn">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Add Phone.</span>
<button class="btn btn-success" type="button" onclick="add_phone();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<!--Individual phone information-->
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone selected additional details.</span>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
#
</th>
<th class="text-center">
Phone
</th>
<th class="text-center">
Type
</th>
<th class="text-center">
Carrier
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" title="Phone" id="phone_picker">
<option selected disabled>---</option>
</select>
</td>
<td>
<input type="text" placeholder='field 1' class="form-control"/>
</td>
<td>
<input type="text" placeholder='field 2' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Phone</a><a id='delete_row' class="pull-right btn btn-default">Delete Phone</a>
</div>

I think your problem is in the first line of add_phone
var index = phoneList.length+1;
I would remove the "+1", because if you add your first item it get's the html class removeclass1, but has the index 0 in the phoneList array. To remove this phone you call removePhone(1), but actually its index is 0, so you remove no phone or rather a wrong phone.

You simply have to write another function like the updatePhonePicker() where you gonna update the numbers displayed inside the <span>
Here is the function:
1-First surround the counter display in a span and give it a class (counterClass): ....Phone <span class="counterClass">( '+index+' )</span>
2- Each row give it a class (.someClass)
function updatePhoneNumbers(){
var counter = i;
$('someClass').forEach(function(element, index){
var number = i-counter+1;
$(element).find('.counterClass').html(counter);
counter--;
})
}

Insert data from modal to MySQL (multiple modal on website)

I have problem with inserting data to MySQL from modal.
My modal:
6 komentarzy brak komentarzy
<a data-toggle=\"modal\" href=\"#add_desk_comm_{$desk_['desk_id']}\" data-target=\"#add_desk_comm_{$desk_['desk_id']}\" class=\"ediiit\">(dodaj)</a>
<div class=\"modal fade\" id=\"add_desk_comm_{$desk_['desk_id']}\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"edit_printer\" aria-hidden=\"true\">
<div class=\"modal-dialog\" role=\"document\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<h5 class=\"modal-title\" id=\"exampleModalLabel\">Dodaj komentarz do zgłoszenia</h5>
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">
<span aria-hidden=\"true\">×</span>
</button>
</div>
<form method=\"POST\" id=\"fr_{$desk_['desk_id']}\" action=\"".model_load('helpdeskmodel', 'addDeskComm', '')."\">
<div class=\"modal-body\">
<table class=\"table\">
<tbody>
<tr>
<td class=\"border-top-zero label\">Data zgłoszenia:</td>
<td colspan=\"2\" class=\"border-top-zero\">
<input type=\"number\" name=\"add_desk_comm_id\" id=\"inputPlace\" value=\"{$desk_['desk_id']}\" class=\"form-control\" autofocus>
</td>
</tr>
<tr>
<td class=\"border-top-zero label\">Data zgłoszenia:</td>
<td colspan=\"2\" class=\"border-top-zero\">
<input type=\"date\" name=\"add_desk_comm_date\" id=\"inputPlace\" class=\"form-control\" autofocus>
</td>
</tr>
<tr>
<td class=\"border-top-zero label\">Komentarz:</td>
<td colspan=\"2\" class=\"border-top-zero\">
<textarea name=\"add_desk_comm_opis\" rows=\"5\" id=\"inputDate\" class=\"form-control\" value=\"\" required=\"\" autofocus=\"\" style=\"margin-top: 0px; margin-bottom: 0px; height: 249px;\"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Anuluj</button>
<button type=\"submit_one\" name=\"add_desk_comm_sub_{$desk_['desk_id']}\" class=\"btn btn-warning\">Zapisz</button>
</div>
</form>
</div>
</div>
</div>
And form action
public function addDeskComm()
{
if(isset($this->__params['POST']['add_desk_comm_id']))
{
$add_desk_comm_id = $this->__params['POST']['add_desk_comm_id'];
$add_desk_comm_date = $this->__params['POST']['add_desk_comm_date'];
$add_desk_comm_opis = $this->__params['POST']['add_desk_comm_opis'];
$res = $this->__db->execute("INSERT INTO helpdesk_history (id, id_helpdesk, date, opis) SELECT NULL, '{$add_desk_comm_id}', '{$add_desk_comm_date}', '{$add_desk_comm_opis}' UNION ALL SELECT NULL, '{$add_desk_comm_id}', '{$add_desk_comm_date}', '{$add_desk_comm_opis}' LIMIT 1;");
}
return false;
}
Modal is in foreach and is repeated on the website (every row in the table has a modal). if you want to insert data into the mysql database, modal is executed as many times as there are rows in the table on the website. even modal id change does not help.
Any idea? I will add that I use only js bootstrap.