Develop Reference

How do I pick multiple items out of a dynamically generated list in javascript & html?

I'm looking to add multiple products to a table from a dynamically generated list, where each item has a button to add it to the table. It's not working now because when I click a product, it adds it to the table and then if I click another item in the list, it just replaces the first item in the list. This list is dynamically generated because it's coming from a database.
html:
<form action="insert.php" method= "POST" name = "productsForm">
<table>
<tr>
<th><label>Customer Name:</label></th>
<th><label>Phone:</label></th>
<th><label>Email:</label></th>
<th><label>RO | PO:</label></th>
<th><label>Address:</label></th>
</tr>
<tr>
<td><input type="text" name="txtCustomerName" id = "txtCustomerName"></td>
<td><input type="text" name="txtPhone" id = "txtPhone"></td>
<td><input type="text" name="txtEmail" id= "txtEmail"></td>
<td><input type="text" name="txtRopo" id= "txtRopo"></td>
<td><input type="text" name="txtAddress" id= "txtAddress"></td>
</tr>
<tr>
<th><label>SKU:</label></th>
<th><label>Product Name:</label></th>
<th><label>Quantity:</label></th>
<th><label>Retail Price:</label></th>
<th><label>List Price:</label></th>
</tr>
<tr>
<td><input type="text" name="txtSKU" id = "txtSKU"></td>
<td><input type="text" name="txtProductName" id= "txtProductName"></td>
<td><input type="text" name="txtQuantity" id= "txtQuantity"></td>
<td><input type="text" name="txtRetailPrice" id= "txtRetailPrice"></td>
<td><input type="text" name="txtListPrice" id= "txtListPrice"></td>
</tr>
<tr>
<td><input type="text" name="txtSKU1" id = "txtSKU1"></td>
<td><input type="text" name="txtProductName1" id= "txtProductName1"></td>
<td><input type="text" name="txtQuantity1" id= "txtQuantity1"></td>
<td><input type="text" name="txtRetailPrice1" id= "txtRetailPrice1"></td>
<td><input type="text" name="txtListPrice1" id= "txtListPrice1"></td>
</tr>
<tfoot>
<th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal"><input type="button" value= "Add" id = "addTotals"></button> </th>
</tfoot>
</table>
<button type="submit" name="submitOrder">Submit</button>
</form>
JavaScript - this function makes the list:
function populateProductList(jsonArr){
var html = "";
html += `<ol id="myULProducts">`;
for(var x = 0; x < jsonArr.length; x++){
html += `
<li SKU = "${jsonArr[x].SKU}">
<a href="#" class="products">
<strong>Product SKU:</strong> ${jsonArr[x].SKU}
<br><strong>Product Name:</strong> ${jsonArr[x].product_name}
<br><strong>Retail Price:</strong> ${jsonArr[x].retail_price}
<br><strong>List Price:</strong> ${jsonArr[x].list_price}
<br><br></a>
<button type="button" class="btnAddProductToOrder">Add to Order</button>
</li>
</div>`
}
html += `</ol>`;
var ul = document.createElement("ul");
ul.innerHTML = html;
var tableContainer = document.getElementById("product-list-container");
tableContainer.innerHTML = "";
tableContainer.appendChild(ul);
tableContainer.addEventListener("click", function(evt){
//populateCardGroupList();
var target = evt.target;
//if statement to see if the classList has a button edit
if(target.classList.contains("btnAddProductToOrder")){
//get the id of the card group clicked
var selectedId = target.closest("li").getAttribute("SKU");
//get the card group attached to that id and pass it the rest of the json Array of objects
var selectedProduct = getProductId(selectedId, jsonArr);
populateOrderFormProducts(selectedProduct);
}
});
}
JavaScript - this function adds the clicked item in the list to the product table below
function populateOrderFormProducts(jsonArr){
document.getElementById("txtSKU").value = jsonArr.SKU;
document.getElementById("txtProductName").value = jsonArr.product_name;
document.getElementById("txtQuantity").value = 1;
document.getElementById("txtRetailPrice").value = jsonArr.retail_price;
document.getElementById("txtListPrice").value = parseFloat(jsonArr.list_price);
}

How do I locate elements in the same row as another in a dynamic table?

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>

Issue replacing input value in array

I did an example about replacing the input value when the row is deleted but is not working (this is not a static example).
<script src="./edit_files/prototype.js" type="text/javascript"></script>
<script src="./edit_files/application.js" type="text/javascript"></script>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="cristianoronaldo#realmadrid.com"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
<div class="contact">
<table border="0">
<tr>
<td><select class="position_id" id="obj_client_contact_attributes__position_id" name="obj_client[contact_attributes][][position_id]"><option value="1" selected="selected">INTELIGENT</option><option value="2">OTHER</option></select></td>
<td><input class="should_change_value" id="obj_client_contact_attributes__phone_mail" name="obj_client[contact_attributes][][phone_mail]" type="text" value="ONLY THE INPUT WILL BE test#hotmail.com IF I CLICK ON DELETE"/></td>
<td>
DELETE
<input id="obj_client_contact_attributes__id" name="obj_client[contact_attributes][][id]" type="hidden" value="16594"/>
<input class="should_destroy" id="obj_client_contact_attributes__should_destroy" name="obj_client[contact_attributes][][should_destroy]" type="hidden"/>
</td>
</tr>
</table>
</div>
Here is the application.js file:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
I tried this code but only works if I remove the first row.
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
$('should_change_value').update("test#hotmail.com");
if (should_destroy) {
$(element).next('.should_destroy').value = 1;
}
$(element).up('.contact').hide();
}
Here is the live example in jsfiddle
Here is the example download on Github but is not replacing the input value correctly

