I have a dynamic form that allows fields to be added and deleted dynamically with the help of jquery. The existing fields are autopopulated from values in mysql table. The add button adds a new input field while the delete button removes an input field. The fields loaded with values from the db are tagged with data-saved attributed. Now my dilemma is focused in the delete button. How can I delete new sections that are not tagged with data-saved attribute? EXAMPLE
JQUERY
$(document).ready(function () {
$('#btnAdd').click(function () {
var $clones = $('#input_table tr'),
num = $clones.size() + 1,
next_num = parseInt($clones.last().find('input[name^="person_id"]').val()) + 1,
$template = $clones.first(),
newSection = $template.clone().attr('id', 'pq_entry_'+num),
person_id = 'person_id_'+num;
person_fname = 'person_fname_'+num;
person_status = 'person_status_'+num;
newSection.removeAttr('data-saved');
// clear out all sections of new input
newSection.find('input').val('');
newSection.find('select').val([]);
newSection.find('input[name^="person_id"]').attr({
'id': person_id,
'name': person_id
}).val();
newSection.find('input[name^="person_fname"]').attr({
'id': person_fname,
'name': person_fname,
'placeholder' : 'Person #'+num+' First Name'
}).val();
newSection.find('select').attr({
'id': person_status,
'name': person_status
}).val(next_num);
newSection.find('input[type="button"]').attr('data-ident', next_num);
$('#input_table').append(newSection);
$('#btnDel').prop('disabled', '');
if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
});
$('#btnDel').click(function () {
var num = $('.clonedSection').length; // how many duplicate input fields we currently have
$('#pq_entry_' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled', '');
// if only one element remains, disable the "remove" button
if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
});
$('#btnDel').prop('disabled', 'disabled');
});
HTML
<tbody id="input_table" >
<tr id="pq_entry_1" class="clonedSection" data-saved="1">
<td><input type="text" name="person_id" value='1' readonly /></td>
<td>
<input id="person_id_1" name="person_id_1" type="text" value='1'/>
<input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
</td>
<td>
<select id="person_status_1" name="person_status_1"></select>
</td>
</tr>
<tr id="pq_entry_2" class="clonedSection" data-saved="2">
<td><input type="text" name="person_id" value='2' readonly /></td>
<td>
<input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
</td>
<td>
<select id="person_status_2" name="person_status_2"></select>
</td>
</tr>
</tbody>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>
From
$('#pq_entry_' + num).remove(); // remove the last element
Change into
var toDelete = $('#pq_entry_' + num).not('[data-saved]');
if (toDelete.length) {
// Last one wasn't a db-entry
toDelete.remove();
// enable the "add" button
$('#btnAdd').prop('disabled', '');
// if only one element remains, disable the "remove" button
if ($('.clonedSection:not([data-saved])').length == 0)
$('#btnDel').prop('disabled', 'disabled');
}
Working example: http://jsfiddle.net/az9LQ/
You can simplify it a lot:
Add a <script type="text/template"> element which can hold the HTML to be appended each time (it won't be visible on the page). I've substituted $1 for the row number which you are dynamically updating and all occurrences of $1 can be replaced in a single shot (and if you want to replace other values then you can extend this and use $2, $3, ... $n for multiple substitutions).
Set up various static variables outside the 'click' handlers including an addedRows array to store the rows as they are added.
In the 'add' handler:
Create the row from the template, replacing $1 with the row number;
Store the row in an addedRows array for later use in the 'delete' handler;
Dynamically update elements as needed; and
Update the buttons.
In the 'delete' handler:
The addedRows array stores all references to the dynamically added rows so just pop() the last row from the array and remove() it;
Update the buttons.
JSFIDDLE
HTML:
<table>
<tbody id="input_table" >
<tr id="pq_entry_1" class="clonedSection" data-saved="1">
<td><input type="text" name="person_id" value='1' readonly /></td>
<td>
<input id="person_id_1" name="person_id_1" type="text" value='1'/>
<input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
</td>
<td>
<select id="person_status_1" name="person_status_1"></select>
</td>
</tr>
<tr id="pq_entry_2" class="clonedSection" data-saved="2">
<td><input type="text" name="person_id" value='2' readonly /></td>
<td>
<input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
</td>
<td>
<select id="person_status_2" name="person_status_2"></select>
</td>
</tr>
</tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>
<script type="text/template" id="template">
<tr id="pq_entry_$1" class="clonedSection">
<td><input type="text" name="person_id" value="$1" readonly /></td>
<td>
<input id="person_id_$1" name="person_id_$1" type="text"/>
<input id="person_fname_$1" name="person_fname" placeholder="Person #$1 First Name" type="text" />
</td>
<td>
<select id="person_status_$1" name="person_status_$1"></select>
</td>
</tr>
</script>
JavaScript:
$(document).ready(function () {
var template = $('#template' ).html(),
$input_table = $( '#input_table' ),
addedRows = [],
num_saved_rows = $('#input_table tr').length;
$('#btnAdd').click(function () {
var row = $( template.replace( /\$1/g, num_saved_rows + addedRows.length + 1 ) )
.appendTo( $input_table );
addedRows.push( row );
$('#btnDel').prop('disabled', num_saved_rows + addedRows.length == 100 );
// Not sure what you are doing with the 'select' element but you can
// dynamically update the attributes of any element like this:
$( 'select', row ).val( '' );
});
$('#btnDel').click(function () {
if ( addedRows.length )
{
addedRows.pop().remove();
$('#btnAdd').prop('disabled', false);
$('#btnDel').prop('disabled', !addedRows.length);
}
});
$('#btnDel').prop('disabled', 'disabled');
});
Not sure what you are trying to do with the select element as it has no OPTION children.
Related
I have a web page with multiple checkboxes and the relative input values
with the following code:
<tr><td><input type=\"checkbox\" id=\"second_checkbox\" name=\"second_checkbox\" value=\"" + Sample_ID + "\"><label for=\""+ Sample_ID + "\">"+ Sample_ID +"</label><br></td><td><select name=\"option\" id=\"option\"><option value=\"\" selected=\"selected\"></option><option value=\"=\">=</option><option value=\"!=\">!=</option><option value=\">\">></option><option value=\">=\">>=</option><option value=\"<\"><</option><option value=\"<=\"><=</option><option value=\"ilike\">contains</option></select></td><td><input type=\"text\" name=\"valore\" placeholder=\"value\"></td></tr>"
and I get the different values by using this functions:
filtri = request.form.getlist('second_checkbox')
simbolo = request.form.getlist('option')
valori = request.form.getlist('valore')
but the array "valori" takes all the empty values on the page and I want to take only the ones that are checked on the first checkbox.
How can I do that?
Thanks
First, remove the duplicate id's and names in the html. An id in html should be unique. Using the right selection mechanism you don't need them either.
For the client side (so, within the browser) you can select all checked checkboxes using the selector [type=checkbox]:checked. Here's a minimal reproducable example.
document.addEventListener(`click`, evt => {
console.clear();
const allChecked = document.querySelectorAll(`[type='checkbox']:checked`);
// ^ only checked
if (allChecked.length) {
return allChecked
.forEach(cb => {
const theRow = cb.closest(`tr`);
console.log(`checked row (#${theRow.rowIndex + 1}) text input value: ${
theRow.querySelector(`input[type='text']`).value || `no value`}`);
});
}
return console.log(`none checked (yet)`);
});
<table>
<tr>
<td>
<input type="checkbox" value="123"> 123
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="456"> 456
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 2">
</td>
</tr>
<tr>
<td><input type="checkbox" value="789"> 789
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 3">
</td>
</tr>
</table>
I have the table bellow and I want to get the input $('.note') value from the id of the previous input :
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
So it can be something like that :
$(".student").change(function () {
alert(this.id.parent('td input.note').val())
})
You could use this.value or $(this).val() :
$('.classname').on('click',function(){
console.log(this.value, $(this).val(), this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='classname' id="id_1" value='value_1'/>
<input type='text' class='classname' id="id_2" value='value_2'/>
<input type='text' class='classname' id="id_3" value='value_3'/>
<input type='text' class='classname' id="id_4" value='value_4'/>
Edit :
Go up to the parent tr using .closest('tr') then search for the related input note using .find('.note') and get the value :
$(".student").on('input', function () {
console.log( $(this).closest('tr').find('.note').val() );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note' value="1111"></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note' value="2222"></td>
</tr>
</table>
You can use a combination of closest and find.
$(".student").on('change', function () {
// the student input to which the change event is bound
var $this = $(this);
// Get the wrapper in which the inputs are present
var $closestTr = $this.closest('tr');
// the input vale that is needed
alert($closestTr.find('.note').val());
});
Yes, you can do this $('#' + this.id).val()
You don't need to include the class in the selector because IDs are unique.
I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!
you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>
It is hard to explain, you can see a DEMO HERE
I have a products table that dynamically creates/deletes new lines of products. I also have a totals table that totals up the totals of each line together.
In that totals box, I have a travel box I want to add to the grand total, but the issue I am having is the travel input is outside the table that is totaling all the values. I can replace the total with a new total, but I can not seem to call the sub total, add the travel and output a grand total.
HTML
<table class="order-details">
<tbody>
<tr>
<td><input type="text" value="" name="" placeholder="Work Description" class="wei-add-field description 1"/></td>
<td><input type="text" value="" name="" placeholder="QTY" class="wei-add-field quantity 1" /></td>
<td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field unit-price 1"/></td>
<td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total 1" id=""/></td>
<td> </td>
</tr>
</tbody>
</table>
<div class="wei-add-service">Add Item</div>
<table class="wei-add-totals">
<tr>
<td width="50%">Sub Total</td>
<td width="50%" class="wie-add-subtotal"> </td>
</tr>
<tr class="alternate travel">
<td>Travel</td>
<td><input type="text" value="" placeholder="0.00" class="wei-add-field travel" /></td>
</tr>
<tr>
<td>Taxes</td>
<td><input type="text" value="" placeholder="0.00" class="wei-add-field wie-total-taxes" id="wei-disabled" disabled/> </td>
</tr>
<tr class="alternate total">
<td>Total</td>
<td><input type="text" value="" placeholder="0.00" class="wei-add-field wie-grand-total" id="wei-disabled" disabled/></td>
</tr>
</table>
Javascript
var counter = 1;
var testArray = [ 2,3,4,5];
jQuery('a.wei-add-service-button').click(function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr><td><input type="text" class="wei-add-field description ' + counter + '"/></td><td><input type="text" class="wei-add-field quantity ' + counter + '" /></td><td><input type="text" class="wei-add-field unit-price ' + counter + '"/></td><td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total ' + counter + '" id=""/></td><td>X</td></tr>');
jQuery('table.order-details').append(newRow);
});
jQuery('table.order-details').on('click','tr a',function(e){
e.preventDefault();
var table = $(this).closest('table');
jQuery(this).parents('tr').remove();
reCalculate.call( table );
});
jQuery('table.order-details').on("keyup", "tr", reCalculate);
function reCalculate() {
var grandTotal = 0;
jQuery(this).closest('table').find('tr').each(function() {
var row = jQuery(this);
var value = +jQuery( ".unit-price", row ).val();
var value2 = +jQuery( ".quantity", row ).val();
var total = value * value2;
grandTotal += total;
jQuery( ".wei-add-field.price-total", row ).val( '$' + total.toFixed(2) );
});
jQuery(".wie-add-subtotal").text( '$' + grandTotal.toFixed(2));
}
I don't think, given the task of creating this, I would have chosen to do it in the way you did.
However, using your existing code you can bind the Travel value on change, paste, or keyup and run a function on any of those actions. Within that function I have removed the special character ($) from ".wie-grand-total" using a regex and converted the value of ".wie-grand-total" to a float using parseFloat. I also converted the Travel value to a float using parseFloat. I then added them together and made the sum your new value for "wie-grand-total".
/* NEW SINCE COMMENTS */
//Add to your HTML New table
<table class="order-details">
<tbody>
<tr>
<td><input type="text" value="" name="" placeholder="Work Description" class="wei-add-field description 1"/></td>
<td><input type="text" value="" name="" placeholder="QTY" class="wei-add-field quantity 1" /></td>
<td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field unit-price 1"/></td>
<td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total 1" id=""/></td>
/* NEW SINCE COMMENTS*/
<td><input type="text" id="travelHid" value=""></td>
<td> </td>
</tr>
</tbody>
</table>
/* NEW SINCE COMMENTS */
$('#travelHid').hide();
var travelVal = 0;
function updateTravelVal(travelVal){
var travelVal = travelVal;
$('#travelHid').val(travelVal);
};
updateTravelVal();
$("#travelVis").bind("change paste keyup", function() {
var noChars = jQuery(".wie-grand-total").val().replace(/[^0-9.]/g, "");
var newTot = parseFloat(noChars) + parseFloat($(this).val());
jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2));
//added error checking
var checkError = jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2));
//if the value that would go in input is NaN then use travelVal
//since there is no value in .wie-grand-total yet
if (typeof checkError !== "string") {
jQuery(".wie-grand-total").val( '$' + travelVal.toFixed(2))
} else if (typeof checkError === "string") {
jQuery(".wie-grand-total").val( '$' + newTot.toFixed(2))
}
/* NEW SINCE COMMENTS */
updateTravelVal(travelVal);
});
A fiddle for demonstration (now with hiddenVal per comment)
http://jsfiddle.net/chrislewispac/wed6eog0/3/
Only potential problems here are it only runs when you change, paste, or key up the value in #TravelVis.
/EXPLAINED SINCE COMMENTS/
It the html I added a td with input. Input id="travelHid". I then make that invisible by applying jQuery method .hide(). I then exposed travelVal to global scope an initiated it with a value of zero then created a function to update that value.
Within that function I set the value to the argument travelVal or to 0 if there are no args. I then immediately call it.
Then, I added a call to that function with the arg travelVal from our bind function to update it if a value is present.
And finally:
Just add a row to the table with preset value of Travel and Quant 1.
http://jsfiddle.net/chrislewispac/xntn7p5p/5/
All the examples if adding a form element to an existing form all use the document.getElementById method of grabbing the element that they want to attach the form element to or they are Jquery methods which I don't use and have no need to use Jquery.
This is the form I have
<form name="formname" action="javascript:return false;" enctype="multipart/form-data" method="post" onSubmit="processCart(this);">
<table>
<tr>
<td> </td>
<td>Number </td>
<td>Price </td>
<td>Quantity </td>
<td>Remove</td>
</tr>
<tr>
<td> <input type="checkbox" name="items" value="Item 1"></td>
<td># 1 </td>
<td>$<input type="text" name="price" size="12" value="1.00" readonly /></td>
<td><input type="text" name="quantities" value=""/></td>
<td> </td>
The button that Adds an element is called "Add Item" and when clicked it is supposed to add a form element after the existing one.
Any ideas on how to achieve this in Javascript will be appreciated. Clips of code so far
function insertFormElements(){
for(i in ele){
itm = 'item_'+i;
amt = 'amount_'+i;
qty = 'quantity_'+i;
// add a new Inputs
addElement(itm,"text","");
addElement(amt,"text","");
addElement(qty,"text","");
// add values
document.formname[ itm ].value = ele[i].items;
document.formname[ amt ].value = (ele[i].amount * ele[i].quantity);
document.formname[ qty ].value = ele[i].quantity;
}
return true;
}
The function addElement
function addElement(){
try{
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("name", arguments[0]);
element.setAttribute("type", arguments[1]);
element.setAttribute("value", arguments[2]);
document.formname.appendChild(element);
}catch(e){
alert( e );
}
}
I have not has an alert and I have not seen any elements get added, so can someone assist with what might be going wrong?