I have a table where I have multiple rows, one of the columns being an input for the charge. The html is below:
<tbody>
#foreach($shipment_details as $sd)
<tr style="height:40px" tr id="row{{$sd->id}}">
<td style="width:8%;text-align:center;">
<input type="text" id="piecesNumber" class="form-control" placeholder="No. Pieces" required name="shipment_details[{{$sd->id}}][piecesNumber]" value="{{$sd->pieces_number}}">
</td>
<td style="width:16%;text-align:center;">
<select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][piecesType]">
#foreach($cPiecetypes as $cPt)
<option value="{{$cPt->id}}"
#if ($sd->pieces_type == $cPt->id) selected="selected"
#endif>{{$cPt->label}}</option>
#endforeach
</select>
</td>
<td>
<select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][rateType]">
#foreach($cRatetypes as $cRt)
<option value="{{$cRt->id}}"
#if ($sd->rate_type == $cRt->id) selected="selected"
#endif>{{$cRt->label}}</option>
#endforeach
</select>
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="weight" class="form-control" placeholder="Weight" required name="shipment_details[{{$sd->id}}][weight]" value="{{$sd->weight}}">
</td>
<td style="width:16.5%;text-align:center;">
<select id="hazmat" class="form-control full-width" required name="shipment_details[{{$sd->id}}][hazmat]">
<option value="0"
#if ($sd->hazmat = 0) selected="selected"
#endif>No</option>
<option value="1"
#if ($sd->hazmat = 1) selected="selected"
#endif>Yes</option>
</select>
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="description" class="form-control" placeholder="Description" required name="shipment_details[{{$sd->id}}][description]" value="{{$sd->description}}">
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="charge" class="form-control charges" placeholder="Charge" required name="shipment_details[{{$sd->id}}][charge]" value="{{$sd->charge}}">
</td>
<td><button type="button" name="removeExisting" id="{{$sd->id}}" class="btn btn-danger btn_removeExisting">X</button></td>
</tr>
#endforeach
</tbody>
As you see, there is a button at the end of reach row with the class of "btn_removeExisting" which connects to this script:
$(document).on('click', '.btn_removeExisting', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
$( '.charges' ).trigger( 'change' );
alert('removeExisting');
});
The alert is only there to notify me that the script has completed correctly, which is where my problem is. By pressing the button, it correctly deletes the correct row, and alerts me, but the trigger in the middle is where my problem originates.
The script regarding my change of charge trigger:
$(document).on('change', '.charges', function() {
var sum = 0.00;
$('.charges').each(function(){
sum += +$(this).val();
});
$('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
calcTotal();
});
Now what's odd is if I just change a charge input, the code works, so if I change the charge on one line from 10.00 to 0.00, the subtotal subtracts 10.00. But for some reason it won't do the same for when an entire row (and it's specific charge) is deleted.
Instead of trying to trigger events manually like that, it is better to make a function and call it from both events:
$(document).on('click', '.btn_removeExisting', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
calcSum();
alert('removeExisting');
});
$(document).on('change', '.charges', calcSum);
function calcSum() {
var sum = 0.00;
$('.charges').each(function() {
sum += $(this).val();
});
$('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
calcTotal();
});
Note: I assumed there was a harmless typo on your line:
sum += +$(this).val();
so I changed it to:
sum += $(this).val();
Related
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});
I am trying to insert new input row in database. but error showing (Uninitialized string offset: 0 in)
Single row i can insert fine but 2 or more row can not insert because error appearing.
I searched alot but did not found perfect solution. Please see my code and give me suggestion. Thanks
My Html Code Below:-
<div id="addhere">
<tr>
<td><input type="text" class="form-control item_id" value="" readonly="" name="item_id[]"></td>
<td><textarea class="form-control item_name" name="item_name[]" rows="3"></textarea> </td>
<td><input type="text" class="form-control item_qty" value="" name="item_qty[]"></td>
<td><input type="text" class="form-control item_price" name="item_price[]" value="" style="width: 89px;"></td>
<td> <select class="form-control item_taxed" name="item_taxed[]">
<option value="Yes">Yes</option> <option value="No" selected="">No</option></select></td>
<td> <select class="form-control item_status" name="item_status[]" style="width: 89px;">
<option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td>
<td><input type="text" name="datepicker[]" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td>
<td><input type="text" name="departing[]" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td>
</tr>
</div>
For New form Row Javascript Function Below:-
$('#blank-add').on('click', function(){
$("#invoice_items").find('tbody')
.append(
'<tr> <td><input type="text" class="form-control item_id" value="" readonly="" name="item_id"></td> <td><textarea class="form-control item_name" name="item_name" rows="3"></textarea></td> <td><input type="text" class="form-control qty" value="" name="item_qty"></td> <td><input type="text" class="form-control item_price" name="item_price" value=""></td><td> <select class="form-control item_taxed" name="item_taxed"> <option value="Yes">Yes</option> <option value="No" selected>No</option></select></td><td> <select class="form-control item_status" name="item_status" style="width: 89px;"><option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td><td><input type="text" name="datepicker" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td><td><input type="text" name="departing" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td></tr>'
);
});
and my php code below:-
<?php
// inserting invoice data into database name "billing"
if(isset($_POST['_dec_point'])){
for ( $row = 0; $row < count( $_POST['item_id'] ); ++$row ) {
$item_id = $_POST['item_id'][$row];
$item_name = $_POST['item_name'][$row];
$item_qty = $_POST['item_qty'][$row];
$item_price = $_POST['item_price'][$row];
$item_taxed = $_POST['item_taxed'][$row];
$item_status = $_POST['item_status'][$row];
$invoice_date = date('Y-m-d', strtotime($_POST['datepicker']))[$row];
$due_date = date('Y-m-d', strtotime($_POST['departing']))[$row];
$item_notes = $_POST['item_notes'][$row];
$client_name = $_POST['client_name'][$row];
$client_email = $_POST['client_email'][$row];
$client_phone = $_POST['client_phone'][$row];
$client_company = $_POST['client_company'][$row];
$client_address = $_POST['client_address'][$row];
$client_city = $_POST['client_city'][$row];
$client_state = $_POST['client_state'][$row];
$client_pin = $_POST['client_pin'][$row];
$client_country = $_POST['client_country'][$row];
$query = "insert into billing
(item_id,item_name,item_qty,item_price,
item_taxed,item_status,invoice_date,due_date,
item_notes,client_name,client_email,
client_phone,client_company,
client_address,client_city,
client_state, client_pin,
client_country)
values ('$item_id','$item_name','$item_qty',
'$item_price','$item_taxed','$item_status',
'$invoice_date','$due_date','$item_notes',
'$client_name','$client_email',
'$client_phone','$client_company',
'$client_address','$client_city',
'$client_state','$client_pin',
'$client_country')";
}
$run_insert = mysqli_query($con,$query);
if($run_insert){
$last_id = mysqli_insert_id($con);
echo "<script>alert('Submission Successful!')</script>";
echo "<script>window.open('invoices_view.php?view=$last_id','_self')</script>";
}
}
?>
If you adopt a good indentation scheme simple issues like this will become almost obvious.
You have terminated you for loop before executing the query, therefore you will only ever update the last row
You are also using ++$row which increments $row before using it, amybe this shoudl be $row++ increment after.
<?php
// inserting invoice data into database name "billing"
if(isset($_POST['_dec_point'])){
/*
Not sure why you are using ++$row rather than $row++
That also may explain why you are loosing the first
update out of 2.
*/
for ( $row = 0; $row < count( $_POST['item_id'] ); ++$row ) {
$item_id = $_POST['item_id'][$row];
$item_name = $_POST['item_name'][$row];
$item_qty = $_POST['item_qty'][$row];
$item_price = $_POST['item_price'][$row];
$item_taxed = $_POST['item_taxed'][$row];
$item_status = $_POST['item_status'][$row];
$invoice_date = date('Y-m-d', strtotime($_POST['datepicker']))[$row];
$due_date = date('Y-m-d', strtotime($_POST['departing']))[$row];
$item_notes = $_POST['item_notes'][$row];
$client_name = $_POST['client_name'][$row];
$client_email = $_POST['client_email'][$row];
$client_phone = $_POST['client_phone'][$row];
$client_company = $_POST['client_company'][$row];
$client_address = $_POST['client_address'][$row];
$client_city = $_POST['client_city'][$row];
$client_state = $_POST['client_state'][$row];
$client_pin = $_POST['client_pin'][$row];
$client_country = $_POST['client_country'][$row];
$query = "insert into billing
(item_id,item_name,item_qty,item_price,
item_taxed,item_status,invoice_date,due_date,
item_notes,client_name,client_email,
client_phone,client_company,
client_address,client_city,
client_state, client_pin,
client_country)
values ('$item_id','$item_name','$item_qty',
'$item_price','$item_taxed','$item_status',
'$invoice_date','$due_date','$item_notes',
'$client_name','$client_email',
'$client_phone','$client_company',
'$client_address','$client_city',
'$client_state','$client_pin',
'$client_country')";
// } // endfor <-- comment this and add the one below
$run_insert = mysqli_query($con,$query);
/*
This code makes little sence here if you are
going to update more than one billing at a time
*/
if($run_insert){
$last_id = mysqli_insert_id($con);
echo "<script>alert('Submission Successful!')</script>";
echo "<script>window.open('invoices_view.php?view=$last_id','_self')</script>";
} // endif
} // endfor <-- move the endfor to here
}
?>
I also have to assume that this piece of code you showed us in repeated more than once on your actual page.
<div id="addhere">
<tr>
<td><input type="text" class="form-control item_id" value="" readonly="" name="item_id[]"></td>
<td><textarea class="form-control item_name" name="item_name[]" rows="3"></textarea> </td>
<td><input type="text" class="form-control item_qty" value="" name="item_qty[]"></td>
<td><input type="text" class="form-control item_price" name="item_price[]" value="" style="width: 89px;"></td>
<td> <select class="form-control item_taxed" name="item_taxed[]">
<option value="Yes">Yes</option> <option value="No" selected="">No</option></select></td>
<td> <select class="form-control item_status" name="item_status[]" style="width: 89px;">
<option value="Paid">Paid</option> <option value="Not Paid" selected="">No Paid</option></select></td>
<td><input type="text" name="datepicker[]" class="date1" placeholder="Enter date" class="mycalendar" class="form-control item_price" value="" style="width: 84px;"></td>
<td><input type="text" name="departing[]" class="date2" placeholder="Enter date" class="mycalendar" class="form-control" style="width: 84px;"></td>
</tr>
</div>
Also to your javascript method of creating a new row in your table. Can I suggest that you take a look at cloneing the last row, and then clearing all the input fields. That way you dont have to maintain a seperate piece of HTML defining the content of that row, which is eventually going to trip you, or someone else up when the row changes and you forget to amend that piece of JS. Example here
In fact thats exactly what has happened!
I just looked closer at that exact javascript code and there is another issue in there. You have named the input fields incorrectly
None of them have the array indicator [] after their names, so you only get 1 occurance of all those fields when you use the JS to add a new row to the table. So consider the clone method now!
I have a product page that will input a cost, quantity and spit out the cost after taking the product of the 2.
I have figured it out here http://jsfiddle.net/61tch8md/ for the most part (I believe) but the issue I have is that the user can add multiple lines and each line needs to only add the quantity and cost of the fields on that row. Right now when I add additional rows, the first line will control the price for all the lines.
HTML
<table class="order-details">
<tbody>
<tr>
<td><input type="text" value="" placeholder="Description of Work" class="wei-add-field description 1" name="product-1-description" /></td>
<td><input type="text" value="" placeholder="QTY" class="wei-add-field quantity 1" name="product-1-quantity" /></td>
<td><span class="wei-price">$</span><input type="text" value="" placeholder="Unit Price" class="wei-add-field unit-price 1" name="product-1-price"/></td>
<td><span class="wei-price-total"></span></td>
<td> </td>
</tr>
</tbody>
</table>
<div class="wei-add-service">Add Item</div>
JavaScript / Jquery
jQuery( "tr" )
.keyup(function() {
var value = jQuery( ".unit-price" ).val();
var value2 = jQuery( ".quantity" ).val();
var total = value * value2;
jQuery( ".wei-price-total" ).text( total );
})
.keyup()
var counter = 2;
jQuery('a.wei-add-service-button').click(function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr><td><input type="text" value="" placeholder="Description of Work" class="wei-add-field description" name="product-' +
counter + '-description" /></td><td><input type="text" value="" placeholder="QTY" class="wei-add-field quantity" name="product-' +
counter + '-quantity" /></td><td><span class="wei-price">$</span><input type="text" value="" placeholder="Unit Price" class="wei-add-field unit-price" name="product-' +
counter + '-price"/></td><td><span class="wei-price-total">$49.99</span></td><td>remove</td></tr>');
jQuery('table.order-details').append(newRow);
});
jQuery('table.order-details').on('click','tr a',function(e){
e.preventDefault();
jQuery(this).parents('tr').remove();
});
Thanks in advance.
Change your code so it selects the inputs in the row that the keyup happened on.
jQuery('table.order-details').on("keyup", "tr", function() {
var row = jQuery(this);
var value = jQuery( ".unit-price", row ).val();
var value2 = jQuery( ".quantity", row ).val();
var total = value * value2;
jQuery( ".wei-price-total", row ).text( total );
});
I need your help. Trying to build form in php + jquery, and have trouble with some functionality.
For example, I have this code:
<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
<select name="store[product][]" required>
<option value="" selected="selected">-Product-</option>
<option value="430">OCTA</option>
<option value="440">KASKO</option>
<option value="19041">TRAVEL</option>
<option value="19063">HOUSEHOLD</option>
</select>
</td>
<!-- /Product selector -->
</table>
<input type="submit" value="ok">
How can I do that, If selected value is 430 or 440, then at right side inserts
<td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>
<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>
<td><a class="del" href="#">DELETE BUTTON</a></td>
If selected value is 19041 or 19063, then inserts
<td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>
<td><a class="del" href="#">DELETE BUTTON</a></td>
I need that there also will be +Add button and -delete button where i write:
<a class="del" href="#">DELETE BUTTON</a>
But for datepicker functionality I need that id for inputs will be unique, for ex: id="location1" , at next added row id="location2".
JsFiddle
$("#productselect").change(function(){
var select = document.getElementById("productselect");
var selecedproduct = select.options[select.selectedIndex].value;
$("tr[id^='forselect']").remove();
if(selecedproduct==430 || selecedproduct==440 )
{
var html ='<tr id="forselect"><td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>';
html +='<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>';
html +='<td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td>add datepicker </td></tr>';
$("#MultiRow").append(html);
}
else if(selecedproduct==19041 || selecedproduct==19063 )
{
var html ='<tr id="forselect"><td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>';
html +=' <td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td>add datepicker </td></tr>';
$("#MultiRow").append(html);
}
});
deldatepicker = function deldatepicker(id)
{
$("#remove"+id).remove();
}
adddatepicker = function adddatepicker()
{
var N = $("input[id^='location']").length;N++;
var html ='<tr id="remove'+N+'"><td><input type="text"id="location'+N+'" placeholder="date"></td><td><button OnClick="deldatepicker('+N+')">delete datepicker </button> </td></tr>';
$("#MultiRow").append(html);
$("#location"+N).datepicker();
}
removetags = function removetags()
{
$("tr[id^='forselect']").remove();
}
It may help you for you work.
Here it is.
Since you need the ids to be unique I have used Date.now() and then object.now.getUTCMilliseconds(). That will ensure that event when you delete and reinsert another row with same rowIndex it will not crash. Then the rest is trivial!
jQuery(document).ready(function(){
jQuery('select').on('change', function(e){
var tr = jQuery(this).closest('tr').get(0);
var cell = tr.insertCell(1);
var now = Date.now();
switch(jQuery('option:selected', this).val()){
case '430':
case '440':
cell.innerHTML = "<td><input type='text' id='motor[]' name='multiarray[vehicle_type][]'></td><td><input type='text' id='deadline[]' name='multiarray[end_date][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
break;
cell.innerHTMl = "<td><input type='text' id='location"+now.getUTCMilliseconds()+"[]' name='multiarray[travel_location][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
case '19041':
case '19063':
break;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
<select name="store[product][]" required>
<option value="" selected="selected">-Product-</option>
<option value="430">OCTA</option>
<option value="440">KASKO</option>
<option value="19041">TRAVEL</option>
<option value="19063">HOUSEHOLD</option>
</select>
</td>
<!-- /Product selector -->
</table>
<input type="submit" value="ok">
I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.
<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>
</select>
</div>
</td>
</tr>
</table>
Where I am going wrong ..... any valuable input will be appreciated.
Could you try to change the input element's name:
<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>
and create a function:
function change(t, div){
var ele = document.getElementsByTagName("div");
var radios = document.getElementsByName("license[1]");
for (var i = 0, radio; radio = radios[i]; i++) {
if (!radio.checked) {
if(ele[i].id != div){
ele[i].style.display = 'none';
}
}else{
document.getElementById(div).style.display='inline';
}
}
}
I'm not sure if this is what you want, but HERE you can see an example.
You just need to change your parenthesis:
document.getElementById('select5000').style.display = (this.checked ? 'inline':'none');
Here is your inputs
<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">
and the function:
<script type="text/javascript">
function hideElem(self,divId){
var divs = ['select1000','select3000','select5000'];
if(self.checked){
for(var i=0; i < divs.length; i++){
if (divs[i] === divId){
document.getElementById(divs[i]).style.display = 'inline';
} else{
document.getElementById(divs[i]).style.display = 'none';
}
}
}
}
</script>
DEMO
because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:
(function () {
var oldSel = null;
$('input:radio').click(function () {
// get the current select
var sel = $('#select' + this.value);
// show current select
sel.show();
// if old select is exist, hide it
oldSel && oldSel.hide();
// store the current select when radio on click
oldSel = sel;
});
})();
see the demo