I have been tasked with coding some javascript to add a pizza to a 'basket'. I have a 'Add to Basket' button which needs to get the name, description, size and price of the pizza.
Currently, I have managed to get the name and description of the pizza from the 'Add to Basket' button but I also need to get the price and size of the pizza which is determined from what radio button the user selects.
The html code was given to me.
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input id="size" name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input id="size" name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input id="size" name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
Here is the javascript, I was also asked to convert the NodeList to an array and then filter through that array to get the radio button that is checked which I think I have done with the first two lines.
function addBasket(button) {
var nodes = [].slice.call(document.getElementsByName(name));
var radio = nodes.filter(function(el){return el.checked;})[0];
var pizzaname = button.name;
var pizzadesc = button.getAttribute('data-description');
var pizzaprice = radio.dataset.price;
}
Now I don't know how to get the 'data-price' and the 'value' (size of pizza) from the radio button.
You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.
var name = 'Cheese'
function addBasket(button) {
var nodes = document.getElementsByName(button.name)
var radio = [].filter.call(nodes, function(e) {
return e.checked
})[0]
var pizzaname = button.name
var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value
var pizzaprice = radio.getAttribute('data-price')
console.log({
Name: pizzaname,
Description: pizzadesc,
Size: pizzasize,
Price: pizzaprice
})
}
<td>
<table border="0" cellpadding="0">
<tbody>
<tr align="center">
<td>
<input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small
</td>
<td>
<input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium
</td>
<td>
<input name="Cheese" data-price="9.99" value="Large" type="radio">Large
</td>
</tr>
<tr align="center">
<td style="padding-top: 6px">£6.50</td>
<td style="padding-top: 6px">£8.50</td>
<td style="padding-top: 6px">£9.99</td>
</tr>
</tbody>
</table>
</td>
<td>
<input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)">
</td>
Related
Is there anyone here who thinks they can help me solve an estimate calculator issue?
The user clicks on different checkboxes which stores a price value and for each checkbox they click it adds a total price. I got that working. But I cant find a way to give the checkbox a range price to display to the user
like this
This is mine, i put in plane text the range, but the value is actually only the first portion of the range unfortunately and I'm not getting to display the range
This is what is the code i tried:
`
<p class = "dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id = "test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id= "engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" value="2126.15">
<label for="oil">Air Filter</label>
</td>
<td class = "price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="gas" value="1063.08">
<label for="gas">Gas Filter</label>
</td>
<td class = "price">
$1,063.08 - $1,275.69
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="tires" value = "3614.46">
<label for="tires">Fuel Filter</label>
</td>
<td class = "price">
$3,614.46 - $4,394.05
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="sparkPlug" value = "5244.51">
<label for="sparkPlug">Spark Plug</label>
</td>
<td class = "price">
$5,244.51 - $6,449.33
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_chain" value = "9355.07">
<label for="belt_chain">Timing Belt/Chain</label>
</td>
<td class = "price">
$9,355.07 - $1,1410.35
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_drive" value = "3685.33">
<label for="belt_drive">Fan Belt/Drive Belt</label>
</td>
<td class = "price">
$3,685.33 - $4,323.18
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiatorHoseSet" value = "7228.92">
<label for="radiatorHoseSet">Radiator Hose Set</label>
</td>
<td class = "price">
$7,228.92 - $8,858.97
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiator" value = "27214.74">
<label for="radiator">Radiator</label>
</td>
<td class = "price">
$27,214.74 - $33,309.71
</td>
</tr>
</table>
</form>
`
Javascrip:
`
$(function() {
$('input').click(function() {
var total = 0;
$('input:checked').each(function(index, item) {
total += parseFloat(item.value);
});
$('#test').text(total.toFixed(2));
});
});
`
As you can see, the prices did add but it didn't display the range as showed in the first image I sent. It's supposed to display the total estimated price range
enter link description here
this is also the codepen
Here is this Answer
i used parentElement and NextSilbiling
$(function() {
$('input').click(function() {
var total1 = 0;
var total2 = 0;
$('input:checked').each(function(index, item) {
var items = item.parentElement.nextElementSibling.innerText.replace(/[$, ]/g,'').split("-");
total1 += Number(items[0]);
total2 += Number(items[1]);
});
$('#costOutput').text('$'+total1.toFixed(2)+' - '+ '$'+total2.toFixed(2));
});
});
https://bokboot.net/read?id=47&key=b3897fd0-315c-410d-ab2a-f61b8e8c4a4a
Copy and Paste in your project
First things first, please do not use the table tag for layout. It should be used for tabular data only. Its use for layout went out of style at the turn of the century!
Now, onto the problem at hand. As you've discovered, checkboxes can only have one value. We are going to leverage data attributes to give your more.
$(function() {
$('input').click(function() {
var minTotal = 0;
var maxTotal = 0
$('input:checked').each(function(index, item) {
//Add the value from the minval data attribute
minTotal += parseFloat(item.dataset.minval);
//Add the value from the maxval data attribute
maxTotal += parseFloat(item.dataset.maxval);
});
//Update the text field
$('#test').text("$" + minTotal.toFixed(2) + " - $" + maxTotal.toFixed(2) );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id="test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id="engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" data-minval="2126.15" data-maxval="2622.25" value="skuOil">
<label for="oil">Air Filter</label>
</td>
<td class="price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" data-minval="1063.08" data-maxval="1275.69" id="gas" value="skuGas">
<label for="gas">Gas Filter</label>
</td>
<td class="price">
$1,063.08 - $1,275.69
</td>
</tr>
</table>
My goal is to design a program that will take user input to create a title, keywords, and a set of matching descriptions. Once the user enters this into the UI and clicks generate_html the section should disappear. Then the word matching html should be generated with the user data.
For example, the input page would look like the figure shown below:
The word matching html would look like the figure shown below:
The code for the user input is the following
User Input:
<center>
<div class="inputBoxes">
<table id="tablestyle">
<td>
<input id="el1" type="text" value="">
</td>
<td>
<input id="el2" type="text" value="">
</td>
<td>
<input id="el3" type="text" value="">
</td>
<td>
<input id="el4" type="text" value="">
</td>
<td>
<input id="el5" type="text" value="">
</td>
</table>
</div>
</center>
Result in HTML:
<center>
<div class="inputBoxes">
<table id="tablestyle">
<td>
<input id="dl1" type="text" value="">
</td>
<td>
<input id="dl2" type="text" value="">
</td>
<td>
<input id="dl3" type="text" value="">
</td>
<td>
<input id="dl4" type="text" value="">
</td>
<td>
<input id="dl5" type="text" value="">
</td>
</table>
</div>
</center>
<center>
<center>
<span style="padding: 3px">
<button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
</span>
</center>
The code for the description and word matching is
<center>
<div class="source">
<div id="s1" class="draggyBox-small"></div>
<div id="s2" class="draggyBox-small"></div>
<div id="s3" class="draggyBox-large"></div>
<div id="s4" class="draggyBox-small"></div>
<div id="s5" class="draggyBox-small"></div>
</div>
</center>
<table id="tablestyle">
<tr id="row1">
<td>
<div id="t1" class="ltarget"></div>
</td>
<td id = "d1">
</td>
</tr>
<tr id="row2">
<td>
<div id="t2" class="ltarget"></div>
</td>
<td id = "d2">
</td>
</tr>
<tr id="row3">
<td>
<div id="t3" class="ltarget"></div>
</td>
<td id = "d3">
</td>
</tr>
<tr id="row4">
<td>
<div id="t4" class="ltarget"></div>
</td>
<td id = "d4">
</td>
</tr>
<tr id="row5">
<td>
<div id="t5" class="ltarget"></div>
</td>
<td id = "d5">
</td>
</tr>
</table>
The generate_html method is shown below
function generate_html() {
el1 = document.getElementById("el1").value
el2 = document.getElementById("el2").value
el3 = document.getElementById("el3").value
el4 = document.getElementById("el4").value
el5 = document.getElementById("el5").value
s1 = document.getElementById("s1")
s2 = document.getElementById("s2")
s3 = document.getElementById("s3")
s4 = document.getElementById("s4")
s5 = document.getElementById("s5")
dl1 = document.getElementById("dl1").value
dl2 = document.getElementById("dl2").value
dl3 = document.getElementById("dl3").value
dl4 = document.getElementById("dl4").value
dl5 = document.getElementById("dl5").value
d1 = document.getElementById("d1")
d2 = document.getElementById("d2")
d3 = document.getElementById("d3")
d4 = document.getElementById("d4")
d5 = document.getElementById("d5")
s1.innerHTML = el1
s2.innerHTML = el2
s3.innerHTML = el3
s4.innerHTML = el4
s5.innerHTML = el5
d3.innerHTML = dl1
d4.innerHTML = dl2
d5.innerHTML = dl3
d1.innerHTML = dl4
d2.innerHTML = dl5
answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
console.log(answer)
}
As stated above, I'd like to break this up into two sections such that when the user clicks the generate_html button the section transitions to the word matching html. If anyone could provide advice on how to achieve this I would appreciate it. Thank you.
I think your question is essentially, "How do I change the visibility of parts of the DOM on user input (e.g. the press of a button)?" The most basic answer is to use the CSS visibility property and set it in javascript via the HTML DOM style property.
I've translated your code into a working snippet below. See my comments inline for what I've changed. A couple of notes:
You didn't provide the table styling, or any other styling, for that matter, so it's unstyled in the snippet. Also, you set the tables to id="tablestyle" when I think you meant class="tablestyle", so I made that change. Having multiple elements with the same id is always a bad idea.
Even if the table were styled, one would be hard-pressed to get it looking like your screenshot. I suspect you have some styling that puts the table inline with all the draggyBoxes, but that seems rather clunkly to me, and also violates the div (new line) v. span (inline) rule. For a more modern approach, I would recommend familiarizing yourself with flexbox, which you can use pretty easily to replicate something like your screenshot.
function generate_html() {
el1 = document.getElementById("el1").value
el2 = document.getElementById("el2").value
el3 = document.getElementById("el3").value
el4 = document.getElementById("el4").value
el5 = document.getElementById("el5").value
s1 = document.getElementById("s1")
s2 = document.getElementById("s2")
s3 = document.getElementById("s3")
s4 = document.getElementById("s4")
s5 = document.getElementById("s5")
dl1 = document.getElementById("dl1").value
dl2 = document.getElementById("dl2").value
dl3 = document.getElementById("dl3").value
dl4 = document.getElementById("dl4").value
dl5 = document.getElementById("dl5").value
d1 = document.getElementById("d1")
d2 = document.getElementById("d2")
d3 = document.getElementById("d3")
d4 = document.getElementById("d4")
d5 = document.getElementById("d5")
s1.innerHTML = el1
s2.innerHTML = el2
s3.innerHTML = el3
s4.innerHTML = el4
s5.innerHTML = el5
d3.innerHTML = dl1
d4.innerHTML = dl2
d5.innerHTML = dl3
d1.innerHTML = dl4
d2.innerHTML = dl5
// get the input and results sections and flip their visibilities
document.getElementById("input-section").style.visibility = "hidden"
document.getElementById("results-section").style.visibility = "visible"
answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
console.log(answer)
}
<!-- Added input-section div so that we can control its visibility -->
<div id="input-section">
<center>
<div class="inputBoxes">
<table class="tablestyle">
<td>
<input id="el1" type="text" value="1">
</td>
<td>
<input id="el2" type="text" value="2">
</td>
<td>
<input id="el3" type="text" value="3">
</td>
<td>
<input id="el4" type="text" value="4">
</td>
<td>
<input id="el5" type="text" value="5">
</td>
</table>
</div>
<div class="inputBoxes">
<table class="tablestyle">
<td>
<input id="dl1" type="text" value="6">
</td>
<td>
<input id="dl2" type="text" value="7">
</td>
<td>
<input id="dl3" type="text" value="8">
</td>
<td>
<input id="dl4" type="text" value="9">
</td>
<td>
<input id="dl5" type="text" value="10">
</td>
</table>
</div>
<div style="padding: 3px">
<button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
</div>
</center>
</div>
<!-- Added results-section div so that we can control its visibility,
initially set to "hidden" -->
<div id="results-section" style="visibility: hidden">
<center>
<div class="source">
<div id="s1" class="draggyBox-small"></div>
<div id="s2" class="draggyBox-small"></div>
<div id="s3" class="draggyBox-large"></div>
<div id="s4" class="draggyBox-small"></div>
<div id="s5" class="draggyBox-small"></div>
</div>
</center>
<table class="tablestyle">
<tr id="row1">
<td>
<div id="t1" class="ltarget"></div>
</td>
<td id = "d1">
</td>
</tr>
<tr id="row2">
<td>
<div id="t2" class="ltarget"></div>
</td>
<td id = "d2">
</td>
</tr>
<tr id="row3">
<td>
<div id="t3" class="ltarget"></div>
</td>
<td id = "d3">
</td>
</tr>
<tr id="row4">
<td>
<div id="t4" class="ltarget"></div>
</td>
<td id = "d4">
</td>
</tr>
<tr id="row5">
<td>
<div id="t5" class="ltarget"></div>
</td>
<td id = "d5">
</td>
</tr>
</table>
</div>
I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});
I'm using class="input-append" in <tr> so each row contains different inputs, and i have a button to append new inputs row,
<tr class="input-append">
<td>
<span>Person {{$index+1}}</span>
</td>
<td align="center">
Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</tr>
for example:
ID,Name,Age , when i click the button a new row will be added. how i can access the inputs in javascript ?!! for example i want to access the Age in the second row.
regards.
Use document.getElementsByClassName() and QuerySelector
trs = document.getElementsByClassName("input-append");
personName = trs[1].querySelector("input[ng-model='person.name']").value;
personAge = trs[1].querySelector("input[ng-model='person.age']").value;
and your html
<table>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</td>
</tr>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name" value="testName"> Age: <input type="text" ng-model="person.age" value="testAge">
</td>
</td>
</tr>
</table>
See demo: http://jsbin.com/xemehoxono/edit?html,js,output
how i can get sum of balance amount of checked row?
I am not able to get event of checkbox and then column's value of that particular row.
Please help me out.
I got my Ans by my own
var grid = $("#amount_detail").data("kendoGrid");
grid.tbody.on("change", ".ob-paid", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
var balance_amount = item.balance_amount;
item.set("checkbox", $(e.target).is(":checked") ? 1 : 0);
if($(e.target).is(":checked")==1){
var t = ($("#tot_balance").val() * 1)+(balance_amount * 1);
$("#tot_balance").val(t);
}
else{
var t = ($("#tot_balance").val() * 1)-(balance_amount * 1);
$("#tot_balance").val(t);
}
I created a prototype on jsbin for you to check out. This should contain all of the necessary components to do what you're asking for. I am assuming the Kendo UI grid has an ID, so you would want to replace the selector that I have used with your grid's ID. However, the concept is essentially what you're looking for.
Assuming you have a grid with the id myTable, you would be able to do something like this:
<table id="myTable">
<thead>
<tr>
<th>
Select
</th>
<th>
Action
</th>
<th>
Action
</th>
<th>
Name
</th>
<th>
Unique ID
</th>
<th>
Format
</th>
<th>
Job #
</th>
<th>
Total Amount
</th>
<th>
Balance Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
John Doe
</td>
<td>
12345
</td>
<td>
AIR CAN
</td>
<td>
Random Number 11122
</td>
<td>
1500
</td>
<td class="balance">
2340
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jane Doe
</td>
<td>
56789
</td>
<td>
LCL CAN
</td>
<td>
Random Number 14562
</td>
<td>
1300
</td>
<td class="balance">
1000
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>
<input type="button" value="Make Payment" />
</td>
<td>
<input type="button" value="Change Details" />
</td>
<td>
Jim Bob
</td>
<td>
82352
</td>
<td>
AIR CAN
</td>
<td>
Random Number 985613
</td>
<td>
600
</td>
<td class="balance">
800
</td>
</tr>
</tbody>
</table>
<br />
<p id="total">
</p>
You're JavaScript might look something like this:
$(document).ready(function(){
//Store the totals here.
var totals = [];
//Handle checkbox click.
$('#myTable input:checkbox').on('click', function(){
var sum = 0;//For adding the sum
//Get the cell with the balance in it.
var number = $(this).parentsUntil('tbody').find('.balance').text();
//Handle if checked
if ($(this).is(':checked')){
$(this).parentsUntil('tbody').addClass('highlight');
totals.push(parseInt(number));
}else{//Handle if not checked
$(this).parentsUntil('tbody').removeClass('highlight');
var idx = totals.indexOf(parseInt(number));
totals.splice(idx, 1);
}
for (var n = 0; n < totals.length; n++){
sum += totals[n];
}
$('#total').text(sum > 0 ? sum : "");
});
});
Please see the prototype for clarification on use and for a live demo of the code.
Hope this helps. :)