SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can I alert depending on document.getElementById selected?

    Hi I have a form with two select drop down i've gave each their own different ID but now i am trying to use the document.getElementById on both but its only picking up second one how can I get so that depending on the select iD user picks it would be like if document.getElementById("location") alert location else if document.getElementById("color") alert color.

    I have tried but its just call the second document.getElementById("color")

    Heres' the form
    HTML Code:
    <form action="<?php bloginfo('url'); ?>" method="get" class="x">
    <select id="location" >
     <option value="america">Great Site</option>
     <option value="england">Better Site</option>
    </select>
    
    <select id="color" >
     <option value="blue">Great Site</option>
     <option value="red">Better Site</option>
    </select>
    </form>
    here the function I have tried but doesnt work it skips the first if statment how can i get to select the if statement depending on the select ID the user picks
    Code:
    function()
    	{
    	 var selectBox = document.getElementById("location");
    	 var selectBox1 = document.getElementById("color");
       	 var selectValue = selectBox.options[selectBox.selectedIndex].value;
    	
    
       		if (selectBox == "location")
    			{
    			alert("location");
    			}
    			else
    		 if (selectBox1 == "color");
    			{
    				alert("color");
    			}
    		
    	}}}(jQuery,window,undefined));

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Try this code (must be added after the <select> lists.
    Code:
    <script type="text/javascript"><!--
    function fname(){
      if(this.id == "location"){
        alert("location");
      }
      else if (this.id == "color"){
        alert("color");
      }
    }
    document.getElementById('location').onchange = fname;
    document.getElementById('color').onchange = fname;
    //-->
    </script>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Alternatively, you can try adding a class to the selects then cycle through them to alert the id:

    HTML Code:
    <form method="get">
    	<select id="location" class="selectBox">
    		<option value="america">Great Site</option>
    		<option value="england">Better Site</option>
    	</select>
    
    	<select id="color" class="selectBox">
    		<option value="blue">Great Site</option>
    		<option value="red">Better Site</option>
    	</select>
    </form>
    Code JavaScript:
    <script>
    	var selects = document.querySelectorAll('.selectBox'), 
    		i;
    	for( i = 0; i < selects.length; i++ ) {
    		selects[i].onchange = function() {
    			alert(this.id);
    		};			
    	}
    </script>


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
  •