Please can someone help
I have written some JavaScript that should add the number of days written into my form to the start date of a reservation. It should then output the date of return. I don't see any syntax errors but the script doesn't run. Please can someone help me identify the source of the problem.
JavaScript
<script type="application/javascript">
function ReturnDate(){
var reservationStart = document.getElementById('ReservationStart').value;
var requestedDays = parseInt(document.getElementById('days').value);
var returnDate = document.getElementById('ReturnDate');
var arrParts = reservationStart.split("/");
var myDate = new Date(arrParts[2], parseInt(arrParts[1])-1, parseInt(arrParts[0]) + requestedDays, 0, 0, 0, 0);
var sResult = ("0"+myDate.getDate()).substr(-2)+"/";
sResult += ("0"+(myDate.getMonth()+1)).substr(-2)+"/";
sResult += myDate.getFullYear();
document.getElementById('ReturnDate').value = sResult;
}
</script>
HTML
<form name="frmHTML" method="post" action="">
<table id="tables" class="form" style="width:100%">
<tr>
<td>Game ID</td>
<td><input type="text"
required autocomplete="off"
value= "<?php echo (isset($ID))?$ID:'';?>"
name="gameID"
id="gameID"
placeholder= "Enter A Number between 1 and 8"
style="width:80%"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit"
value= "Search For Game"
name= "FindDetails"
id= "FindDetails"
style= "width:80%" /></td>
</tr>
<tr>
<td>Game Name</td>
<td><input type= "text"
value = "<?php echo (isset($GameName))?$GameName:'';?>"
name="GameName"
id= "GameName"
readonly
style "width:80%" /></td>
</tr>
<tr>
<td>Game Rental Cost(per day)</td>
<td><input type= "text"
value = "<?php echo (isset($GameCost))?$GameCost:'';?>"
name="gameCost"
id="gameCost"
readonly
style= "width:80%" /></td>
</tr>
<tr>
<td>Number of days</td>
<td><input type= "text"
name="days"
id="days"
placeholder="Enter the number of days you wish to borrow the game for"
onkeyup = "mycalculate()"
autocomplete="off"
style="width:80%" /></td>
</tr>
<tr>
<td>Total Cost</td>
<td><input type="text"
value=""
name="total"
id= "total"
readonly
style="width:80%"/></td>
</tr>
<tr>
<td>Your Name</td>
<td><input type="text"
value=""
name="StudentName"
id="StudentName"
autocomplete="off"
style="width:80%"/></td>
</tr>
<tr>
<td>Date Start(dd/mm/yyyy)</td>
<td><input type="text"
value=""
name="ReservationStart"
id="ReservationStart"
onkeyup = "ReturnDate()"
autocomplete="off"
style="width:80%"/></td>
</tr>
<tr>
<td>Date End(dd/mm/yyyy)</td>
<td><input type="text"
value=""
name="ReturnDate"
id="ReturnDate"
style="width:80%"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit"
value= "Book Game Now"
name= "Submit"
id= "Submit"
style= "width:80%" /></td>
</tr>
</table>
</form>
The problem was the function name was the same as one of the variables. This meant the computer got confused.
The solution:
JavaScript
<script>
function myReturnDate(){
var reservationStart = document.getElementById('ReservationStart').value;
var requestedDays = parseInt(document.getElementById('days').value);
var returnDate = document.getElementById('ReturnDate');
var arrParts = reservationStart.split("/");
var myDate = new Date(arrParts[2], parseInt(arrParts[1])-1, parseInt(arrParts[0]) + requestedDays, 0, 0, 0, 0);
var sResult = ("0"+myDate.getDate()).substr(-2)+"/";
sResult += ("0"+(myDate.getMonth()+1)).substr(-2)+"/";
sResult += myDate.getFullYear();
document.getElementById('ReturnDate').value = sResult;
}
</script>
HTML
<form name="frmHTML" method="post" action="">
<table id="tables" class="form" style="width:100%">
<tr>
<td>Game ID</td>
<td><input type="text"
required autocomplete="off"
value= "<?php echo (isset($ID))?$ID:'';?>"
name="gameID"
id="gameID"
placeholder= "Enter A Number between 1 and 8"
style="width:80%"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit"
value= "Search For Game"
name= "FindDetails"
id= "FindDetails"
style= "width:80%" /></td>
</tr>
<tr>
<td>Game Name</td>
<td><input type= "text"
value = "<?php echo (isset($GameName))?$GameName:'';?>"
name="GameName"
id= "GameName"
readonly
style "width:80%" /></td>
</tr>
<tr>
<td>Game Rental Cost(per day)</td>
<td><input type= "text"
value = "<?php echo (isset($GameCost))?$GameCost:'';?>"
name="gameCost"
id="gameCost"
readonly
style= "width:80%" /></td>
</tr>
<tr>
<td>Number of days</td>
<td><input type= "text"
name="days"
id="days"
placeholder="Enter the number of days you wish to borrow the game for"
onkeyup = "mycalculate()"
autocomplete="off"
style="width:80%" /></td>
</tr>
<tr>
<td>Total Cost</td>
<td><input type="text"
value=""
name="total"
id= "total"
readonly
style="width:80%"/></td>
</tr>
<tr>
<td>Your Name</td>
<td><input type="text"
value=""
name="StudentName"
id="StudentName"
autocomplete="off"
style="width:80%"/></td>
</tr>
<tr>
<td>Date Start(dd/mm/yyyy)</td>
<td><input type="text"
value=""
name="ReservationStart"
id="ReservationStart"
onkeyup = "myReturnDate()"
autocomplete="off"
style="width:80%"/></td>
</tr>
<tr>
<td>Date End(dd/mm/yyyy)</td>
<td><input type="text"
value=""
name="ReturnDate"
id="ReturnDate"
style="width:80%"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit"
value= "Book Game Now"
name= "Submit"
id= "Submit"
style= "width:80%" /></td>
</tr>
</table>
</form>
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 search all my table and display the corresponding line.
I can not display the result of the search correctly when the search is on the first column, this column contains a rowspan. Instead of displaying the 2 or 3 corresponding lines, it's just the first one displayed
Input search
<div>
<input id="searchInput" type="text" placeholder="Search.."
</div>
a table
<table border="1" id="mytable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
<th>Item5</th>
<th>Item6</th>
<th>Item7</th>
<th>Item8</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td rowspan='1'>D20180910</td>
<td>10910</td>
<td>W1</td>
<td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
<td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
<td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
<td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='2'>D20180905</td>
<td>10905</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>
<td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
<td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>10905</td>
<td>W1</td>
<td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
<td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
<td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
<td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='3'>D20180905</td>
<td>20105</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>
<td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
<td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>w1</td>
<td><input type="text" value="" id="iddb_146" ></td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
<td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
<td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>F4</td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
<td><input type="text" value="" id="iddb_925" ></td>
<td><input type="text" value="" id="iddb_825" ></td>
<td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
</tbody>
</table>
A javascript code
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.
You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>
Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/
here i want to create dynamically grand total. i got total of price and quantity. but i cant get grand total to total, so kindly request to solve this, here i have to use php for loop for ten row
function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login !!');
var p="demo"+time;
var y = document.getElementById(p).value;
//var z=y+ans;
document.getElementById("total").innerHTML = ans;
}
<table>
<?php
$i=0;
while($i<=10)
{
?>
<tr>
<td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
<td><input id="demo<?php echo $i; ?>" type="text" value="0" onChange="my(<?php echo $i; ?>,this.value)" >
</td>
</tr>
<?php
$i++;
}?>
<h4> Total :- <span id = "total"></span></h4>
</table>
Store your Total count globaly, and Get all elements of your "demo" by querySelector and then calculate them.
Check snippest.
var _mytotal=0;
function _Function1(time,v)
{
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
_mytotal=0;
_Function2();
}
function _Function2()
{
var demos = document.querySelectorAll('*[id^="demo"]');
demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item)
{
_mytotal = +_mytotal + +document.getElementById(item.id).value;
document.getElementById("total").textContent = _mytotal;
}
<table>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td><input id="price0" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
<td><input id="demo0" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price1" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
<td><input id="demo1" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price2" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
<td><input id="demo2" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price3" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
<td><input id="demo3" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><input id="price4" type="text" readonly value="5"></td>
<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
<td><input id="demo4" type="text" readonly value="0" ></td>
</tr>
<tr>
<td><h4>Grand Total</h4></td>
<td> </td>
<td><h4><span id = "total"></span></h4></td>
</tr>
</table>
I have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});