1. Welcome to DNTrade. If you want to find out about the latest domain name industry news or talk, share, learn, buy, sell, trade or develop domain names - then you've come to the right place. It's a diverse and active community, with domain investors, web developers and online marketers - and it's free! Click here to join now.
    Dismiss Notice

Need help with Javascript!

Discussion in 'Web Development' started by Webfunk, Apr 28, 2011.

  1. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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
     
  2. FirstPageResults

    FirstPageResults Membership: VIP

    Joined:
    May 26, 2009
    Messages:
    1,906
    Likes Received:
    105
    auDA Member:
    Yes
  3. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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
     
  4. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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
     
  5. FirstPageResults

    FirstPageResults Membership: VIP

    Joined:
    May 26, 2009
    Messages:
    1,906
    Likes Received:
    105
    auDA Member:
    Yes
    Code:
    <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>
    
     
  6. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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?
     
  7. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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??
     
  8. FirstPageResults

    FirstPageResults Membership: VIP

    Joined:
    May 26, 2009
    Messages:
    1,906
    Likes Received:
    105
    auDA Member:
    Yes
    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.
     
  9. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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!
     
  10. sp@rky13

    sp@rky13 Membership: Community

    Joined:
    Apr 5, 2011
    Messages:
    464
    Likes Received:
    0
    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
     
  11. FirstPageResults

    FirstPageResults Membership: VIP

    Joined:
    May 26, 2009
    Messages:
    1,906
    Likes Received:
    105
    auDA Member:
    Yes
    I don't get why you'd need to do it that way. Surely both forms can do inside the content div
     
  12. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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?
     
  13. sp@rky13

    sp@rky13 Membership: Community

    Joined:
    Apr 5, 2011
    Messages:
    464
    Likes Received:
    0
    Is it set to round down?
     
  14. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    How and where do I check?
     
  15. sp@rky13

    sp@rky13 Membership: Community

    Joined:
    Apr 5, 2011
    Messages:
    464
    Likes Received:
    0
    To tell you the truth I'm not sure. Try 8.9 and see what happens.
     
  16. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    all good! figured it out! I was using parseInt, whereas I needed to use parseFloat.

    Thanks man!
     
  17. sp@rky13

    sp@rky13 Membership: Community

    Joined:
    Apr 5, 2011
    Messages:
    464
    Likes Received:
    0
    That makes sense as integers only hold whole numbers :)
     
  18. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    yeah...as I figured out after a fair amount of frustration :p
     
  19. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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
     
  20. Webfunk

    Webfunk Membership: Community

    Joined:
    Apr 12, 2011
    Messages:
    129
    Likes Received:
    0
    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;
    }