www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript select options and mantain disabled after refresh a page

Hybrid View

  1. #1
    Join Date
    May 2014
    Posts
    6

    Javascript select options and mantain disabled after refresh a page

    Hi every body,

    i want to select a multiple option and mantain it disabled after submit and refresh the page.

    I have code like this:
    page1.html: i pass some value to page_2.html
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Click checkboxes</title>
    <script>
    	function select(){
    		
    		var el = document.getElementById("mySelect").selectedIndex;
    		var c= document.getElementsByTagName("option")[el].value;
    		sessionStorage.checks = c;
    		alert(c);
    		window.location.assign("page_2.html");
    	}
    	
    	
    </script>
    </head>
    <body>
    
    
    
    <h2>how many tickets do you want? </h2>
    <form action = "page_2.html" onsubmit="select()">
    <select id="mySelect">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
       <option value="5">5</option>
       
    <input type="submit"   value = "OK">
    
    
    </select>
    </form>
      
      
    
    </body>
    </html>
    page_2html : here i select some value, after i want to maintain it disabled after submit and refresh/ reload page
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Checkbox answer</title>
    
    <script>
    	function checks()
    	
    	{
    			var i;
    			var c = sessionStorage.checks;
    		   var select = document.getElementById("sel");
       		   options = select.getElementsByTagName("option");
      		   values  = [];
      		 
    			
        for (i=0; i<options.length; i++)
         {
            if (options[i].selected) 
           { 
           		
           		values.push(options[i].value);
           		
            
            }
        }
     	
        if(values.length != c)
    		{
      		            alert("Devi selezione essattamente il numero di posti corrispondenti al numero di biglieti");
      	 	            return false;
      		                 	 
      	 	}
      	 	
        }
       
      		             
    	
    	
    </script>
    </head>
    <body>
    <h2> <h2>the sum of the number of selected seat must be exactly equal to the number selected on page_1!! </h2>
    <form action= "page_3.html" onsubmit="return checks()">
    
    <select name="seating position" id= "sel" multiple >
      <option value="1" >seat1</option>
     <option value="2">seat2</option>
     <option value="3">seat3</option>
     <option value="4">seat4</option>
    <option value="5">seat5</option>
    <option value="6">seat6</option>
    <option value="7">seat7</option>
    <option value="8">seat8</option>
    <option value="9">seat9</option>
    <option value="10">seat10</option>
    </select>
    <input type="submit" value = "OK">
    </form>
    
    
    
    </body>
    </html>
    page_3.html
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <h2>Accept reservation? </h2>
    <form action="page_1.html">
    
    <input type="submit" value = "OK">
    
    </form>
    </body>
    </html>
    Can you help me? Thank you!

  2. #2
    Join Date
    Feb 2014
    Location
    india
    Posts
    14
    all you can do is
    code : document.getElementById("sel").options[2].disabled=true;
    (or whatever is selected is select option)
    but this will only work on button click.but when you reload or refresh the page options will be enabled again.
    to control it on reload or refresh you need to somehow hide that option and append a new option with attribute disabled.

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