www.webdeveloper.com
Results 1 to 2 of 2

Thread: Page refreshes before showing hidden div

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    8

    Page refreshes before showing hidden div

    Hi all - I'm trying to build a form that has a series of drop downs asking a couple of questions and when you click submit, one of a few possible hidden divs are revealed depending on your answers. Hiding and showing divs are fairly simple and I have a single drop down in the form that when you hit submit, fires the change visibility function, but then the page refreshes and the revealed div is rehidden. I'm fairly new to javascript, so not entirely sure whats going on - hopefully someone can point out my mistake in my code?

    many thanks!!
    frank

    Code:
    <script language="javascript" type="application/javascript">
    	function showstuff(id) {
    		alert("id = " + id);
    		document.getElementById(id).style.visibility = "visible";	
    	}
    	function hidestuff(id) {
    		alert("id = " + id);
    		document.getElementById(id).style.visibility = "hidden";
    	}
    	
    	function evaluateForm(thisform) 
    	{
    		if(thisform.doYouLike.selectedIndex == 0 ){
    			alert("Please make a selection");
    			return;
    		}
    		if (thisform.doYouLike.selectedIndex == 1){
    			alert(thisform.doYouLike.selectedIndex);
    			hidestuff('startInformation');
    			showstuff('sorry');
    			return;
    		}
    		else if (thisform.doYouLike.selectedIndex == 2) {
    			alert(thisform.doYouLike.selectedIndex);
    			hidestuff('startInformation');
    			showstuff('windowsPackShot');
    			return;
    		}
    	}
    </script>
    
    <div id="content">
            <div id="leftArea">
                Do you like cars?<br/>
                <form action="" onsubmit="return evaluateForm(this)" method="post">
                	<select id="doYouLike">
                    	<option value="-">Please select</option>
                        <option value="nope">Nope</option>
                        <option value="yep">Yep</option>
                    </select>
                    <input type="submit" value="Check if you are allowed to win the car" />
                </form>
            </div>
            <div id="rightArea">
            	<div id="startInformation">some information here about cars</div>     
            </div>
        </div>
    	<div id="clear"></div>
        <div id="carPictureShot">
        	Buy me I'm great
        </div>
        <div id="sorry">
        	Sorry you are not worthy!
        </div>
    Obviously I have a few bits missing like a couple of end divs, head, html as this is only a snippet. thanks!

  2. #2
    Join Date
    May 2009
    Posts
    8

    resolved Resolved

    Just return false on each occasion!! I presume this short circuits the actual submit of the form?

    cheers

    frank

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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