SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript dropdown help

    I am trying to make a dropdown list where, when the user clicks the option "more..."it takes them to a URL.

    I am using a <select> list, it's for an ecommerce site where the user is selecting the quantity. It goes up to '10', then the last option is 'More...', which is supposed to take them to a product page.

    I have googled and tried different things, and they all kinda work, but not how I want them to. What I'm currently using right now:

    HTML Code:
    <select name="qty" id="qty" onchange="window.open(this.options[this.selectedIndex].value,'_top')" >
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="<?php echo $_product->getProductUrl() ?>">More...</option>
    </select>
    (note: this is all wrapped in <form> tags). What this does is go to the URL specified by 'value='. Except I only want it to go to a URL when 'More...' is selected. How could I accomplish this?
    Beware of Raj - My Portfolio and Blog.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can try:
    Code JavaScript:
    form.qty.onchange = function() {
    	if( this.options[this.selectedIndex].text === 'More...' ) {
    		window.location = this.value;
    	}
    };

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    While what centered effect has posted is fine it's using the old HTML 4.01 ECMA JavaScript standards which still a valid way to write the onchange event but shouldn't be used with XHTML and HTML5, also at the moment the onchange event is static which means if you were to change your select list from saying More... to something like Need more then 10? you risk forgetting about the onchange event which would cause the script to stop working.

    The below code i have posted will seek out the last index of the select options and compared it with the currently selected index, if they match it will then redirect you otherwise it will act as a normal select box:

    HTML Code:
    <select name="qty" id="qty" onchange="redirect(this)">
        <!-- options here -->
    </select>
    Code JavaScript:
    function redirect(ele) {
        var options = ele.options,
            length  = ele.options.length,
            curIdx  = ele.selectedIndex;
     
        if (options[length - 1].index === curIdx) {
            window.location = 'somefile.php?qty=' + options[curIdx].value;
        }
    }

    You can also see the following jsFiddle for a demo http://jsfiddle.net/zMEDy/

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The next step from here is to remove the inline event attribute from the HTML content, so that it can be placed with the scripting code instead as a part of the behavioral changes that occur.

    Code:
    <select name="qty" id="qty" onchange="redirect(this)">
        <!-- options here -->
    </select>
    Code javascript:
    ...
    document.getElementById('qty').onchange = redirect;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The next step is to listen for the keyup event as well. Here I removed the inline JavaScript and added John Resig's addEvent listener function, and I am checking against non integers (parseInt):

    Untested...
    Code HTML4Strict:
    <form>
    	<select name="qty" id="qty">
    	    <option value="1" selected="selected">1</option>
    	    <option value="2">2</option>
    	    <option value="3">3</option>
    	    <option value="4">4</option>
    	    <option value="5">5</option>
    	    <option value="6">6</option>
    	    <option value="7">7</option>
    	    <option value="8">8</option>
    	    <option value="9">9</option>
    	    <option value="10">10</option>
    	    <option value="products.php?item=1234">Next Bundle....</option>
    	</select>		
    </form>
    Code JavaScript:
    // [url]http://ejohn.org/projects/flexible-javascript-events/[/url]
    function addEvent( obj, type, fn ) {
    	if ( obj.attachEvent ) {
    		obj['e'+type+fn] = fn;
    		obj[type+fn] = function(){
    			obj['e'+type+fn]( window.event );
    		};
    		obj.attachEvent( 'on'+type, obj[type+fn] );
    	} else
    		obj.addEventListener( type, fn, false );
    }	
     
    function redirectBasedOnOption(el, fn) {
    	addEvent( el, 'change', fn );
    	addEvent( el, 'keyup', fn );	
    }		
     
    redirectBasedOnOption(
    	document.getElementById('qty'), 
    	function() {
    		var val = parseInt(this.value);
    		if(isNaN(val)) {
    			console.log(this.value);
    			// window.location = this.value;	
    		}
    	}
    );

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by centered effect View Post
    The next step is to listen for the keyup event as well. Here I removed the inline JavaScript and added John Resig's addEvent listener function, and I am checking against non integers (parseInt):

    Untested...
    Something you will find is that IE references the event object instead of copying it, resulting in the this keyword getting clobbered and referring to the window object instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help guys. I ended up going with chris.upjohn's solution and it works perfectly.
    Beware of Raj - My Portfolio and Blog.


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
  •