Creating a cake ordering form, and the # of cakes available can vary from month to month. I am attempting to tweak a JS function created from #Anderson Contreira but in my fiddle it does not work. Here is what I have thus far - Why does nothing change when I enter a quantity?
https://jsfiddle.net/2uack1w6/
Syntax
JS
function calculate(el){
var quantity = el.val();
var id = el.attr("id").replace("item_","").replace("_qty","");
var data = {quantity: quantity,id:id};
var targetTax = $("#item_"+id+"_tax");
var targetTotalPrice = $("#item_"+id+"_totalprice");
$.post($.post(window.alert("It's been one or two or three entered");
});
}
var qty = $("#item_1_qty");
var qty1 = $("#item_2_qty");
var qty2 = $("#item_3_qty");
qty.on("keyup",function(){
window.alert("It's been one or two or three entered");
});
HTML/PHP
<body>
<form id="Form1" runat="server">
<div id="Form1" runat="server">
<table id="table1" border="1">
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Tax</th>
<th>Total</th>
</tr>
<tr>
<td><label for="lblChoccake">Choc Cake</label></td>
<td><label for="lblitem1price">$25.00</label></td>
<td><input type="text" id="item_1_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_1_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_1_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
<tr>
<td><label for="lblLemonFudgecake">Lemon Fudge Cake</label></td>
<td><label for="lblitem2price">$15.00</label></td>
<td><input type="text" id="item_2_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_2_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_2_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
<tr>
<td><label for="lblCoconut">Coconut Cake</label></td>
<td><label for="lblitem3price">$35.00</label></td>
<td><input type="text" id="item_3_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_3_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_3_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
</table>
</div>
</form>
</body>
jQuery(function($) {
var qty = $("#item_1_qty");
var qty1 = $("#item_2_qty");
var qty2 = $("#item_3_qty");
qty.on("keyup",function(){
alert("It's been one or two or three entered");
});
});
Try this, you are assigning variables before the document has actually loaded.
Take a look here: https://jsfiddle.net/andersoncontreira/mtu6syby/1/
You can make some changes and will work well:
Add a class in each input of item_?_qty e.g.: <input type="text" id="item_1_qty" class="item_qty" />
In your javascript, you can leave the call generic:
jQuery(document).ready(function(){
//you can use a class for help you
$(".item_qty").on("keyup",function(){
//window.alert("It's been one or two or three entered");
calculate($(this));
});
});
Related
I want to fill out a form when opening a page (it's a page where you edit your profile information).
Here is my code:
<head>
<script type="text/javascript">
function addValues() {
document.getElementById("datePicker").value = ViewBag.b.DateOfBirth.ToShortDateString();
document.getElementById("name").value = ViewBag.b.Username;
document.getElementById("username").value = ViewBag.b.Username;
document.getElementById("password").value = ViewBag.b.Password;
document.getElementById("lastname").value = ViewBag.b.Lastname;
}
</script>
</head>
<body onload="addValues()">
<h2>EditProfile</h2>
<form action="~/Authentication/EditProfile" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="lastname" /></td>
</tr>
<tr>
<td>Date of birth:</td>
<td><input type="date" name="dateofbirth" id="datePicker" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save" />
</td>
</tr>
</table>
</form>
</body>
When loading a page, it doesn't fill out the information, and I can't find the mistake.
Is there a better way of doing this?
The rendered JavaScript looks like:
function addValues() {
document.getElementById("datePicker").value = 11.9.2001. 00:00:00;
document.getElementById("name").value = Mirko;
document.getElementById("username").value = micro;
document.getElementById("password").value = 123456789;
document.getElementById("lastname").value = Mijanovic;
}
You missed setting the id for some of the <input/> elements.
<head>
<script type="text/javascript">
// Example data
const ViewBag = {
b: {
DateOfBirth: '2020-09-30',
Username: 'username',
Password: 'password',
Lastname: 'lastname'
}
};
function addValues() {
document.getElementById("datePicker").value = ViewBag.b.DateOfBirth;
document.getElementById("name").value = ViewBag.b.Username;
document.getElementById("username").value = ViewBag.b.Username;
document.getElementById("password").value = ViewBag.b.Password;
document.getElementById("lastname").value = ViewBag.b.Lastname;
}
</script>
</head>
<body onload="addValues()">
<h2>EditProfile</h2>
<form action="~/Authentication/EditProfile" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="lastname" id="lastname" /></td>
</tr>
<tr>
<td>Date of birth:</td>
<td><input type="date" name="dateofbirth" id="datePicker" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save" />
</td>
</tr>
</table>
</form>
</body>
</html>
Hope this helps,
I think the problem is a combination of things, as highlighted in a couple of comments / answers.
Add IDs to all inputs (password and lastname don't have IDs)
Ensure that ViewBag is accessed with the # prefix
Ensure that JavaScript literals are rendered appropriately
I believe the following code should handle ViewBag and JavaScript literals:
<script type="text/javascript">
function addValues() {
document.getElementById("datePicker").value = '#ViewBag.b.DateOfBirth.ToShortDateString()';
document.getElementById("name").value = '#ViewBag.b.Username';
document.getElementById("username").value = '#ViewBag.b.Username';
document.getElementById("password").value = '#ViewBag.b.Password';
document.getElementById("lastname").value = '#ViewBag.b.Lastname';
}
</script>
Note that all of the literal values are quoted. You may need to handle additional escaping to prevent any of the ViewBag properties from causing an error due to a ' in the property value.
I need to provide option to user to enter multiple rows of data in form and save. I have html something like this.
<form id="books">
<table>
<tbody>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
</tbody>
</table>
<button id="AddRow">Add Row</button>
<button id="SubmitBook">Save</button>
</form>
I want to save data in JSON thru PHP. Can someone help how can I serialize my form to POST like below, let me know if I have to use HTML in different way to make this easier (I tried finding solution, couldn't find anyone fitting my requirement):
{
"books": [
{"bookName":"html", "author":"xxxxx", "publisher":"johnWiley", "year":"2010"},
{"bookName":"CSS", "author":"yyyyy", "publisher":"johnWiley", "year":"2011"},
{"bookName":"javaScript", "author":"aaaa", "publisher":"johnWiley", "year":"2012"},
{"bookName":"PHP", "author":"bbbbb", "publisher":"johnWiley", "year":"2013"}
]
}
var arr = [];
$('#SubmitBook').click(function() {
var tablerow = $('#table').find('tr');
tablerow.each(function() {
var bookname = $(this).find('td .bookName').val();
var author = $(this).find('td .author').val()
var publisher = $(this).find('td .publisher').val()
var year = $(this).find('td .year').val()
arr.push({
bookname: bookname,
author: author,
publisher: publisher,
year: year
})
})
console.log(JSON.stringify(arr))
})
Try like this
DEMO
I want to alert the input value of each row except the first column.
Here is my code.
<table id="table">
<tr>
<td><input type="text" size="5" value="name"/></td>
<td><input type="text" size="5" value="number"/></td>
<td><input type="text" size="5" value="class"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="bbbbb"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="cccc"/></td>
<td><input type="text" size="5" value="5"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
<tr>
<td><input type="text" size="5" value="ddddd"/></td>
<td><input type="text" size="5" value="1"/></td>
<td><input type="text" size="5" value="2"/></td>
</tr>
$(document).ready(function() {
$("#table tr:gt(0) td:gt(0) ").each(function()
{
a=$(this).find('input[type="text"]').val();
alert(a);
});
});
While running this code all value alerted except "bbbb". (ie,ccccc ,dddd alerted.). I only need each rows second one column onwords.
fiddle: https://jsfiddle.net/k1tfo5kb/
This should work:
https://jsfiddle.net/23jcejbm/
$(document).ready(function() {
var $cells = $("#table tr td").not(':first-child'),
$inputs = $cells.find('input[type="text"]');
$.each($inputs, function(){
var value = this.value;
alert(value);
});
});
Here you go: https://jsfiddle.net/pukw0uLz/1/
I changed alert to console.log, much less aggressive. Make sure to open you web console!
I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.
You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo
Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here
Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);
I have a php simple program to calculate a textbox with another textbox, 1 years ago, there's no problem after now, I have problem with my JavaScript. It can't count my textbox.
My form code is here (without html tag, to minimize code in here):
<table>
<tr>
<td>Tol</td>
<td>:</td>
<td><input type="text" maxlength="11" name="tol" onkeydown="calculate()" value="0" /></td>
</tr>
<tr>
<td>Parkir</td>
<td>:</td>
<td><input type="text" maxlength="11" name="parkir" onkeydown="calculate()" value="0" /></td>
</tr>
<tr>
<td>Joki</td>
<td>:</td>
<td><input type="number" maxlength="11" name="joki" onkeydown="calculate();" value="0" /></td>
</tr>
<tr>
<td>Other</td>
<td>:</td>
<td><input type="number" name="other" maxlength="11" onkeydown="calculate();" value="0" /> <input type="text" name="othername" maxlength="50" /> </td>
</tr>
<tr>
<td>Total</td>
<td>:</td>
<td><input type="text" id="subtotal" onfocus="this.value = numberFormat(this.value);" name="subtotal" maxlength="100" value="0" />
<input type="text" id="totalbox" name="totalbox" maxlength="100" />
</td>
</tr>
</table>
and my JS script:
function calculate(){
var num1=document.myform.tol.value;
var num2=document.myform.parkir.value;
var num3=document.myform.joki.value;
var num4=document.myform.other.value;
var sum=parseFloat(num1)+parseFloat(num2)+parseFloat(num3)+parseFloat(num4);
document.getElementById('totalbox').value=sum.toString();
document.getElementById('subtotal').value=sum.toString();
}
can somebody correct my code or is there any update from JS that made my JS code doesn't work now?
Try using the onkeyup event instead of onkeydown. The onkeydown event fires before the value of your textbox reflects the input being typed in.
Try referencing the input boxes by id rather than by form.name:
function calculate(){
var num1=document.getElementById('tol').value;
var num2=document.getElementById('parkir').value;
var num3=document.getElementById('joki').value;
var num4=document.getElementById('other').value;
var sum=parseFloat(num1)+parseFloat(num2)+parseFloat(num3)+parseFloat(num4);
document.getElementById('totalbox').value=sum.toString();
document.getElementById('subtotal').value=sum.toString();
}
add the id attribute to your inputs:
<input type="text" maxlength="11" name="tol" id="tol" onkeydown="calculate()" value="0" />
...
You might also want to make your code a little more robust by checking to see if the element exists before trying to get the value:
function calculate(){
var fld1 = document.getElementById('tol');
var num1 = 0;
if (fld1 && fld1 != 'undefined') num1 = fld1.value;
...