I have code here. There are no errors in this code, but when I was tried to execute this, the output is shown just for a fraction of second. After that, the fields are changed to null. I want all the values to be shown, even after clicking the submit button.
<script type="text/javascript">
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
<body>
<form onsubmit="calcu();">
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height">
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight">
</td>
</tr>
<tr>
<td>
<input type="submit" value="CALCULATE">
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
Show Your Code First for more.
As much i can from your statement is that you have a button which is type submit and your values are not holding because when you click on submit type button it will post your data and find the next where it has to go in action attribute as if you have not given the action attribute (a/c to me ) so its reloading the page which refreshing the whole content that's why your page is not holding the data.
But if you want it to be hold make your button type simple "Button".
I think this will resolve your problem.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" >
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
</script>
</head>
<body>
<form id="form1" >
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height" />
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="CALCULATE" onclick="calcu();" />
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
This will do good You are calling function on form submit which reloads the page so previous page does not exist thats why is not doing any good so your have to change your button type to button and on button click you can call the function you will get your desired result.
Related
var data = document.getElementById("data");
var k = (0);
data.innerHTML = `
<h1 align = center> java .-. <h1>
`;
function verificar(){
document.getElementById("az").innerHTML = "Calificacion:"+k
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
var p3 = document.getElementById("p3").value;
if (p1==7){
k++
}
if (p2==184){
k++
}
if (p3==125){
k++
}
}
<html>
<head>
<title>Java</title>
</head>
<body>
<H1 align=center>Pg de java </H1>
<div id="data">
</div>
<table>
<tr>
<td>
<label>√49</label>
</td>
<td>
<input type="text" name="p1" id="p1">
</td>
</tr>
<tr>
<td>
<label>92x2</label>
</td>
<td>
<input type="text" name="p2" id="p2">
</td>
</tr>
<tr>
<td>
<label>625/5</label>
</td>
<td>
<input type="text" name="p3" id="p3">
</td>
</tr>
<tr>
<td>
<input type="button" name="verificar" id="verificar" onclick="verificar()">
</td>
</tr>
<tr>
<td>
<font size = "3" id = "az">Calificacion:</font><font size = "3">/3</font>
</td>
</tr>
</table>
</div>
<script src = "main.js" type="text/javascript" ></script>
</body>
</html>
Each time i press the button to review my quizz it shows a 0 but if you press it again it sum the k value each time you press it.
Its my first time using javascript.
K is a val that each time you have a correcto question k++.
Az is a text Id that lets the java code to change the text to: Calificación + k
The issue is that whenever you're clicking on the button, you're continuously updating the value of k without resetting it on every submits and you're printing its value even before checking the if statements.
Therefore, changes that you have to make is -
include k = 0 at the start of the verificar() function to locally reset the value.
move document.getElementById("az").innerHTML = "Calificacion:"+k at the end of the if statements.
Your verificar() function should now look like this -
function verificar(){
k=0;
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
var p3 = document.getElementById("p3").value;
if (p1==7){
k++
}
if (p2==184){
k++
}
if (p3==125){
k++
}
document.getElementById("az").innerHTML = "Calificacion:"+k
}
I am just starting to use JavaScript and this seems to be really a beginner question. I am trying to make a web page where user can input a number and be able to square it. I have been able to write following code which shows the page with prompt and input fields, button to start calculation and an answer area:
<html>
<head>
<script>
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementByName("SNUM");
document.getElementById("answer_area").innerHTML = x * x;
}
</script>
</head>
<body>
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->
</body>
</html>
However, there is no response when the button is clicked. Where is the problem and how can this be solved. Thanks for your help.
Three things in this line
document.getElementsByName("SNUM")[0].value;
You need to get the element using index since getElementsByName gives a collection. Secondly you need to get the value so use value with it and thirdly there is a typo in your code
function calculate() {
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
<form>
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Enter a number: </td>
<td><input type="text" name="SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</u></b>
<p id="answer_area"></p>
<!-- answer to be placed here; -->
Simple, the problem is here:
var x = document.getElementByName("SNUM");
There is no method called getElementByName but rather:
getElementsByName("SNUM")
Change your code to:
<html>
<head>
<script>
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
</script>
</head>
<body>
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->
</body>
</html>
1) Use miss s in getElementsByName.
2) getElementsByName method return a NodeList Collection of elements so get first with [0].
3) For get value use of 'value' property.
So Change:
var x = document.getElementByName("SNUM");
To:
var x = document.getElementsByName("SNUM")[0].value;
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->
I have a button that the user clicks on to add a new row to the bottom of an input table. I would like this to also increment the id. So the next row would have desc2, hours2, rate2 and amount2 as the id. Is there a way to do this in the JavaScript function.
Also - just want to check my logic on this. After the user completes the filled out form, I will be writing all the data to a mysql database on two different tables. Is this the best way to go about this? I want the user to be able to add as many lines in the desc_table as they need. If this is the correct way to be going about this, what is the best way to determine how many lines they have added so I can insert into the db table using a while loop?
JS file:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
HTML:
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>
Thank you!
Check this code.After appending the row it counts the number of rows and and then assigns via if condition and incremental procedure the id's:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
for(var i=1;i<rows.length;i++){
if(rows[i].children["0"].children["0"].id.match((/desc/g))){
rows[i].children["0"].children["0"].id='desc'+i;
}
if(rows[i].children["1"].children["0"].id.match((/hours/g))){
rows[i].children["1"].children["0"].id='hours'+i;
}
if(rows[i].children["2"].children["0"].id.match((/rate/g))){
rows[i].children["2"].children["0"].id='rate'+i;
}
if(rows[i].children["3"].children["0"].id.match((/amount/g))){
rows[i].children["3"].children["0"].id='amount'+i;
}
}
}
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>
Please change variable names for more descriptive. :)
Example solution...
https://jsfiddle.net/Platonow/07ckv5u7/1/
function new_line() {
var table = document.getElementById("desc_table");
var rows = table.getElementsByTagName("tr");
var row = rows[rows.length - 1];
var newRow = rows[rows.length - 1].cloneNode(true);
var inputs = newRow.getElementsByTagName("input");
for(let i=0; i<inputs.length; i++) {
inputs[i].id = inputs[i].name + rows.length;
}
var textarea = newRow.getElementsByTagName("textarea")[0];
textarea.id = textarea.name + rows.length;
table.appendChild(newRow);
}
Note that I removed/edited below fragment.
x.style.display = "";
r.parentNode.insertBefore(x, r);
You could do this a lot easier with jquery or another dom manipulation language, but with vanilla JS here's an example of simply looping through the new row's inputs & textarea and incrementing a counter to append.
var count = 1;
function new_line() {
count++;
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
// update input ids
var newInputs = Array.from(x.getElementsByTagName('input'))
.concat(Array.from(x.getElementsByTagName('textarea')));
newInputs.forEach(function(input) {
var id = input.getAttribute('id').replace(/[0-9].*/, '');
input.setAttribute('id', id + count);
});
}
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td ><textarea name="description" id="desc1" ></textarea></td>
<td> <input type="text" name="hours" id="hours1" ></td>
<td> <input type="text" name="rate" id="rate1"></td>
<td><input type="text" name="amount" id="amount1"></td>
<td>
<button type="button" name="add_btn" onclick="new_line(this)">+</button>
<button type="button" name="delete_btn" onclick="delete_row(this)">x</button>
</td>
</tr>
</table>
I was able to create the template, but I'm not sure what to do from here.
When I click my add item button, I want the values to go into the text area I created on the bottom and change the subtotal and total as I keep adding items.
<html>
<head>
<meta charset = "utf-8">
<h1>Invoice Manager</h1>
<style type "text/css">
div {position: absolute;
top: 200px;
left: 90px;
z-index: 1;}
</style>
<script type = "text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td align="right">Item Code:</td>
<td align="left"><input type="text" name="code" /></td>
</tr>
<tr>
<td align="right">Item Name:</td>
<td align="left"><input type="text" name="itemName" /></td>
</tr>
<tr>
<td align="right">Item Cost:</td>
<td align="left"><input type="text" name="cost" /></td>
</tr>
<tr>
<td align="right">Quantity:</td>
<td align="left"><input type="text" name="quantity" /></td>
</tr>
</table>
<div id="AddItemButton">
<td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
</div>
</form>
<br></br> <br></br>
<font size = "5">Current Invoice</font>
<hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>
<p><label> <br>
<textarea name = "textarea"
rows = "12" cols = "180"></textarea>
</label></p>
<form>
<table>
<tr>
<td align="right">Subtotal:</td>
<td align="left"><input type="text" name="subtotal" /></td>
</tr>
<tr>
<td align="right">Sales Tax:</td>
<td align="left"><input type="text" name="tax" /></td>
</tr>
<tr>
<td align="right">Total:</td>
<td align="left"><input type="text" name="total" /></td>
</tr>
</table>
</form>
<form>
<input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
</form>
That's what I have as a template. When I type in Item Code, Item Name, Item Cost and Quantity in those fields, I'd like those values to go in the text area on the bottom. I imagine I would need to write something in the script.
I'm not sure how to achieve this, but I was thinking that the first batch of info the user adds could equal a variable like a
Then the second values inputted could equal b
So let's say the user adds 3 items.
total = (a + b + c)
Or something like that.
Here's an example of what one "Add Item" would do. I'd like these submissions to appear in the text field I created like so
---Item Code--- ---Item Name--- ---Item Cost--- ---Quantity---
3 Dell 499 1
Any ideas on what I could do? I'm at a loss
Thanks
EDIT: I'm adding my script, I'm wondering if there's something wrong with it
<script type = "text/javascript">
function computeCost(){
var code = document.getElementById("code").value;
var a = code; // item code
var itemName = document.getElementById("itemName").value;
var b = itemName; // item name
var cost = document.getElementById("cost").value;
var c = cost; // calculate cost
var quantity = document.getElementById("quantity").value;
var d = quantity; // calculate quantity of items
var subtotal = document.getElementById("subtotal").value;
var e = c * d; // multiplying cost by quantity = subtotal
var tax = document.getElementById("tax").value;
var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed
var total = document.getElementById("total").value;
var g = f + e; //adding tax to subtotal = total value
document.getElementByID("yo").value = total;
}
function clear()
{
document.getElementById("a","b","c","d", "e", "f", "g").reset();
} // end of clear
</script>
I dont have much time to give a polished script, but this provides basic functionality
EDIT: added script tags and basic JQUERY things
note that because of loading JQUERY from the internet, it wont work without internet connection, if you wish to use it without internet con, download the script and link it locally
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type = "text/javascript">
$(function(){
var textContent = $('textarea').val();
var textRow = "";
$('input[type=submit]').click(function(){
$('input[type=text]').each(function(){
textRow = textRow+$(this).val()+'\t';
});
textContent = textContent + '\n' + textRow;
textRow = "";
$('textarea').val(textContent);
});
});
</script>
this is just the necessary JS and HTML, nothing fancy:
function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
val1 = parseInt(id("t1").value);
val2 = parseInt(id("t2").value);
id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}
<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>
<html dir = rtl>
<head>
<title> </title>
<meta HTTP-EQUIV="Content-language" CONTENT="ar">
<script type="javascript">
function d()
{
document.getElementById("sName").innerHTML ='Name submitted';
}
</script>
</head>
<body>
<form name = "Info" method = "set" action = "">
<table border = "0" width = "40%" align = "center">
<tr>
<td> الاســــــــــــــــم: </td>
<td> <input type="text" name = "CurName" size = "31"> </td>
<td> <p id = "sName"> </p> </td>
</tr>
<tr>
<td> العــــــــــــــــمر :</td>
<td> <input type = "text" name = "CurAddress" size = "10"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> العنـــــــــــــوان :</td>
<td> <input type = "text" name = "CurAddress" size = "45"></td>
<td> <p id = "sAddress"> </p> </td>
</tr>
<tr>
<td> الحالــــــــــــــــة :</td>
<td> <input type = "radio" name = "Mar" > متزوج<input type = "radio" name = "Sin" > أعزب</td>
<td> <p id = "SitName"> </p> </td>
</tr>
<tr>
<td colspan = 2 align = center> <button type = "submit" onClick = "d(); return false;">ارسال </button> <button type = "reset">مسح</button> </td>
</tr>
</table>
</form>
</body>
</html>
When I press the submit button I expected that some words beside the first textbox will disappear, but nothing happened. Can some one explain to me where the problem is?
You have not properly defined your script tag. Proper value will be text/javascript.
<script type="text/javascript">
instead of
<script type="javascript">
Your js code is correct but you have to change that
<script type="javascript"> as <script type="text/javascript">
See your code here its working perfectly in jsfiddle
http://jsfiddle.net/WxtJ3/
<script type="text/javascript">
and change
<button type = "submit" onClick = "d();">
to
<button type = "button" onClick = "d();">
or else your page gonna be reloading