Ok I got it, you want to change the input value when the row is deleted, so do this:
function mark_for_destroy_contact(element,should_destroy,should_change_value) {
var element_text = $(element).up('.contact').down('.position_id',0);
element_text.className = 'position_id';
element_text.value = '';
var element_text2 = $(element).up('.contact').down('.should_change_value',0);
element_text2.className = 'should_change_value';
element_text2.value = 'test#hotmail.com';
if (should_destroy) { $(element).next('.should_destroy').value = 1;}
$(element).up('.contact').hide();
}

Hiding a html span based on a condition using Javascript

Trying to hide a span containing text and a textbox depending upon a condition. This sets the value of each drop down after setting value I want to check each one and if the value does not equal 10 then I want to hide the span. Any help would be great. This code seems to be hiding all the spans rather than the ones that aren't 10
$('.existing')
.each(function() {
var DD1 = $(this).attr('current');
$(this).val(DD1);
console.log(DD1);
//above selects the value of the html dropdown and below should check that value and hide span if its not 10
var parent = $(this).parent().prev();
var tr = $(this).closest('tr');
if ($(this).val(DD1) !== "10") {
var hide = tr.find(".hideifnot").hide();
}
});
<asp:ListView runat="server" id="ListView1" >
<LayoutTemplate>
<thead>
<tr>
<th>
Type
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
<tfoot>
</tfoot>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<select id="DD" current="" class="existing">
</select>
</td>
<td>
<input type="text" id="Type" class="TypeText " value="<%# Eval("Type")%>" />
<span class="HideifNot"> Address: <input type="text" id="Addr" class="AddrText " value="<%# Eval("Address")%>" /> </span>
</td>
<td>
<input type="button" id="btn_update" class="Update" value="Update" />
<input type="button" id="btn_delete" class="Delete" value="Delete" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Client side of Listview only thing it contains is binding a list to it:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
People i = Data;
ListView1.DataSource = i.Addresses;
ListView1.DataBind();
}
}

Your select is missing the closing >.
It should be:
<select id="DD" current="" class="existing">
Instead of:
<select id="DD" current="" class="existing"
EDIT:
In addition, you should change:
var hide = tr.find(".hideifnot").hide();
To:
var hide = tr.find(".HideifNot").hide();

how to get a value in a list on a checkboxlist control and use it to validate

I have a form in asp.net 3.5 , which has a master page and a child page (content page). The form has several questions, I am using the asp.net checkboxlist for a questions, since multiple options can be selected, if the user selects 'Other' on one of the selections, then they have to enter data into a textbox field.
I made the following client side javascript to validate this but, the code doesnt seem to check wheter the Other option value is selected, I believe it has to do with the way the html is rendered on the page,,,
Can you please suggest how to do this?
Thanks in advance.
Rendered Javascript
//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>
function checkOther2(oSrc, args) {
{
var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
// You can only get the Text property, which
will be in an HTML label element.
var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ',';
checkedValues += labelArray[0].innerHTML.text;
if (checkedValues == 'Other') {
args.IsValid = !(args.Value == "")
// test
alert("Hello");
}
}
else {
args.IsValid = true;
}
}
}
}
}
// HTML Rendered
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
</strong><br /> </td>
</tr>
<tr>
<td>
<table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
<tr>
<td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
</tr><tr>
<td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="font-weight: 700">
2.- What did you like most about working here?<strong>
Check all that apply
<cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
ControlToValidate="CheckBoxList1" Display="None"
ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
</strong><br /> </td>
</tr>
<tr>
<td>
----------- Actual Markup on asp.net form
<asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
<asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
<asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
<asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
<asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
If other, please elaborate:<br />
<asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
<asp:CustomValidator
ID="CustomValidator3" runat="server"
ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
ValidateEmptyText="True"></asp:CustomValidator>
</td>
</tr>

Your JS looks rather complicated. Try a more simple approach...
function isValid(f)
{
var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
if(cb && cb.checked)
{
var tb = document.ElementById('<%=txt2other.ClientID%>');
if(tb && tb.value.length > 0)
{
f.submit();
}
else
{
alert('Please enter a comment in question #2.');
}
}
}
If you have a lot of these, try setting a property on the checkbox like value=other so when you loop through your checkboxes, you can use if(cb.checked && cb.value == 'other')