Web Analytics Made Easy -
StatCounter Trouble changing "hidden" INPUT value - CodingForum

Announcement

Collapse
No announcement yet.

Trouble changing "hidden" INPUT value

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trouble changing "hidden" INPUT value

    I'm calculating a discount price based on a user-entered list price and a percentage selected from a drop-down. The "total" price table cell is empty until the user enters a number and selects a percentage. A hidden input field is also populated with the total price for submission along with the rest of the form.

    The total price is being rendered to the empty "total" <td> just as I would expect, but I just get errors when it gets to changing the hidden input field. (IE reports back that "document.individualPricingDiscountForm.hiddenFinalPrice_1 is null or not an object." and Mozilla is saying "document.individualPricingDiscountForm.hiddenFinalPrice_1 has no properties".

    Any idea what's going on here? Am I just blind and missing something really simple or is there a fundamental flaw in the way I'm approaching it?

    Code:
    <td class='bmh' align='center' style='border-bottom : 1px solid #000000; border-right : 1px solid #000000;'>
       $<input type='text' size='3' style='text-align : right;' name='individualDiscountOrigPriceDollar_1' value=''>
       .
       <input type='text' size='2' name='individualDiscountOrigPriceCent_1' value=''></td>
    <td class='bmh' align='center' style='border-bottom : 1px solid #000000; border-right : 1px solid #000000;'>
    <select name='individualDiscountPercentage_1' onchange='javascript:renderFinalPrice_1()'>
       <option value='Not Selected'></option>
       <option value='5'>5</option>
       <option value='10'>10</option>
       <option value='15'>15</option>
       <option value='20'>20</option>
       <option value='25'>25</option>
    </select></td>
    <td style='border-bottom : 1px solid #000000;'>
    <div class='bmh' ID='renderedFinalPrice_1'>
       &nbsp;<input type='hidden' name='individualDiscountFinalPrice_1' ID='hiddenFinalPrice_1' value='0'></div>
    <script language='JavaScript' type='text/javascript'>
       function renderFinalPrice_1 () {
          if (document.individualPricingDiscountForm.individualDiscountOrigPriceCent_1.value == '') {
             cents = '00';
          } else {
             cents = document.individualPricingDiscountForm.individualDiscountOrigPriceCent_1.value;
          }
          price = document.individualPricingDiscountForm.individualDiscountOrigPriceDollar_1.value + cents;
          discPercentage = document.individualPricingDiscountForm.individualDiscountPercentage_1.value/100;
          discAmount = price * discPercentage;
          totalPrice = (price - discAmount)/100;
          n = Math.pow(10, 2);
          totalPrice = Math.round(totalPrice*n) / n;
    
          if ((!isNaN(totalPrice)) && (totalPrice != 0)) {
             document.getElementById('renderedFinalPrice_1').innerHTML = '$' + totalPrice;
             document.individualPricingDiscountForm.hiddenFinalPrice_1.value = totalPrice;
          }
       }
    </script>
    just to be clear, this line works:
    Code:
    document.getElementById('renderedFinalPrice_1').innerHTML = '$' + totalPrice;
    this one does not:
    Code:
    document.individualPricingDiscountForm.hiddenFinalPrice_1.value = totalPrice;
    and just for posterity, neither did this when I tried it:
    Code:
    document.getElementById('hiddenFinalPrice_1').value = totalPrice;
    Last edited by Beau; Feb 18, 2004, 12:38 PM.

  • #2
    The name of the form element is: individualDiscountFinalPrice_1 not hiddenFinalPrice_1

    eg: input type='hidden' name='individualDiscountFinalPrice_1'

    .....Willy

    Comment


    • #3
      It was a good suggestion and while I had previously tried it, I tried it again at your suggestion to make sure I hadn't done something goofy the first time, but I get the exact same error messages, only with the form element's name replacing it's ID in the errors.

      Just to make sure, I tried changing that last line to both
      Code:
      document.getElementById('individualDiscountFinalPrice_1').value = totalPrice;
      and
      Code:
      document.individualPricingDiscountForm.individualDiscountFinalPrice_1.value = totalPrice;
      I even did
      Code:
      document.forms.individualPricingDiscountForm.individualDiscountFinalPrice_1.value = totalPrice;
      all three resulted in the error.

      Comment


      • #4
        Then I would say your problem is referencing the innerHTML value of a division not the form in your if/else statement.

        Code:
        if ((!isNaN(totalPrice)) && (totalPrice != 0)) {
                 document.getElementById('[color=red]renderedFinalPrice_1[/color]').innerHTML = '$' + totalPrice;
                 document.individualPricingDiscountForm.hiddenFinalPrice_1.value = totalPrice;
              }
        eg:<div class='bmh' ID='renderedFinalPrice_1'>

        Besides, where is the renderedFinalPrice_1 division even being passed a value?

        .....Willy

        Comment


        • #5
          Originally posted by Willy Duitt
          Then I would say your problem is referencing the innerHTML value of a division not the form in your if/else statement.

          Code:
          if ((!isNaN(totalPrice)) && (totalPrice != 0)) {
                   document.getElementById('[color=red]renderedFinalPrice_1[/color]').innerHTML = '$' + totalPrice;
                   document.individualPricingDiscountForm.hiddenFinalPrice_1.value = totalPrice;
                }
          eg:<div class='bmh' ID='renderedFinalPrice_1'>

          Besides, where is the renderedFinalPrice_1 division even being passed a value?

          .....Willy
          I may not be following you here, but renderedFinalPrice_1 is just a <DIV> statement. I'm passing the HTML that's contained within that block via the line
          Code:
          document.getElementById('renderedFinalPrice_1').innerHTML = '$' + totalPrice;
          That part is working just fine, the table cell is empty until a price is entered and a percentage selected, at which point, the table cell is populated with the final price. The only place that it's barfing is in the next line when I try to pass that same value to the hidden input field. Unless you're suggesting that passing the value to the <DIV> statement prior to passing it to the hidden input tag is causing the trouble, in which case I'm totally floored.

          To compound matters, this is being generated automatically by a hefty PHP script on an internal only website so simply posting the entire source or providing a link to a demo is not really possible.

          Heck, there's probably a better way to do what I need that I just haven't thought of. I mean, how hard can it be to have something where you can enter a price, select a discount percentage, have the calculation done on-the-fly, print the calculation to an empty table cell, pass the calculation with the form contents and then pass it all back to the form when the customer realizes they've made an error and need to go back to that page?

          Piece of cake, right?

          Comment


          • #6
            The renderedFinalPrice_1 div you are changing the innerHTML of if the condition is met contains the hidden form field. If you overwirte and change the innerHTML you lost the hidden field.

            Try adding an and operator.

            eg:
            Code:
            if ((!isNaN(totalPrice)) && (totalPrice != 0)) {
                     document.getElementById('renderedFinalPrice_1').innerHTML [color=red][b]+[/b][/color]= '$' + totalPrice;
                     document.individualPricingDiscountForm.hiddenFinalPrice_1.value = totalPrice;
                  }
            .....Willy

            Comment


            • #7
              Either that or close the div prior to the hidden field.

              Bad:
              Code:
              <div class='bmh' ID='renderedFinalPrice_1'>
                  <input type='hidden' name='individualDiscountFinalPrice_1' ID='hiddenFinalPrice_1' value='0'>[color=red]</div>[/color]
              Good:
              Code:
              <div class='bmh' ID='renderedFinalPrice_1'>[color=red]</div>[/color]
                  <input type='hidden' name='individualDiscountFinalPrice_1' ID='hiddenFinalPrice_1' value='0'>
              .....Willy

              Comment


              • #8
                AH-HA!

                You are so correct, sir.

                Thank you very much for lending me your eagle-eye.

                Comment


                • #9
                  That fixed it. Thanks again, I thought I was going crazy, but I just needed a second set of eyes.

                  Comment

                  Working...
                  X