SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a simple drop down menu outputting value into box

    Hi guys, I need a simple drop down menu with options that when I select one of the options it outputs a stored variable in an output box.

    Does anyone know for a script to do this?

    thanks

    Owain

  2. #2
    SitePoint Zealot ssttoo's Avatar
    Join Date
    Jan 2004
    Location
    LA, California
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A dropdown of fruits, a button and two fields to output the selected name/value:

    HTML Code:
    <select id="mydrop">
        <option value="">Select your fruit...</option>
        <option value="pear">Pear</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
        <option value="apple">Macintosh Apple</option>
    </select>
    
    <input type="button" value="Go" id="go" /><br />
    
    Selected value: <input type="text" id="result-value" />
    Selected name:  <input type="text" id="result-name" />
    The JavaScript magic:

    Code javascript:
    <script type="text/javascript">
     
    // attach click listener
    document.getElementById('go').onclick = function() {
        // the drop down element
        var drop = document.getElementById('mydrop');
     
        // update the result value field
        document.getElementById('result-value').value = drop.value;
     
        if (drop.value === '') { // if no option is selected
            document.getElementById('result-name').value = '';
        } else {
            document.getElementById('result-name').value = drop.options[drop.selectedIndex].text;
        }
     
    }
    </script>
    Last edited by ssttoo; Jun 12, 2008 at 14:33. Reason: adding javascript highlight

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The script needs to be run after the elements are available.

    Either place the script at the end of the body, just before the </body>, or use some other method to run the script after the page has loaded.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still no luck with it, I embedded the script straight into the html page and tried to source it in from a js file, both did not work,

    I am trying to set up a form that allows users to purchase canvas prints of various sizes,

    I want the form to have input for the customers name, contact number, email address, delivery address, etc ( I want this to be sent when a check out button is pressed)

    I also want it to have a seperate form section which has the canvas details (for example drop down menu with all the canvas sizes) an input box which displays the price of the canvas size (the canvas price is stored in the options value tag) and a paypal checkout express button (I want the checkout express button to change depending on the canvas size & price) so if someone selects a 24" by 24" canvas in the drop down menu the page will refresh with the correct paypal checkout button and the price will be displayed in an input box...

    Is this possible to do?

  5. #5
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my html/javascript document so far
    HTML Code:
    <form action="">
    	<fieldset>
    		<legend>Contact details</legend><ol>
    		       	<label for="name">Name:</label>
              <input id="name" name="name" class="text" type="text"  />
              <label for="email"><br />
            Email Address:</label>
             <input id="email" name="email" class="text" type="text"  />
            <label for="phone"><br />
            Telephone:</label>
            <input id="phone" name="phone" class="text" type="text"  />
            </ol>
    		<fieldset>
    <legend>Delivery address</legend>
                    <ol>
                    <label for="add1">1st line of Address:</label>
                    <input id="add1" name="add1" class="text" type="text"  /><br />
    				<label for="add2">2nd line of Address:</label>
                    <input id="add2" name="add2" class="text" type="text"  /><br />
                    <label for="town">Town:</label>
                   <input id="town" name="town" class="text" type="text"  /><br />
                    <label for="postcode">Postcode:</label>
                    <input id="postcode" name="postcode" class="text" type="text" />
                    </ol>
     <fieldset>
    <legend>Order details</legend>
                   <ol>
                   <label for="canvas">Canvas size:</label>
    <select name="mydrop">
    				 <option value="30.00">12x12
                     </option>
                     <option value="42.00">12x16
                     </option>
                     <option value="48.00">12x20
                     </option>
                     <option value="54.00">12x24
                     </option>
                     <option value="60.00">12x28
                     </option>
                     <option value="66.00">12x32
                     </option>
                     <option value="72.00">12x36
                     </option>
                     <option value="78.00">12x40
                     </option>
                     <option value="90.00">12x44
                     </option>
                     <option value="102.00">12x48
                     </option>
                     <option value="132.00">12x60
                     </option>
                     <option value="48.00">16x16
                     </option>
                     <option value="54.00">16x20
                     </option>
                     <option value="60.00">16x24
                     </option>
                     <option value="66.00">16x28
                     </option>
                     <option value="72.00">16x32
                     </option>
                     <option value="78.00">16x36
                     </option>
                     <option value="90.00">16x40
                     </option>
                     <option value="102.00">16x44
                     </option>
                     <option value="132.00">16x48
                     </option>
                     <option value="156.00">16x60
                     </option>
                     <option value="60.00">20x20
                     </option>
                     <option value="66.00">20x24
                     </option>
                     <option value="72.00">20x28
                     </option>
                     <option value="78.00">20x32
                     </option>
                     <option value="90.00">20x36
                     </option>
                     <option value="102.00">20x40
                     </option>
                     <option value="132.00">20x44
                     </option>
                     <option value="156.00">20x48
                     </option>
                     <option value="180.00">20x60
                     </option>
                     <option value="72.00">24x24
                     </option>
                     <option value="78.00">24x28
                     </option>
                     <option value="90.00">24x32
                     </option>
                     <option value="102.00">24x36
                     </option>
                     <option value="132.00">24x40
                     </option>
                     <option value="156.00">24x44
                     </option>
                     <option value="180.00">24x48
                     </option>
                     <option value="204.00">24x60
                     </option>
                     <option value="90.00">28x28
                     </option>
                     <option value="102.00">28x32
                     </option>
                     <option value="132.00">28x36
                     </option>
                     <option value="156.00">28x40
                     </option>
                     <option value="180.00">28x44
                     </option>
                     <option value="204.00">28x48
                     </option>
                     <option value="228.00">28x60
                     </option>
                     <option value="132.00">32x32
                     </option>
                     <option value="156.00">32x36
                     </option>
                     <option value="180.00">32x40
                     </option>
                     <option value="204.00">32x44
                     </option>
                     <option value="228.00">32x48
                     </option>
                     <option value="252.00">32x60
                     </option>
                     <option value="180.00">36x36
                     </option>
                     <option value="204.00">36x40
                     </option>
                     <option value="228.00">36x44
                     </option>
                     <option value="252.00">36x48
                     </option>
                     <option value="276.00">36x60
                     </option>
                     <option value="228.00">40x40
                     </option>
                     <option value="252.00">40x44
                     </option>
                     <option value="276.00">40x48
                     </option>
                     <option value="300.00">40x60
                     
    </select><br />
    <input type="button" value="Go" id="go" /><br />
    
    Price <input type="text" id="result-value" />
                 
                   </ol></form>
    this is the javascript

    Code:
    <script type="text/javascript">
    
    
    
     
    // attach click listener
    document.getElementById("go").onclick = function() {
        // the drop down element
        var drop = document.getElementById("option value");
     
        // update the result value field
        document.getElementById("result-value").value = drop.value;
     
        if (drop.value === '') { // if no option is selected
            document.getElementById("result-name").value = "";
        } else {
            document.getElementById("result-name").value = drop.options[drop.selectedIndex].text;
        }
     
    }
    </script>

  6. #6
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've uploaded the basic layout of the form at

    http://www.icomworks.co.uk/canvaspayform.html

    thanks

    O

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You're trying to access the select element with getElementById("option value") which won't work because the string is an invalid identifier. You will need to provide either a valid identifier or use some other technique.

    Option 1: Provide a valid identifier

    Code html4strict:
    <select name="mydrop" id="mydrop">

    Code javascript:
    var drop = document.getElementById("mydrop");

    Option 2: Access the named element instead

    Code javascript:
    var drop = this.form.elements['mydrop'];

    Once you have access to the select element, what it seems that you're script is trying to do is to update the result-value element when the button is clicked.

    Would it not be better to instead do that when the select element is changed? This would mean using an identifier for the form so that the event can more easily be attached to the select element.

    When it comes to working with form elements, it's better to have just the one identifier on the form itself and use standard techniques to access named elements. So we can use Option 1 to access the form, and the script technique from Option 2 to access the elements.

    To clarify my intentions here, I'm going to assign to the select element an onchange event that will update the price field.

    Code html4strict:
    <form id="canvasOrder" action="">
    ...
    <select name="mydrop">
    ...
    <!-- the Go button has been taken out -->
    Price <input type="text" name="price" />
    ...
    </form>

    Code javascript:
    var canvasForm = document.getElementById("canvasOrder");
    // attach onchange event
    canvasForm.elements['mydrop'].onchange = function () {
        // update price field when select changes
        this.form.elements['price'].value = this.value;
    };
    // update price field when page loads
    canvasForm.elements['mydrop'].onchange();

    Another issue with the form is that the fieldsets should not be nested within each other, but that's another issue for some other occasion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to solve the problem to that onchange issue.. I changed the .onlclick to .onchange and deleted the button from the html. the javascript code now looks like:

    Code:
    <script type="text/javascript">
     
    // attach click listener
    document.getElementById('mydrop').onchange = function() {
        // the drop down element
        var drop = document.getElementById('mydrop');
     
        // update the result value field
        document.getElementById('result-value').value = drop.value;
     
        if (drop.value === '') { // if no option is selected
            document.getElementById('result-name').value = '';
        } else {
            document.getElementById('result-name').value = drop.options[drop.selectedIndex].text;
        }
     
    }
    </script>
    This now works..

    I have uploaded the latest version of the form to the same URL as above.

    Are you aware of any way to dynamically change the value of a paypal express checkout button based on the value of the price field in my form?
    Last edited by Owz2004; Jun 19, 2008 at 04:31.

  9. #9
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Owz2004 View Post

    Are you aware of any way to dynamically change the value of a paypal express checkout button based on the value of the price field in my form?
    I have managed to find some help regarding this issue, if anyone has a similar problem they can find the solution at http://www.paypaldeveloper.com/pdn/b...&thread.id=168


Bookmarks

Posting Permissions

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