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 21
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to make dynamic form with onchange event

    I am trying to sell memberships. How do I make a form that has select list of Teacher or Student, and a field called Price. If a person selects Teacher then the Price field should say $.01, and if they select Student the Price field should say $20. How do I do that?

    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Clearly this is homework.

    Look here: http://codingforums.com/rules.htm

    Look at rule 1.5

    If you want help, you need to show you have made a *REAL* effort. We won't write your homework for you. We will help you overcome minor mistakes, etc.
    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 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    not home work I promise

    This isn't homework, I'm not a student. I work for a non profit and I have almost no coding experience. I know how to make the fields and the select list but the java script part has me baffled. I looked on you tube and found similar things but not exactly what I'm looking for. I know using an onchange event will prompt the price field to change but I have no idea how to write it. Any help would be much appreciated

    Quote Originally Posted by Old Pedant View Post
    Clearly this is homework.

    Look here: http://codingforums.com/rules.htm

    Look at rule 1.5

    If you want help, you need to show you have made a *REAL* effort. We won't write your homework for you. We will help you overcome minor mistakes, etc.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by jfoster View Post
    If a person selects Teacher then the Price field should say $.01, and if they select Student the Price field should say $20. How do I do that?
    At the very first you should get the basic functionality working without JavaScript (of course, there is no onchange event in server side scripts, this has to work with a submit button). If you have assured that it works you can then enhance the form with CSS and JavaScript, e. g. to hide the submit button and add the onchange event.

    Now, that said: Since you havenít provided any code showing your effort so far I assume you are asking for code to be written especially to your requirements for which we have a services marketplace subforum. You might be working for a nonprofit organization but the developers around here usually do work for profit if they have to write custom code from scratch for someone (i. e. no specific help but rather built to order).

    I give you the chance to show us your efforts (in code). Otherwise I suggest you hire someone to do that.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    At least show the HTML and <form>.

    Truly, the JS coding you want is trivial. But having to guess what the HTML looks like is the much harder part.

    Just for example, I'm not even sure if you mean there are two <select>s, one for teachers, one for students. Or or or...
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    p.s.: It was the "teacher" and "student" and their relative (backward) values that made me think this was homework. As if any student is worth 2000 teachers. <grin/>
    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.

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh very good...I understand. Toward the bottom you will see the field "Product Name" and "UnitPrice1". I need to know how to make the Product Name field a select list that, when changed, also changes the UnitPrice1 field as described above. Again I do appreciate any help with this.

    Please fill out the fields below:

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Untitled Document
    
    <form action="https://faas.cloud.clickandpledge.com" method="post" name="WAC">First Name
    <input type="text" maxlength="50" name="BillingFirstName" required="" />
    Middle Initial
    <input type="text" maxlength="1" name="BillingMI" required="" />
    Last Name
    <input type="text" maxlength="50" name="BillingLastName" required="" />
    Email
    <input type="email" maxlength="50" name="BillingEmail" required="" />Phone
    <input type="tel" maxlength="50" name="BillingPhone" />
    
    Street Address
    <input type="text" maxlength="50" name="BillingAddress1" />
    
    City
    <input type="text" maxlength="50" name="BillingCity" />
    
    State
    <input type="text" maxlength="50" name="BillingStateProvince" />
    
    Zip
    <input type="text" maxlength="20" name="BillingPostalCode" />
    
    Payment Type<input type="hidden" name="PaymentType" value="CreditCard" />
    
    Name On Card <input type="text" maxlength="50" name="NameOnCard" required="" />
    
    Card Number <input type="text" maxlength="17" name="CardNumber" required="" />
    
    Cvv2 <input type="text" maxlength="4" name="Cvv2" required="" />
    
    Expiration Date <input type="text" maxlength="5" name="ExpirationDate" placeholder="00/00" required="" />
    
    Item ID?<input type="hidden" name="ItemID1" value="1" />
    
    Product Name <input type="hidden" name="ItemName1" value="Teacher" />
    
    Quantity <input type="hidden" name="Quantity1" value="1" />
    
    UnitPrice1<input type="hidden" name="UnitPrice1" value="1" />
    
    SKU1<input type="hidden" name="SKU1" value="60210-TEACHER" />
    
    WID<input type="hidden" name="WID" value="66685" />
    
    <input id="SendReceipt" type="hidden" name="SendReceipt" value="true" />
    <input id="OrderMode" type="hidden" name="OrderMode" value="Test" />
    <input id="TransactionType" type="hidden" name="TransactionType" value="Payment" />
    
    Authorization URL*<input type="hidden" name="OnSuccessUrl" value="www.world-affairs.org" />
    
    Decline URL <input type="hidden" name="OnDeclineUrl" value="www.world-affairs.org" />
    
    Error URL <input type="hidden" name="OnErrorUrl" value="www.world-affairs.org" />
    
    Guid <input type="hidden" name="AccountGuid" value="161c6015-7f70-4f3f-9c1f-028d4f79de62" />
    
    Account ID <input type="hidden" name="AccountID" value="18544" />
    
    <input type="submit" name="Submit" />
    
    </form>&nbsp;
    Quote Originally Posted by Old Pedant View Post
    p.s.: It was the "teacher" and "student" and their relative (backward) values that made me think this was homework. As if any student is worth 2000 teachers. <grin/>
    Last edited by VIPStephan; 07-20-2013 at 09:09 AM. Reason: added code BB tags

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Gotcha.

    Code:
    Product Name 
        <input type="hidden" name="ItemPrice1" />
        <select name="ItemName1" id="ItemName1">
        <option value="none">--choose one--</option>
        <option value="English Teacher"> English Teacher ($32,000)</option>
        <option value="Math Teacher"> Math Teacher ($45,000)</option>
        <option value="Physics Teacher"> Physics Teacher ($60,000)</option>
        <option value="Programming Teacher"> Programming Teacher (priceless)</option>
        </select>
    And then most anywhere on the page AFTER this, but best is JUST before the </body>:
    Code:
    <script type="text/javascript">
    (
      function( ) 
      {
          /* notice the underlines in the names here: */
          var prices = {
              "none" : 0,
              "English_Teacher" : 32000,
              "Math_Teacher" : 45000,
              "Physics_Teacher" : 60000,
              "Programming_Teacher" : 0.01
          };
          var sel = document.getElementByIt("ItemName1");
          sel.onchange = function( )
          {
              sel.form.ItemPrice1.value = 
                  prices[ sel.value.replace(/\s/g, "_") ];
          }
      }
    )();
    </script>
    </body>
    ...
    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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And don't tell my sister about this. She's an English teacher. <grin/>
    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
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ha! Ok, but I'm having one problem. When I select "English Teacher" I was hoping that "32000" would appear in the ItemPrice1 field and I can't see that. Am I missing something?

    Product Name
    <input type="text" name="ItemPrice1" />

    <select id="ItemName1" name="ItemName1"><option value="none">--choose one--</option><option value="English Teacher">English Teacher ($32,000)</option><option value="Math Teacher">Math Teacher ($45,000)</option><option value="Physics Teacher">Physics Teacher ($60,000)</option><option value="Programming Teacher">Programming Teacher (priceless)</option></select>


    <script type="text/javascript">// <![CDATA[
    ( function( ) { /* notice the underlines in the names here: */ var prices = { "none" : 0, "English_Teacher" : 32000, "Math_Teacher" : 45000, "Physics_Teacher" : 60000, "Programming_Teacher" : 0.01 }; var sel = document.getElementByIt("ItemName1"); sel.onchange = function( ) { sel.form.ItemPrice1.value = prices[ sel.value.replace(/\s/g, "_") ]; } } )();
    // ]]></script>
    Quote Originally Posted by Old Pedant View Post
    And don't tell my sister about this. She's an English teacher. <grin/>

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    UnitPrice1 is a hidden input. Did you inspect that element in the debugger tool to check the value?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Not in his code, it isn't, Glenn. Look again at his code in post #10:
    Code:
    <input type="text" name="ItemPrice1" />
    So maybe there's a bug. But I can't read the code as he has mangled it so I'll go back to my original.
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Aaarrgghh. The bug is a typo on my part.
    Code:
    var sel = document.getElementByIt("ItemName1");
    That needs to be
    Code:
    var sel = document.getElementById("ItemName1");
    and then the code works.
    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.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Oh ok. I was looking at his original code. Maybe there's no <form> tag so sel.form fails?

    BTW, the underscores in the keys are not required. Spaces in keys are perfectly valid.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Yeah, I had originally written it with no quotes around the key names. Then when I changed to put the quotes in, I didn't go back and remove the underlines. Mea culpa. Sloppy.
    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.


  •  
    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
    •