Need some Javascript help yet again

heymrdj · Nov 2, 2008

Hello all, this *should* be a little simpler, but then again may not be

. I've got most of this sucker written, i'm just having an issue getting the submit function to work. Currently I have it so that as you click the checkboxes it tallies the new price. What I need it to do however is to calculate the price and display the price in an Alert when pressing the Submit button. Something like "Your total cost is $xxx". In my code I imagine that would be "Your total cost is $( + f.blah.value + )." But alas I'm having issue getting it work right. Thought maybe a java guru here could tell me what i'm doing wrong (ok so a java noob could probably outcode me on this..i know i suck ballz)

. So please give me some help on this so I can say goodbye to Java for the rest of my life.

I've included my current code, and the code for my submit button. I'll add some XHTML fluff to it later.

I'm pretty sure I slaughtered the submit code cause it definitely does not work right, and I haven't even begun the alert function..but I don't think it'll be that difficult. (yeah...right..)

And I'll even add a poll for peoples enjoyment

.

EDIT: Because anand's code system sucks, I decided to zip up the .html file and host it on my server to make it easier for those to study it.

Linky for file

PhatoseAlpha · Nov 2, 2008

Please.....Javascript and Java are not the same thing, and in fact have more or less nothing to do with one another. Use JS for shorthand if you must, but not Java, cause that's something totally different.

Not sure what you want though - the page in the ZIP file has no button, and no code for a button. And the totaling code for the checkboxes works just fine.

heymrdj · Nov 2, 2008

Originally posted by: PhatoseAlpha
Please.....Javascript and Java are not the same thing, and in fact have more or less nothing to do with one another. Use JS for shorthand if you must, but not Java, cause that's something totally different.

Not sure what you want though - the page in the ZIP file has no button, and no code for a button. And the totaling code for the checkboxes works just fine.

I don't have a choice in the language for writing this, it's for classes.

Yes that much works fine, but that's not the way i need the output. I need it to allow me to checkmark the boxes, hit a submit button, and pop up an alert when i press submit with what I said earlier, "Your total is $xxx".

PhatoseAlpha · Nov 2, 2008

I meant don't call JS java, that's all.

At any rate, from what I can make out from the garbled code in the post, you're on the right track. Put your input button so that it's in the form (the garbled shows the </ form > coming before the button. Change the onclick=check() to onclick=calculate(this.form), then add in an alert at the end of your existing code.

Personally, I'd rather you give the form an ID, and use document.getElementById instead of the document.form, but whatever floats your boat.

heymrdj · Nov 4, 2008

Ok here's a new try. I know it's closer, but I still can't get an output.

File

Here's the code for those that don't want to download the .html file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Groceries</title>
<script type="text/javascript">
function calculate()
{
var prices = document.getElementById("groceries");
var result = 0;
for (i=0; i<prices.groceries.length;i++)
{
if(prices.groceries.checked)
{
result=result+parseFloat(prices.groceries.value);
result2=result * 1.05

alert(result2);
return false;
</script>
</head>

<body>
<form id = "myForm">
<strong>What groceries would you like to purchase?</strong><br />
<input type = "checkbox" name = "groceries" value = ".59" onclick = "calculate(this.form)" /> Apple<br />
<input type = "checkbox" name = "groceries" value = ".49" onclick = "calculate(this.form)" /> Orange<br />
<input type = "checkbox" name = "groceries" value = ".39" onclick = "calculate(this.form)" /> Banana<br />
<input type="button" name="groceries" onclick="return calculate()" value="Submit" />
</form>

</body>
</html>

clamum · Nov 4, 2008

Don't you need to declare "result2" as a variable? I see "var result = 0;" but no "var result2 = 0;".

heymrdj · Nov 4, 2008

Originally posted by: clamum
Don't you need to declare "result2" as a variable? I see "var result = 0;" but no "var result2 = 0;".

I was thinking I did, but i wasn't sure.

sourceninja · Nov 4, 2008

I'm not going to fix it for you. But here is my advice.
1) Install firefox
2) Install firebug plugin for firefox
3) Look at the console and see your errors
4) Fix them.

For the most part it's just syntax errors.

If you do not want to install firebug or firefox and firebug, then you can paste this on your page in the head.

<script type='text/javascript'
src='http://getfirebug.com/releases...bug-lite-compressed.js'></script>

Then you can press F12 to see the console. It is not as good as firebug for debuging (firebug will become your own personal deity), but it helps.

Oh yea, and javascript is not java. You can not use those terms interchangeably. I hope your instructor is not making the same error.

heymrdj · Nov 4, 2008

Originally posted by: sourceninja
I'm not going to fix it for you. But here is my advice.
1) Install firefox
2) Install firebug plugin for firefox
3) Look at the console and see your errors
4) Fix them.

For the most part it's just syntax errors.

