Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question adding textbox to auto-sum order form

    Hello guys (and girls)
    I am messing with this whole day, 'cos I wanted to try and figure this out by myself instead of going on forums.
    I failed, as you may see. So, to cut it short:

    I needed to calculate my prices on-the-fly and display it in textbox with javascript.
    Well I did succeed with values of radio button an checbox, but as i know very little javascript, I don't know how to expand the code i got from here:

    http://javascript.internet.com/forms...e-refresh.html

    So what I would LOVE to know, is how can I make this happen:

    I have a textbox:

    Code:
    <input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);">
    and when a user inputs a number in it, javascript multiplies it with some other number, say 10 (its a price*quantity thing) and adds it to the total price along with data from checkboxes and radio buttons.

    And so, this is my javascript. It is basically identical to one on the link, but you can view it better this way I think.

    Code:
    // Calculate the total for items in the form which are selected.
    function calculateTotal(inputItem) {
      with (inputItem.form) {
        // Process each of the different input types in the form.
        
    	if (inputItem.type == "radio") 
    	{   // Process radio buttons.
          // Subtract the previously selected radio button value from the total.
          calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
          // Save the current radio selection value.
          previouslySelectedRadioButton.value = eval(inputItem.value);
          // Add the current radio button selection value to the total.
          calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
        } 
    	
    	else
    	{   // Process check boxes.
          if (inputItem.checked == false) 
    	  		{   // Item was uncheck. Subtract item value from total.
              calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
         		 } 
    	  
    	  else {   // Item was checked. Add the item value to the total.
              calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
        		}
        }
    
    	elseif 
    
        // Total value should never be less than 0.
        if (calculatedTotal.value < 0) {
          InitForm();
        }
    
        // Return total value.
    	return(formatCurrency(calculatedTotal.value));
      }
    }
    
    // Format a value as currency.
    function formatCurrency(num) {
      num = num.toString().replace(/\$|\,/g,'');
      if(isNaN(num))
         num = "0";
      sign = (num == (num = Math.abs(num)));
      num = Math.floor(num*100+0.50000000001);
      cents = num%100;
      num = Math.floor(num/100).toString();
      if(cents<10)
          cents = "0" + cents;
      for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
          num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
      return (((sign)?'':'-') + num + '.' + cents + ' kn');
    }
    
    // This function initialzes all the form elements to default values.
    function InitForm() {
      // Reset values on form.
      document.selectionForm.total.value='$0';
      document.selectionForm.calculatedTotal.value=0;
      document.selectionForm.previouslySelectedRadioButton.value=0;
    
      // Set all checkboxes and radio buttons on form to unchecked.
      for (i=0; i < document.selectionForm.elements.length; i++) {
        if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
          document.selectionForm.elements[i].checked = false;
        }
      }
    }
    I don't want to overspam my post with more code, so I hope this is all you need, at least for now.

    THANK YOU very much in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Can you show us the <form>, not the JS code??

    That JS code seems *WAY* overkill for what you are after.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sure:

    Code:
    <form method="POST" name="selectionForm" action="<?php bloginfo('template_directory');?>/mailer.php">
    
    <fieldset>
        <legend>&nbsp;<strong>Koliko podstranica Vam treba?</strong>&nbsp; </legend>
        <p>
          <input type="checkbox" value="10.00"  id="css3" name="css3" onclick="this.form.total.value=calculateTotal(this);" />
          <label for="css3"></label>
        </p>
        <p>
          <input type="checkbox" value="3"  id="extension" name="extension" onclick="this.form.total.value=calculateTotal(this);">
          <label for="extension"></label>
        </p>
      </fieldset>
    
     <fieldset>
        <legend>&nbsp;<strong>Koliko podstranica Vam treba?</strong>&nbsp; </legend>
        
               Koliko: <input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);">
    
       
      </fieldset>
    
       <input type="hidden" name="calculatedTotal" value="0">
              <input type="hidden" name="previouslySelectedRadioButton" value="0">
              <input type="text" name="total" class="total" readonly onfocus="this.blur();">
              <input type="submit" value="Zatražite ponudu!" class="naruci" name="submit">
     </form>
    Also, don't know if it will help but here's link to that subpage:

    http://amadesign.hr/webdizajn/

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Why do you have both "calculatedTotal" and "total" fields??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    And what is the point of "previouslySelectedRadioButton"?

    And you don't need the onfocus= for the readonly field, because the user can NOT focus on it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey man I have no idea that was in source code on that link I provided, I just copied it.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Here:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function calculateTotal( )
    {
        var form = document.selectionForm;
        var total = 0;
        if ( form.webtype[0].checked ) total += parseFloat(form.webtype[0].value);
        if ( form.webtype[1].checked ) total += parseFloat(form.webtype[1].value);
        if ( form.css3.checked ) total += parseFloat(form.css3.value);
        if ( form.extension.checked ) total += parseFloat(form.extension.value);
        var pod = parseFloat(form.podstranice.value);
        if ( isNaN(pod) )
        {
            alert("podstranice is not a valid number");
            pod = 0;
        } 
        total += pod;
        form.total.value = total.toFixed(2); // or toFixed(0)??
    }
    </script>
    </head>
    <body>
    
    
    <form method="POST" name="selectionForm" action="<?php bloginfo('template_directory');?>/mailer.php">
    
    <input type="radio" value="3450" onclick="calculateTotal();" id="html" name="webtype" /> html
    <input type="radio" value="5570" onclick="calculateTotal();" id="wp" name="webtype" /> wp
    <br/>
    <input type="checkbox" value="10.00"  id="css3" name="css3" onclick="calculateTotal();" />
    <label for="css3">css3</label>
    <input type="checkbox" value="3"  id="extension" name="extension" onclick="calculateTotal();">
    <label for="extension">extension</label>
    <br/>
    Koliko: <input type="text" name="podstranice" size="19" class="podstr" 
                   onchange="calculateTotal();this.form.SUBMIT.focus();">
    <br/>
    <input type="text" name="total" class="total" readonly>
    <br/>
    <input type="submit" value="Zatražite ponudu!" class="naruci" name="SUBMIT">
    </form>
    
    </body>
    </html>
    Never name a field "submit" or "action" or "method" or "target" as those names *OVERRIDE* the <form> attributes of the same names.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    dantesnake (07-14-2010)

  • #8
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh my god man thank you THIS \___________________________/ MUCH : D

    Only one more thing (for now ), if there is no number in textbox,
    and I check checkbox or press radio button I get alert:

    "podstranice is not a valid number"

    can you fixthat please? ^^


    edit:

    also also I'm sorry to bother you (again) but in all my noobness I can't multiply podstranice textbox value with some number, help?
    Last edited by dantesnake; 07-14-2010 at 11:24 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Fix for both questions.

    Change this code:
    Code:
        var pod = parseFloat(form.podstranice.value);
        if ( isNaN(pod) )
        {
            alert("podstranice is not a valid number");
            pod = 0;
        } 
        total += pod;
    to this:
    Code:
        var pod = form.podstranice.value;
        if ( pod == "" ) pod = "0";
        pod = parseFloat(pod);
        if ( isNaN(pod) )
        {
            alert("podstranice is not a valid number");
            pod = 0;
        } 
        total += ( pod * 137 ); // or whatever number you need
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    So doesn't "stranice" translate to "page" in English?

    What is "podstranice"? "Number of pages"?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh man you're a savior : D
    Thank you very, very much.

    And, "podstranica" (croatian) is a "subpage" and "stranica" is well, "a (web)page"

    Also, It's amazing how did you manage to minimize SO MUCH CODE : D

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Quote Originally Posted by dantesnake View Post
    Also, It's amazing how did you manage to minimize SO MUCH CODE : D
    To be fair: By writing code *specific* to your needs, instead of trying to write code that can be used in any page. But if you try to write code that can be used in any page, inevitably you miss something. As you found out.

    So it's not that code "libraries" are bad (or bloated), it's just that they don't always do what you want them to do.

    [Recognized "stranitc" from its Russian cognate. And now that I think about it, "pod" is "under" in Russian, too, so "sub-page" makes sense. Just haven't used Russian in 20+ years.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Asigning value to text box if used

    Hey, I googled "calculatedTotal.value" from a script that I'm also using and this thread popped up so I have a question for ya.

    I'm trying to make an ordering page where my clients would enter in a image code "L5648"

    If a code was entered into a form text box, it would save the image code value as well assign a new value of $6.00 so further down the page, the form would calculate the order total.

    So. if 4 image codes were entered I would have 4 values of "6.00" each.

    Is this possible?

    http://www.mckittricks.org/sports1/
    (See the "Unaltered images burned to cd")

    Thanks in advance.
    Dave.

    P.S. Looking at your code (Old Pedant), May play around with this code as it is much less cluttered like you said, Just need to figure out how to do the text box before I revamp the code.

    Site is in test mode so play if you would like.
    Last edited by dave_mck; 07-19-2010 at 06:12 PM.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Sure, easy enough.

    Code:
    function getCdCost( )
    {
        var re = /^L\d+$/;
        var form = document.selectionForm;
        var count = 0;
        for ( var c = 1; c < 9999; ++c )
        {
            var fld = form.elements["cd"+c];
            if ( fld == null ) break; // out of loop when no more
            var val = fld.value.replace(/\s/g,""); // zap spaces
            if ( val != "" )
            {
                if ( re.test( val ) ) ++count;
            } else {
                alert( "Invalid L number: " + fld.value );
            }
        }
        var cost = 0;
        if ( count > 0 ) cost = 23 + 6 * ( count - 1 );
        ... do what you will with cost ...
    }
    Doesn't that do it?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still can't quite get it.

    BTW, The image codes could have any letter as the first char. (D5424, L4554, R5488, ect....) so I'm guessing the var re = /^L\d+$/; will not work.
    Would var re = substr("cd"+c, -4); work cause I can't seem to get it to.

    Thanks for the help, I think I almost have it. Been playing with the code you gave me and the prev code given above. Just missing something.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getCdCost( )
    {
        var re = /^L\d+$/;
        var form = document.selectionForm;
        var count = 0;
        for ( var c = 1; c < 9999; ++c )
        {
            var fld = form.elements["cd"+c];
            if ( fld == null ) break; // out of loop when no more
            var val = fld.value.replace(/\s/g,""); // zap spaces
            if ( val != "" )
            {
                if ( re.test( val ) ) ++count;
            } else {
                alert( "Invalid L number: " + fld.value );
            }
        }
        var cost = 0;
        if ( count > 0 ) cost = 23 + 6 * ( count - 1 );
        ... do what you will with cost ...
    }
    </script>
    </head>
    <body>
    
    
    <form method="POST" name="selectionForm" action="sendform.php">
    <input type="text" name="cd1" size="3" maxlength="5" onchange="getCdCost();this.form.SUBMIT.focus();"><br/>
    <input type="text" name="cd2" size="3" maxlength="5" onchange="getCdCost();this.form.SUBMIT.focus();"><br/>
    <input type="text" name="cd3" size="3" maxlength="5" onchange="getCdCost();this.form.SUBMIT.focus();"><br/>
    <input type="text" name="cd4" size="3" maxlength="5" onchange="getCdCost();this.form.SUBMIT.focus();"><br/>
    <br/>
    <input type="text" name="total" readonly>
    <br/>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •