www.webdeveloper.com
Results 1 to 5 of 5

Thread: Select checkbox with condition and mantain

  1. #1
    Join Date
    May 2014
    Posts
    6

    Select checkbox with condition and mantain

    can you help me to write this function in javascript? I am the biginner. I have a series of checkbox on an page. A user inserts the number of checkbox wich he wants to select on page_1 and then go to the page_2 and select the checkbox number wich corresponds to the number he sent. For example, if the number that inserted on page_1 are 2 he must selected exactly 2 checkbox on page_2. I would also like to maintain checkbox checked on page_2. When another user come on that page, he cannot select the chekbox wich is checked but another. Thank you very much

  2. #2
    Join Date
    Oct 2013
    Posts
    417
    I love homework problems.....

    page_1.htm:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Click checkboxes</title>
    <script>
    	function addChecks(el,tot){
    		var c = el.value,
    		    t = tot.value;
    		if (el.checked == true){
    			var sum = (1*t+1*c);
    		}
    		if (el.checked == false){  //does the math for unchecking a box after it's been checked
    			var sum = (1*t-1*c);
    		}
    		document.getElementById("tot").value = sum;
    	}
    	
    	function go(el){
    		sessionStorage.checks = el.value;
    		window.location.assign("page_2.htm");
    	}
    </script>
    </head>
    <body>
    <p>Click some checkboxes. Then click "Done".</p>
    <form action="#">
    	<input type="hidden" id="tot" value="0"/>
    	<input type="checkbox" onclick="addChecks(this,tot)" value="1"/><br>
    	<input type="checkbox" onclick="addChecks(this,tot)" value="1"/><br>
    	<input type="checkbox" onclick="addChecks(this,tot)" value="1"/><br>
    	<input type="checkbox" onclick="addChecks(this,tot)" value="1"/><br>
    	<br>
    	<input type="button" onclick="go(tot)" value="Done"/>
    </form>
    </body>
    </html>
    page_2.htm:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Checkbox answer</title>
    <style>
    #answer{
    	font-weight:bold;
    }
    .yes{
    	color:green;
    }
    .no{
    	color:red;
    }
    </style>
    <script>
    	function checks(el,ans){
    		var c = sessionStorage.checks;
    		if (el.value == c){
    			ans.innerHTML = "Correct!";
    			ans.className = "yes";
    		}
    		else{
    			ans.innerHTML = "Wrong!";
    			ans.className = "no";
    		}
    	}
    </script>
    </head>
    <body>
    <p>How many boxes did you check on the previous page?</p>
    <form action="#">
    	<input type="radio" name="number" onclick="checks(this,answer)" value="0"/> 0<br>
    	<input type="radio" name="number" onclick="checks(this,answer)" value="1"/> 1<br>
    	<input type="radio" name="number" onclick="checks(this,answer)" value="2"/> 2<br>
    	<input type="radio" name="number" onclick="checks(this,answer)" value="3"/> 3<br>
    	<input type="radio" name="number" onclick="checks(this,answer)" value="4"/> 4
    </form>
    <div id="answer"></div>
    </body>
    </html>
    Quote Originally Posted by Noumedem View Post
    I would also like to maintain checkbox checked on page_2. When another user come on that page, he cannot select the chekbox wich is checked but another.
    This cannot be done with JavaScript alone. You'll have to store that information on a server.
    Last edited by Kevin2; 05-14-2014 at 07:03 PM. Reason: changed page_2.htm code

  3. #3
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    You can use COOKIE/GET (e.g. url query/parameters). example
    Code:
    function getCookie(name)
    {
    	var re = new RegExp("(?:(?:^|.*;)\\s*"
    		+ encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&")
    		+ "\\s*\\=\\s*([^;]*).*$)|^.*$");
    	return decodeURIComponent(document.cookie.replace(re, "$1")) || null;
    }
    function setCookie(name, value, expires, path, domain, secure)
    {
    	if (!name || /^(?:expires|max\-age|path|domain|secure)$/i.test(name))
    		return false;
    	var s = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    	expires = parseInt(expires, 10);
    
    	if (expires > 0) {
    		expires = new Date(new Date().getTime() + (expires * 1000));
    		s += '; expires=' +expires.toUTCString()+ '';
    	}
    	else if (expires < 0)
    		s += '; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    	if (!!path)
    		s += '; path=' +path+ '';
    	if (!!domain)
    		s += '; domain=' +domain+ '';
    	if (!!secure)
    		s += '; secure';
    	document.cookie = s;
    	return true;
    }
    function setupQuery()
    {
    	var form = document.forms[0].elements;
    	var size = parseInt(form['checkbox_size'].value, 10) || 1;
    	// set cookie parameters
    	setCookie('checkbox_size', size, 30 * 24 * 60 /* set expire to 30 days */);
    	// load next form with GET parameters set...
    	// use GET as a fallback if cookies are disabled
    	window.location.href = './form2.htm' + '?checkbox_size=' + size;
    }

  4. #4
    Join Date
    May 2014
    Posts
    6
    Ah Ok thank you very much Kevin 2 but that i want exactly it is something like this


    Page_1.html.erb
    //In this page i insert some number
    Code:
    <%= form_tag(page_2_path,  method: "get") do %>
      
      <%= text_field_tag 'number' %>
     <%= submit_tag "Ok" %>
    <% end %>
    page_2.html.erb

    Code:
    //In this page i capture the number and i select checkboxes (sum of checkbox checked must be equals at number)
    <%= form_tag( another_page_path, method: "post") do %>
    <table>
      <tr>
        <th></th>
        <th>Numero</th>
       
      </tr>
    
      <tr>
        <td><%= check_box_tag  name, '1'%></td>
     <td><%= check_box_tag  name, '2'%></td>
     <td><%= check_box_tag  name, '3'%></td>
     <td><%= check_box_tag  name, '4'%></td>
       
       
      </tr>
    
    </table>
    <%= submit_tag "OK" %>
    <% end %>
    Thank you very much

  5. #5
    Join Date
    May 2014
    Posts
    6
    Thank you ShrineDesigns please can you adapt you esample with my code? Thank you

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