Need help with Javascript!

[Webfunk]

Hi everyone,

I'm having an issue with a project I'm working on, that I believe requires Javascipt, but my knowledge of the language is fairly minimal at the moment.

Basically, I need to do some calculations using a form on the site. I have 3 fields where the user will punch in numbers and there will be a "calculate" button to then show a pop-up window with the total.

The equation goes something like this...

(((A * 52) * B) + C) - 1249

The html at the moment looks like this...

<form action="" method="post" id="form1">
<label>FieldA</label>
<input type="text" name="a" />
<label>FieldB</label>
<input type="text" name="b" />
<label>FieldC</label>
<input type="text" name="c" />
<input type="button" name="Button" value="CALCULATE" />
<input type="text" name="total" />
</form>

Does anyone have any idea how I go about this? Any help would be greatly appreciated!! If you need any other info, pst me.

Thanks,

Ben

 

[FirstPageResults]

Yes you can use JavaScript to do that although it would be alot easier with a serverside language like PHP.

To make life easier use jQuery Javascript Library.. you'll find plenty of tutorials for what you need, along the lines of this one:

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

I'm assuming you just want to do the calculation and then display the result back to the user so cut out step 4 in that tutorial.

 

[Webfunk]

Hey,

Doesn't really matter if it's php or javascript, I don't know either one haha. Just figured javascript might be a little easier...

And yes, I just want the calculation display backed to the user in a pop-up like window.

I will take a look at the library you mentioned and see if i can find anything...

Thanks,

Ben

 

[Webfunk]

Ok, so here's where I'm at...

My script at the present looks like this:

<script language="JAVASCRIPT">
<!--
function calculateTotal() {
document.form1.total.value =
parseInt((document.form1.rent.value) * 52) *
parseInt((document.form1.fee.value) / 100) +
parseInt(document.form1.otherFees.value) - 1249;
}
//-->
</script>

And my HTML looks like this:

<form name="form1">
<label>Your Current Rent Per Week?</label>
<input type="text" name="rent" value="" />
<label>Your Current Management Fee?</label>
<input type="text" name="fee" value="" />
<label>Other Fees Per Annum?</label>
<input type="text" name="otherFees" value="" />
<input type="button" name="Button" value="OK" onClick="calculateTotal(); true;" />
<input type="text" name="total" value="" />
</form>

The problem I'm having is the data they punch into "fee" will be a percentage, hence why I have the /100 in the script, but it doesn't seem to be working... Am I missing something here? I'm very noob when it comes to scripting...

Thanks in advance for any assistance,

Ben

 

[FirstPageResults]

<script language="JAVASCRIPT">
<!--
function calculateTotal() {
var total;
var rent;
var fee;
var other;

rent = parseInt((document.form1.rent.value) * 52); 
fee = parseInt(document.form1.fee.value) / 100;
other = parseInt(document.form1.otherFees.value);

total = ((rent * fee) + other) - 1249;

document.form1.total.value = total;
}
//-->
</script>

 

[Webfunk]

oh...my...god...

My friend...you are....amazing. I am forever in your debt... I was kinda close? lol

You are a gentleman and a scholar!

Would I be pushing my luck if you happened to know how to then show result in a pop-up box?

 

[Webfunk]

UPDATE:

I managed to get the pop-up box working with the following code...

<a href="popup.html" onClick="window.open('popup.html','popup','width=400,height=400,scrollbars=no,resizeable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=500,top=200'); return false"><input type="button" name="Button" value="OK" onClick="calculateTotal(); true;" /></a>

My issue now is, currently the result is being displayed through...

<input type="text" name="total" value="" />

...but how do I move that so that the total is being display in my popup box? I need to somehow move the data from index.html to popup.html??

 

[FirstPageResults]

Like I said earlier, use jQuery to make life easier. Pop-up's are outdated.. modal boxes are the way to go.

This one is piss easy to use and fast:
http://www.zurb.com/playground/reveal-modal-plugin

With that plugin you can easily insert the total into the modal window.

 

[Webfunk]

Is there an issue with is.....?

<div> <!--wrapper-->
<form1>
<div> <!--content-->
</form1
<form2>
</form2>
</div> <!--content-->
</div> <!--wrapper-->

I have a similar setup to this and it isn't validating. It only validates if the content div ends before form1 does, because the div started within the form and it has to end in it or something. But the situation calls for the content div to contain form2 as well. I can't nest form2 within form1 as well because that isn't valid either, and I can't end the content div within form 1 because it needs to contain form2. BAH!

 

[sp@rky13]

Yah, I don't think it's valid and I find that as long as you can get as close to valid as possible it's not an issue in this day and age. As long as what you're doing is supported by browsers. Using stuff like browser-radius is not valid yet because CSS3 hasn't been added yet etc

 

[FirstPageResults]

I don't get why you'd need to do it that way. Surely both forms can do inside the content div

 

[Webfunk]

All good, I figured it out. The first form tag wasn't need after-all .

I do have another question though...

I have an input field that is supposed to be a percentage (user types in 8, it's processed as 0.08). But so far it only works with whole numbers, for example. if someone types in 8.5, it still is processed as 8 - it ignores the .5

Any ideas?

 

[sp@rky13]

Is it set to round down?

 

[Webfunk]

How and where do I check?

 

[sp@rky13]

To tell you the truth I'm not sure. Try 8.9 and see what happens.

 

[Webfunk]

all good! figured it out! I was using parseInt, whereas I needed to use parseFloat.

Thanks man!

 

[sp@rky13]

That makes sense as integers only hold whole numbers

 

[Webfunk]

yeah...as I figured out after a fair amount of frustration

 

[Webfunk]

Hey Sparky,

Any idea how to add a thousand separator to my result? At the moment it displays as say 1200, but I want it to display as 1,200

CODE AT THE MOMENT:

function calculateTotal() {
var total;
var rent;
var fee;
var other;

rent = parseInt((document.getElementById("rent").value) * 52);
fee = parseFloat(document.getElementById("fee").value) / 100;
other = parseInt(document.getElementById("otherFees").value);

total = ((rent * fee) + other) - 1249;

document.getElementById("total").value;
}

Thanks in advance,

Ben

 

[Webfunk]

Woops wrong code...

function calculateTotal() {
var total;
var rent;
var fee;
var other;

rent = parseInt((document.getElementById("rent").value) * 52);
fee = parseFloat(document.getElementById("fee").value) / 100;
other = parseInt(document.getElementById("otherFees").value);

total = ((rent * fee) + other) - 1249;

document.getElementById("total").value = total;
}