If you do not want to install firebug or firefox and firebug, then you can paste this on your page in the head.

<script type='text/javascript'
src='http://getfirebug.com/releases...bug-lite-compressed.js'></script>

Then you can press F12 to see the console. It is not as good as firebug for debuging (firebug will become your own personal deity), but it helps.

Oh yea, and javascript is not java. You can not use those terms interchangeably. I hope your instructor is not making the same error.

I'm pleased to hear you say that it just seems to be syntax. This was my first time writing it out of my head and not using any references. I installed firebug just a few minutes, I'm gonna learn how to use it, then tomorrow after work work on debugging this. But for now I have another 30 questions to do for C# homework, so I must dedicate time to that for now. Thanks for the help thus far guys

.

EDIT: and no he's not using them intercahngeably, that was my own mistake as I was running on 3 hours of sleep when I posted that first message

. And this also isn't for class, this is my own exploration to try and understand more.

heymrdj · Nov 5, 2008

I guess I don't know how to use Firebug properly. I fixed some syntax errors I found in another program, but I still can't get any results.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Groceries</title>
<script type="text/javascript">
function calculate()
{
var prices = document.getElementById("groceries");
var result = 0;
for (i = 0; i < prices.groceries.length; i ++ )
{
if(prices.groceries.checked)
{
result = result + parseFloat(prices.groceries.value);
}
}
result2 = result * 1.05

alert(result2);
return false;
}
</script>
</head>

<body>
<form id = "myForm" action = "">
<strong>What groceries would you like to purchase?</strong><br />
<input type = "checkbox" name = "groceries" value = ".59" onclick = "calculate(this.form)" /> Apple<br />
<input type = "checkbox" name = "groceries" value = ".49" onclick = "calculate(this.form)" /> Orange<br />
<input type = "checkbox" name = "groceries" value = ".39" onclick = "calculate(this.form)" /> Banana<br />
<input type="button" name="groceries" onclick="return calculate()" value="Submit" />
</form>

</body>
</html>

sourceninja · Nov 5, 2008

Ok, you are passing calculate 'this.form' yet your calculate function is not assigning that anywhere. Also you are using getElementByID...yet your input boxes have no ID's.

I hope that helps.

PhatoseAlpha · Nov 5, 2008

OK, first off - change onclick='return calculate()' to onclick='calculate()'. You're not creating a function, so you're not returning anything.

Secondly, you have nothing with the id of groceries. Name isn't equivalent to id. And I'm fairly sure only 1 element can have a given id.
Make that change, and then try this modified version of your very first code

function calculate()
{
var f=document.getElementById("myForm");
var nums = f.num;
var ntext = f.numtext;
var result = 0;
for(var i=0;i<nums.length;i++)
{
if(nums.checked)
{
result+=parseFloat(ntext.value);
}
}
result2=result * 1.05;
result2=result.toFixed(2);
alert(result2);
}

Fairly straightforward - instead of trying to pass this from the function, we go out and get the relevant form via document.getElementById. Once we have it, it works the same as any Form does. We run though the same process you used the first time to get our number, then alert it instead of returning it.

heymrdj · Nov 5, 2008

Alright I attacked it differently, and with my brother's help, we were able to get it done. Thank you everyone that helped. The final code is this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Groceries</title>

<script type="text/javascript">
var total = 0;

function calculate(element)
{
total = 0;
for (var i = 0; i < 3; ++i)
{
var curElement = document.forms[0].elements;
if (curElement.checked)
total += parseFloat(curElement.value);
}
}

function display()
{
alert("Your price is $" + Number(total * 1.05).toFixed(2) + ".");
return false;
}
</script>
</head>

<body>
<form id = "myForm" action = "">
<strong>What groceries would you like to purchase?</strong><br />
<input type = "checkbox" name = "apple" id = "apple" value = ".59" onclick = "calculate()" /> Apple<br />
<input type = "checkbox" name = "groceries" id = "groceries" value = ".49" onclick = "calculate()" /> Orange<br />
<input type = "checkbox" name = "banana" id = "banana" value = ".39" onclick = "calculate()" /> Banana<br />
<input type="button" name="groceries" onclick="return display()" value="Submit" />
</form>

</body>
</html>
</form>

</body>
</html>

I decided to skip the getElementById and just go with what I know I can do.

Search

Need some Javascript help yet again

heymrdj

Diamond Member

PhatoseAlpha

Platinum Member

heymrdj

Diamond Member

PhatoseAlpha

Platinum Member

heymrdj

Diamond Member

clamum

Lifer

heymrdj

Diamond Member

sourceninja

Diamond Member

heymrdj

Diamond Member

heymrdj

Diamond Member

sourceninja

Diamond Member

PhatoseAlpha

Platinum Member

heymrdj

Diamond Member

TRENDING THREADS