www.webdeveloper.com
Results 1 to 7 of 7

Thread: Translate small Javascript block to jQuery

  1. #1
    Join Date
    Nov 2009
    Posts
    97

    Translate small Javascript block to jQuery

    Hello all,

    Could anyone be so kind and tell me how to turn this:
    Code:
    <script type="text/javascript">
    		function enabler(){
    			var reqAdults = document.getElementById('reqAdults');
    			
    			if(document.reserveForm.adults.selectedIndex == 0){
    				reqAdults.style.display = "inline";
    			}
    			else{
    				reqAdults.style.display = "none";
    			}
    		}
    	</script>
    Into jQuery so I can use more interesting transitions and make it look better.

    Sorry, I've never been good with client-side stuff

    Thanks...

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    Code:
    function enabler(){
    var displ=(document.reserveForm.adults.selectedIndex == 0)? 'inline' : 'none';
    $('#reqAdults').css('display',displ);
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Nov 2010
    Posts
    1,084
    you can make it easier on yourself by passing the selectedIndex as an argument in the select onchange:

    Code:
    <select name="first_name" onchange="enabler(this.selectedIndex)">
    
    function enabler(ind){
    	$("#reqAdults").css("display",ind==0?"inline":"none")
    	}

  4. #4
    Join Date
    Nov 2009
    Posts
    97
    Thank you both of you guys for the help, unfortunately none of them worked

    I'm calling the function onchange as you said xelawho.

    I just don't understand, every time I need client-side is an endless fight...

  5. #5
    Join Date
    Nov 2010
    Posts
    1,084
    if you wanted it to be pure jQuery you can attach the event handler like below, provided you can give the select an id of "thesel" (or whatever). Remember to put your script below the html, or (better) to wrap it in a document ready function:

    Code:
    $(document).ready(function() {
     $("#thesel").change (function(){
    $("#reqAdults").css("display",$(this).prop("selectedIndex")==0?"inline":"none")
    	});
    });
    if that doesn't work you might need to show more code...

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by Sub_Seven View Post
    ...unfortunately none of them worked
    ...
    here is the page with the code i posted. if this page does not work i am having hallucinations
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Nov 2009
    Posts
    97

    Unhappy

    Hello, sorry for taking so long but I don't get to work on the same project everyday.

    So yeah, it does work, but my last attempt to make it look better doesn't, can one of you guys tell me why this wont work:

    Code:
    <script type="text/javascript">
    	function enabler(){
    		var displ = (document.reserveForm.adults.selectedIndex == 0)? 1 : 0;
    		$('#reqAdults').stop().animate({'opacity',displ}, 300);
    	}
    </script>
    I just don't see anything wrong, other than the fact that it doesn't work

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles