This question already has answers here:
How to use document.getElementByName and getElementByTag?
(6 answers)
Closed 5 years ago.
I am writing a simple online order form for widgets which is supposed to take the order of 3 widgets, add them together and give a total number and a cost. However, when the button is clicked to go into the function, nothing happens. I am not sure whether the fault is in getting the data into the function or getting it out of the function.
function cal() {
var wid1 = document.getElementById("widg1").value;
var wid2 = document.getElementById("widg2").value;
var wid3 = document.getElementById("widg3").value;
var tot = (wid1 + wid2 + wid3);
var dollars = ((wid1 * 12.45) + (wid2 * 15.34) + (wid3 * 28.99));
document.getElementByName("total").value = tot;
document.getElementByName("money").value = dollars;
}
<form name="widgets">
widget model 37AX-L:<br>
<input type="text" id="widg1" name="37AX-L" value=0><br> widget model 42XR-J:<br>
<input type="text" id="widg2" name="42XR-J" value=0><br> widget model 93ZZ-A:<br>
<input type="text" id="widg3" name="93ZZ-A" value=0><br>
<br>
<input type="button" name="B1" value="Calculate" onclick="cal()"><br>
</form>
<input type="text" name="total" id="total"> total widgets <br>
<input type="text" name="money" id="money"> total dollars
You omitted s in Elements.
document.getElementsByName("total")[0].value=tot not document.getElementByName("total")
<form name="widgets">
widget model 37AX-L:<br>
<input type="text" id="widg1" name="37AX-L" value=0><br>
widget model 42XR-J:<br>
<input type="text" id="widg2" name="42XR-J" value=0><br>
widget model 93ZZ-A:<br>
<input type="text" id="widg3" name="93ZZ-A" value=0><br>
<br>
<input type="button" name="B1" value="Calculate" onclick="cal()"><br>
</form>
<input type="text" name="total" id="total"> total widgets <br>
<input type="text" name="money" id="money"> total dollars
<script>
function cal(){
var wid1 = document.getElementById("widg1").value;
var wid2 = document.getElementById("widg2").value;
var wid3 = document.getElementById("widg3").value;
var tot = (wid1+wid2+wid3);
var dollars = ((wid1*12.45)+(wid2*15.34)+(wid3*28.99));
document.getElementsByName("total")[0].value=tot;
document.getElementsByName("money")[0].value=dollars;
}
</script>
Related
I'm exercising in javascript calculations using a combination of maths and variables and i'm finding a difficulty on using the right way parentheses. For example i want to do the following calculation [(4,95/ans2)-4,5]*100 where ans2 is a calculated variable. In the last field i get 45.000 and i should take - 4.046 ... if the input in the first and second fields was 2 + 2
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<input type="text" name="ans3" size="35" id="ans3" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
/* in the following line i can't figure how to use with a proper way parentheses to prioriterize the calculations with the way i mentioned in the example before the code snippet*/
document.getElementById('ans3').value = [( 4.95 / parseInt(document.getElementById('ans2').value)) - 4.5] * 100;
}
</script>
The issue was in this row: document.getElementById('ans3').value = [( 4.95 / parseInt(document.getElementById('ans2').value)) - 4.5] * 100;. You need to use () instead of [] for grouping and you also don't need to parseInt the value. Here is the working snippet:
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
/* in the following line i can't figure how to use with a proper way parentheses to prioriterize the calculations with the way i mentioned in the example before the code snippet*/
document.getElementById('ans3').value = ((4.95 / document.getElementById('ans2').value) - 4.5) * 100
}
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<input type="text" name="ans3" size="35" id="ans3" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
new guy here. I have a feeling this is an extremely basic question but I can't get this Jquery code to write the output of the function to html and have it show up. I believe it's an issue with the script but unsure if I am doing something wrong with html as well.
The goal of this function is to create a calculator that gives future investment value based on what the user inputs. When I click submit, It used to change all of the html to show just 'NaN' but now when I click the submit button, it clears the input boxes but does not give me any number or any answer even though I believe I've set it to display the number to
HTML
<body>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
jQuery
$('#submit').click(function(){
$('#result').html(function(){
return toString(output,10);
});
});
var princeple = parseInt($('#princeple'),10);
var time = parseInt($('#time'),10);
var rate = parseInt($('#rate'),10);
var output = (princeple * time + rate);
Here is your fix:
$('#submit').click(function(){
var princeple = parseInt($('#princeple').val());
var time = parseInt($('#time').val());
var rate = parseFloat($('#rate').val()/100);
var output = ((princeple * rate) * time);
$('#result').html(output);
//prevent from page reload
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
You have to calculate the value inside the click event and assign to the result. The formula for calculating interest is also incorrect.
Try the following code, basically you need:
Calculate your variables inside cb click and than output the resut in your div #result. Use .val to get values for your inputs and event.preventDefault() to avoid form submit (which is the browser default behavior).
$('#submit').click(function(event) {
var princeple = parseInt($('#princeple').val(), 10);
var time = parseInt($('#time').val(), 10);
var rate = parseInt($('#rate').val(), 10);
var output = (princeple * time + rate);
$('#result').html(output);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
I am enrolled in an online class and I keep reading the section of my book for js inclusion and I can't figure this out. Could someone please explain to me what I am doing wrong. Im trying to call the function to take in the weight and display the calculations back in the form text boxes. I cant find anything on the internet like this or explains how it works. Why can't this just be like C++ :(
<!DOCTYPE html>
<html>
<script>
function Weight()
{
var mercury = earth*(.378);
var venus = earth*(.907);
var mars = earth*(.377);
var jupiter = earth*(2.364);
var saturn = earth*(.916);
var uranus = earth*(.889);
var neptune = earth*(1.125);
var pluto = earth*(.067);
var sun = earth*(27.072);
var moon = earth*(.166);
}
</script>
<body>
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate">
</form>
</body>
</html>
Here is a working demo:
Created an array planetArray containing the planets information
Added an attribute id to the submit input
Attached click event to submitButton. In the function get the earth input value and iterate over planetArray and calculate the weight value respectively on planets
var planetsArray = [{name: "mercury",weight: 0.378}, {name: "venus",weight: 0.907}, {name: "mars",weight: 0.377}, {name: "jupiter",weight: 2.364}, {name: "saturn",weight: 0.916}, {name: "uranus",weight: 0.889}, {name: "neptune",weight: 1.125}, {name: "pluto",weight: 0.067}, {name: "sun",weight:27.072}, {name: "moon",weight: 0.166}],
submitButton = document.getElementById('submit');
// Attach click event
submitButton.onclick = function (e) {
e.preventDefault();
var earth = document.getElementsByName('earth')[0];
planetsArray.forEach(function (p) {
var elem = document.getElementsByName(p.name)[0],
weight = p.weight * +earth.value;
elem.value = weight.toFixed(2);
});
};
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate" id="submit">
</form>
Hello javascript doesn't work in that way as you think.I can't teach you the whole thing here ,there are lot of information/articles in internet you may search them ,but I can suggest you a solution of what you wanted to do .Check the below code hope it helps
var earth=document.getElementById("earth");
var mercury=document.getElementById("mercury");
var venus=document.getElementById("venus");
var mars=document.getElementById("mars");
document.getElementById("button").onclick = function (e) {
e.preventDefault();
mercury.value=(earth.value) *(.378);
venus.value=(earth.value) *(.907);
mars.value=(earth.value) *(.377);
};
<form name ="my">
Enter Your Weight on Earth:<br>
<input type="text" id="earth" name="earth">
<br><br>
Mercury:<br>
<input type="text" id="mercury" name="mercury">
<br>
Venus:<br>
<input type="text" id="venus" name="venus">
<br>
Mars:<br>
<input type="text" id="mars" name="mars">
<br>
<input type="submit" id="button" value="Calculate">
</form>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
The problem is that the javascript will not run when i press the button on the form. i have no idea why its really annoying me, i am trying to make this add items via different text boxes then fining the average.
<script type="text/javascript">
function getmark() {
var g1 = document.getElementById('g1').value;
var g2 = document.getElementById('g2').value;
var g3 = document.getElementById('g3').value;
var newtotal = total /3;
var total = q1+q2+q3;
alert(total);
}
</script>
it just doesn't seem to work for the life of me.
This is form im using to run it.
<form name = "gradecalc">
<p>Grade 1: Earned Points <input id='g1' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 2: Earned Points <input id='g2' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 3: Earned Points <input id='g3' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 6: Earned Points <input id='g6' type = "text"/> Out of:<input type = "text" value="9"
<input id='entry_avg' onclick = "getmark()" type="button" value="Get Mark"/>
<input name = "clear" type = "reset" value = "Clear Form"/>
</form>
What was the problem?
You had an unclosed tag and invalid Javascript
How do I fix the problem?
Use this HTML:
<form name="gradecalc">
<p>Grade 1: Earned Points
<input id='g1' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 2: Earned Points
<input id='g2' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 3: Earned Points
<input id='g3' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 6: Earned Points
<input id='g6' type="text" />Out of:
<input type="text" value="9"/> <input id='entry_avg' onclick="getmark()" type="button" value="Get Mark" />
</p>
<input name="clear" type="reset" value="Clear Form" />
</form>
And this javascript:
document.getElementById('entry_avg').addEventListener('click', function() { getmark(); });
function getmark() {
var g1 = document.getElementById('g1').value;
var g2 = document.getElementById('g2').value;
var g3 = document.getElementById('g3').value;
var total = parseInt(g1) + parseInt(g2) + parseInt(g3);
var newtotal = total / 3;
alert(total);
}
DEMO
I need to be able to have one submit button for multiple forms. I only took two forms from my coding for the sake of simplicity. Each form has its own unique ID, but each form is very much identical to one another save a few discrepancies. My problem is only the first form is submitted successfully. I realize the reason for that is my input fields have the same name in each and every form so it will not recognize a duplicate input field currently. Is there a way that each field can be submitted successfully even though the input fields are the same, I hope that with help I will be able to submit both 'input_1' values and process it as 'form1:input_1' and 'form2:input_1' respectively.
Thank you very much in advance
<body><form name="form1">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<form name="form2">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<input type="submit" name="Submit" id="button" value="Submit" onClick="submitAllDocumentForms()"></body>
Javascript code:
<script language="javascript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "process.php";
name = "formCollector";
id = "formCollector";
}
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();
}
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
</script>
name is not a standard attribute for the form tag. I suggest that you use id for identiying your forms.
I have not tested the below changes, but I expect them to work:
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var currentEl;
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--) {
currentEl = frm[ix];
currentEl.name = frmCollectFrom.name + ':' + currentEl.name;
frmCollector.appendChild(currentEl);
}
return frmCollector;
}