Need help assigning variable from form input

Question

I am trying to get input (specifically a number/float) from a text form, and assign it to a variable which I can use to do calculations. It should be assigned to the variable when the calculate button is clicked.

I am using getElementById() which returns undefined for me.

Previous research pointed out that I need to have my script tag below my input tag.

So I moved my script from the head tag to the body tag and I am still having trouble (still getting undefined returned).

<form name = "myform">
Item Price <input type = "text" name = "tPrice">
<br><br>

<input type = "button" value = "Calculate" onClick = "calculate()"/>

<input type = "submit" value = "Submit"/>
<input type = "reset" value = "Clear"/>


</form>

<script>

var totalPrice = parseFloat(document.getElementById("tPrice").value);

//var totalPrice = document.getElementById("iPrice");

//var price = document.getElementById("price").value;
//document.getElementById("price").value = totalPrice;
//var shipMeth = document.getElementById("ship").checked;



function calculate()
{

//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}


</script>

AtheistP3ace · Accepted Answer · 2015-10-16 22:38:24Z

1

Input needs an ID attribute and you might want to move the getting and parsing of value into the calculate function.

Item Price <input type = "text" id = "tPrice">

and

function calculate()
{

var totalPrice = parseFloat(document.getElementById("tPrice").value);
//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}

The problem is the getting of the value runs on page load, when the input has no value. If you only get the value once the button is clicked you make sure that the input has had a value set before attempting to get it.

edited Oct 16, 2015 at 22:38

answered Oct 16, 2015 at 22:35

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Flint Over a year ago

This. Also, after doing so you won't need put your script at the end anymore (although I believe that's still considered best practise these days anyway).

Greg Over a year ago

Thank you very much! Both the suggestions were spot on.

Zak · Accepted Answer · 2015-10-16 22:34:19Z

0

You need to set the input id="tPrice" not the name property. Hope that helps :)

answered Oct 16, 2015 at 22:34

Zak

2,0903 gold badges18 silver badges33 bronze badges

2 Comments

Greg Over a year ago

Thank you for the speedy response! This definitely helped, however now I am getting a return value of NaN. Any ideas why this might be happening?

Zak Over a year ago

That will be something to do with your calculations, try printing the raw value of the input to check it's working.

mstruebing · Accepted Answer · 2015-10-16 22:34:36Z

0

Change

Item Price <input type = "text" name = "tPrice">

to

Item Price <input type = "text" id = "tPrice">

answered Oct 16, 2015 at 22:34

mstruebing

1,8221 gold badge19 silver badges35 bronze badges

2 Comments

Adam Over a year ago

It would probably be a good idea to leave the name="tPrice" as well as adding id="tPrice", since name is used server-side when the form is submitted.

Greg Over a year ago

Thank you for the speedy response! I am not getting NaN instead of undefined, any ideas why this might happen?

Attila Komlosi · Accepted Answer · 2015-10-16 22:43:55Z

0

I would move the getElementById call into the calculate method, because if it is a text input you should calculate with its value only AFTER when the user filled it up with a value. And yes, add id to the input instead of the name attribute. If you want to save the input's value immediately when the page loads then you should wait for the DOM to be ready:

    $(document).ready(function() { /* code here */ });

And be careful, because if the value is empty the parseFloat will result a NaN.

answered Oct 16, 2015 at 22:43

Attila Komlosi

92 bronze badges

1 Comment

Greg Over a year ago

Thank you, this was a key part in solving this problem.

Adam Buchanan Smith · Accepted Answer · 2015-10-16 22:44:32Z

0

Put the var inside the function like this:

function calculate()
{
var totalPrice = parseFloat(document.getElementById("tPrice").value);
//DISPLAY Results
window.alert(totalPrice);

//shipping and handling results
document.myform.sh.value = "500";
//tax
document.myform.tax.value = "500";
//total
document.myform.total.value = "500";

//window.alert(document.myform.sh.value);

window.alert("Results function successful")
return true;
}

Then add the id="tPrice" to the input like this:

<input type = "text" name = "tPrice" id="tPrice">

And see fiddle: http://jsfiddle.net/vantbrhb/8/

answered Oct 16, 2015 at 22:44

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Need help assigning variable from form input

5 Answers 5

2 Comments

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related