Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to calculate some input fields using javasscript?
I'm really newbie at this so sorry if question was easy for you <3
<table>
<tr>
<td>
<input name="price_1" id="price_1" value="5" type="text">
<input name="pieces_1" id="pieces_1" type="text">
<input name="subtot_1" id="subtot_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_2" id="price_2" value="7" type="text">
<input name="pieces_2" id="pieces_2" type="text">
<input name="subtot_2" id="subtot_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_3" id="price_3" value="9" type="text">
<input name="pieces_3" id="pieces_3" type="text">
<input name="subtot_3" id="subtot_3" type="text">
</td>
</tr>
<tr>
<td id="total_price">21</td>
</tr>
Thank you everyone!
Hi Sanela i've created a demo to help you out, it uses jQuery
Demo
http://jsfiddle.net/L9PJa/
HTML
<table>
<tr>
<td>
<input name="price_1" id="price_1" class="price" value="5" type="text">
<input name="pieces_1" id="pieces_1" type="text" value="1">
<input name="subtot_1" id="subtot_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_2" id="price_2" class="price" value="7" type="text">
<input name="pieces_2" id="pieces_2" type="text" value="1">
<input name="subtot_2" id="subtot_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="price_3" id="price_3" class="price" value="9" type="text">
<input name="pieces_3" id="pieces_3" type="text" value="1">
<input name="subtot_3" id="subtot_3" type="text">
</td>
</tr>
<tr>
<td id="total_price"></td>
</tr>
<tr>
<td><input type="button" id="button" value="calculate"></td>
</tr>
JavaScript
$("#button").click(function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next().next().val(parseInt($(this).val())*parseInt($(this).next().val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next().next().val()));
});
});
on click for dynamically created elements
$("body").on("click", "#button", function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next().next().val(parseInt($(this).val())*parseInt($(this).next().val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next().next().val()));
});
});
inputs not next to each other
$("body").on("click", "#button", function() {
$('#total_price').text('0');
$(".price").each(function() {
$(this).next('input').next('input').val(parseInt($(this).val())*parseInt($(this).next('input').val()));
$('#total_price').text(parseInt($('#total_price').text())+parseInt($(this).next('input').next('input').val()));
});
});
Related
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
This question already has answers here:
Form inside a table
(3 answers)
Closed 3 years ago.
My required attribute which i placed inside a row of a table doesn't seem to be working at all.
I tried closing and un-closing the input tags and changing the button type to input type = "submit" but still the problem persist.
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<button type="button" onclick="add()" class="button button3">
ADD
</button>
</tr>
When I execute the code on my google chrome browser, the browser doesn't show any alert or warnings if i miss out any fields.
Put you table inside a form. This is a basic example and use action. Inside the add function you can put custom validators and submit the form using ajax
function add() {
}
<form action="add()">
<table>
<tr>
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<td><button type="submit" class="button button3">
ADD
</button></td>
</tr>
</table>
Try this code
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<input type="submit" onclick="add()" class="button button3" value="ADD">
</form>
</tr>
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<script>
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
</script>
<html>
<body>
<form action="" method="post">
<table border="1" id="table">
<tr> <td colspan="2">Select Technolgy:</td> </tr>
<tr> <td>c</td>
<td><input type="checkbox" name="techno[]" value="c" class='chk'></td>
</tr>
<tr> <td>hadoop</td>
<td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>
</tr>
<tr> <td>core java</td>
<td><input type="checkbox" name="techno[]" value="Core JAVA" class='chk'></td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>
</body>
</html>
Using this code, I candelete the checked checkbox. But how can I remove the checked checkbox containing row of table in the form?
I've read through this question, but it didn't help me.
Editing your code you can do it like this
function delBoxes() {
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for (var i = 0; i < boxes.length; i++) {
box = boxes[i];
if (box.checked) {
rowTag = box.parentNode.parentNode;
tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr>
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr>
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' />and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
But you have to consider changing design to something better. Set ids or classes and refer to them, instead of relative "magic number of levels".
If you mark rows with data-tech attribute then you could do something like:
function delBoxes() {
var classname = document.getElementsByClassName("chk");
for (var i = 0; i < classname.length; i++) {
box = classname[i]
if (box.checked) {
elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
elements[0].parentNode.removeChild(elements[0]);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr data-tech="c">
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr data-tech="hadoop">
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr data-tech="Core JAVA">
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' /> and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg
Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">
You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>