SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sending values to a drop down list

    Hi
    I have an e-learning course which has an index page and the individual pages are embeded in to this. I'm trying to send the value of 3 selected items on one page to a drop down list on another using javascript. There is a js file where variables can be stored as this is attached to the index page and in here I have written this code....

    Code:
    	var firstChoice;
    	var secondChoice;
    	var thirdChoice;
    I have the theory behind how it works but can't work out the code I need.

    This is my first page....

    Code:
    <style>
    	.content {
    		width: 880px;
    		height:180px;
    	}
    	
    	.test {
    		width:800
    		height:100
    		
    	}
    	.answers{
    		position:absolute;
    		width:25px;
    		height:20px;
    		left: 200px;
    	    top: 4px;
    	}
    	
    	.correct{
    		background-repeat:no-repeat;
    		background-image:url(assets/correct-small.png);
    		z-index:1;
    	}
    	
    	.incorrect{
    		background-repeat:no-repeat;
    		background-image:url(assets/incorrect-small.png);
    		z-index:1;
    	}
    
    	.flip {
    		position:relative;
    		float:left;
    		margin-left:3px;
    		margin-right:3px;
    		width: 220px;
    		height: 22px;
    		padding: 3px;
    		margin-bottom: 2px;
    		border: 1px #CCC solid;
    		background-color: #EFEFEF;
    		text-align: center;
    		}
    	
    	.flip:hover{
    		cursor: pointer;
    		background-color: #FFF;
    	}
    </style>
    
    <script language="javascript">
    	$true = 0;
    	$false = 0;
    	
    	for(i=1;i<=15;i++) {
    		$("#flipbox" + i).one("click",function(){
    			$(this).flip({
    				direction:'tb',
    				color: '#FFF'
    			});
    		});
    	}
    	
    	function addAnswer(div, answer){	
    		if(answer === 't') {
    			$true++;
    			$("#"+div).addClass("correct");
    			if($true == 3) {
    				$(".test").fadeOut(1000, function(){
    					$(this).html("<h3>Identifying your barriers to employment is the first step to overcoming them.</h3>" 
    				    ).fadeIn(1000);	
    				})
    			}
    		}
    		else
    			$("#"+div).addClass("incorrect");
    	}
    	updateBookmark();
    	
    </script>
    
    <h1>Overcoming Hurdles</h1>
    <img class="image_yourcareer" src="./images/yourcareer.gif" />
    <h2>What's Stopping me?</h2>
    <p>Click on up to <u>three</u> barriers below you feel are holding you back the most.</p><br />
    <div class="content">
        <div class="flip" onclick="addAnswer('answer1','t')" id="flipbox1">Age<div class="answers" id="answer1"></div></div>
        <div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Disability<div class="answers" id="answer2"></div></div>
        <div class="flip" onclick="addAnswer('answer3','t')" id="flipbox3">Transport<div class="answers" id="answer3"></div></div>
        <div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Lack of experience<div class="answers" id="answer4"></div></div>
        <div class="flip" onclick="addAnswer('answer5','t')" id="flipbox5">Over-qualified<div class="answers" id="answer5"></div></div>
        <div class="flip" onclick="addAnswer('answer6','t')" id="flipbox6">Looks/presentation<div class="answers" id="answer6"></div></div>
        <div class="flip" onclick="addAnswer('answer7','t')" id="flipbox7">Lack of qualifications<div class="answers" id="answer7"></div></div>
        <div class="flip" onclick="addAnswer('answer8','t')" id="flipbox8">Lack of money<div class="answers" id="answer8"></div></div>
        <div class="flip" onclick="addAnswer('answer9','t')" id="flipbox9">Poor job hunting skills<div class="answers" id="answer9"></div></div>
        <div class="flip" onclick="addAnswer('answer10','t')" id="flipbox10">Unrealistic expectations<div class="answers" id="answer10"></div></div>
        <div class="flip" onclick="addAnswer('answer11','t')" id="flipbox11">Childcare needs<div class="answers" id="answer11"></div></div>
        <div class="flip" onclick="addAnswer('answer12','t')" id="flipbox12">Attitude<div class="answers" id="answer12"></div></div>
        <div class="flip" onclick="addAnswer('answer13','t')" id="flipbox13">Personal Hygiene<div class="answers" id="answer13"></div></div>
        <div class="flip" onclick="addAnswer('answer14','t')" id="flipbox14">Criminal record<div class="answers" id="answer14"></div></div>
        <div class="flip" onclick="addAnswer('answer15','t')" id="flipbox15">Low self esteem<div class="answers" id="answer15"></div></div>
    </div>
    <div class="test"></div>
    The user should select 3 answers from here. Then I want these selections to populate the drop down menu on this page(obviously without the answers that are already in there)....

    Code:
     <script type="text/javascript">
     
     
    /*Begin*/
    function displayHTML(form) {
    var inf2 = form.Box.value;
    var inf3 = form.htmlBox1.value;
    var inf4 = form.htmlBox2.value;
    var inf5 = form.htmlBox3.value;
    
    win = window.open("", 'popup', 'toolbar = yes, status = no');
    win.document.write("" +  "<H2>" + "<b>" + "My Action Plan" + "</H2>" +  "<br>" + "My barrier:" + "</b>" + inf2 + "<br>" + "<br>" + "<b>" + "How will I remove/reduce this barrier?: " + "</b>" + inf3 + "<br>" + "<br>" + "<b>" + "When this is to be achieved by:" + "</b>" + inf4 + "<br>" + "<br>" + "<B>" + "Steps I am to take to achieve this: " + "</b>" + inf5 + "<br>" + "<br>" + "<html><head><title>popup</title></head><body><br><br>" + "<a href='print.html' onclick='window.print();return false;'>" + "<img src='images/printer.png' height='35px' width='132px' border='0'></a></body></html>" + ""); 
    }
    
    	
    //-->	
      </script>
    
    
    
    <h1>Overcoming Hurdles</h1>
    <h2>Action plan</h2>
    <p>You are now going to create an action plan. Choose one barrier you would like to overcome and plan the steps you will take to achieve it. An important thing to bear in mind is setting a time to achieve your goal.  Make sure you do this and make sure it is realistic.</p>
    
    <form name="barriers">
      <p>
        My barrier:
    <label for="Box"></label>
        <select name="Box" id="Box">
          <option selected="selected">Please Select</option>
          <option value="Age">Age</option>
          <option value="Attitude">Attitude</option>
          <option value="Child care needs">Child care needs</option>
          <option value="Criminal record">Criminal record</option>
          <option value="Disability">Disability</option>
          <option value="Lack of experience">Lack of experience</option>
          <option value="Lack of qualifications">Lack of qualifications</option>
          <option value="Lack of money">Lack of money</option>
          <option value="Looks/presentation">Looks/presentation</option>
          <option value="Low self esteem">Low self esteem</option>
          <option value="Over-qualified">Over-qualified</option>
          <option value="Personal hygiene">Personal hygiene</option>
          <option value="Poor job hunting skills">Poor job hunting skills</option>
          <option value="Transport">Transport</option>
          <option value="Unrealistic expectations">Unrealistic expectations</option>
        </select>
        <br />
        <br />
        How will I remove/reduce this barrier?
    
    <br />
    <label for="htmlBox1"></label>
        <textarea onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" name="htmlBox1" id="htmlBox1" cols="45" rows="2"></textarea>
      When this is to be achieved by:
        <label for="htmlBox2"></label>
      <input onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" type="text" name="htmlBox2" id="htmlBox2" />
      </p>
    <p>Steps I am to take to achieve this: <br />
      <label for="htmlBox3"></label>
        <textarea onclick="Javascript:unbindKeypress()" onblur="Javascript:activateKeypress();" name="htmlBox3" id="htmlBox3" cols="45" rows="2"></textarea>
    <input type="button" value="View Action Plan" onClick="displayHTML(this.form)"/>
       
      </p>
    </form>
    
    
    
    <script language="javascript">
    	updateBookmark();
    </script>
    Can anyone help or point me in the right direction with this as I need to get it done by tomorrow?

    Also does anyone know any good Javascript courses? I'm struggling to learn from reading online and need an actual class or video tutorial as I learn more by being shown.

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Nov 2009
    Location
    North Carolina
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if you figured this out, but if you are selecting values on one page and then need those choices to show up on the other page, then you will need to store and pass those values to the second page. Normally you could do this using forms and storing using post or get to pass to the second page. I don't know any good JavaScript sites off the top of my head but I would just start googling and reading as much as you can. That's how I've learned over the years.
    If I have been of help to you please consider making a
    donation for my time via PayPal here.
    Get a GREAT domain for under $20 each day via my
    STEAL of the DAY page.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Thanks for your reply. I managed to get it to work :-)

    I've also managed to find a course on php in my area which starts in September so thats a good start!! Just not found a Javascript one yet. I dont read very well so I need to be taught by example but I have found a couple of video tutorials to start this weekend so they may help


Tags for this Thread

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
  •