Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Show Hide Div depending on checkbox selection

    Hi, in my previous thread I was asking how to set a checkbox to checked if a file has been uploaded. Sorted that part, now I just wanted the next step of the form to display a different set of options based on what the state of the select box is.

    Here is the relevant part of the form

    Code:
    <fieldset id="Upload a photo"  class="hidden" title="Upload a photo">
    		<legend>Upload a photo</legend>
    		<ol>
    		
    			<li>
    				<input id="file" type="file" name="uploadPhoto">
    				<div class="hidden"><input id="imageChecked" type="checkbox"></div>
    			</li>
    			</ol>
    		
    		<div class="buttonnav prev">prev</div>
    		<div class="buttonnav next">next</div>
    		</fieldset>
    		
    		
    		<fieldset id="Now choose your reward"  class="hidden" title="Now choose your reward">
    		<legend>Reward</legend>
    		<ol>
    		<li>
    				<div class="grouphead">Your Reward</div>
    	<div id="rewards1"> 
    		<ol>
    		<li>
    				
    				<input type="radio" name="reward1" value="reward1" id="reward1" tabindex="50">
    				<label for="reward1" class="inline">25 Free Listings*</label>
    	</li>
    	</ol>
    	<ol>
    	<li>
    		<input type="radio" name="reward2" value="reward2" id="reward2" tabindex="60">
    		<label for="reward2" class="inline">Number 1 Rankings**</label>
    	</li>
    	</ol>
    	<ol>
    	<li>
    		<input type="radio" name="reward3" value="reward3" id="reward3" tabindex="60">
    		<label for="reward3" class="inline">Featured Listings***</label>
    		</li>
    		</ol>
    	</div>
    	<div id="rewards2">
    			<ol>
    		<li>
    				<div class="grouphead">Your Reward</div>
    		<ol>
    			<li>
    				
    				<input type="radio" name="reward4" value="reward4" id="reward4" tabindex="50">
    				<label for="reward4" class="inline">A maximum of 15 listings*</label>
    			</li>
    			</ol>
    			<ol>
    			<li>
    		<input type="radio" name="reward5" value="reward5" id="reward5" tabindex="60">
    		<label for="reward5" class="inline">Number 1 Rankings**</label>
    		</li>
    		</ol>
    		<ol>
    			<li>
    		<input type="radio" name="reward6" value="reward6" id="reward6" tabindex="60">
    		<label for="reward6" class="inline">Featured Listings***</label>
    		</li>
    		</ol>
    	</div>
    	<li>
    	<strong>Rewards for if you uploaded a photo****</strong>
    	<p>*  A maximum of 25 listings</p>
    	<p>** Thats 10 listings that will rank 1st place in search results</p>
    	<p>*** Your listed items will be featured on the home page for 1 week</p>
    	</li>
    	<li>
    	<strong>Rewards for if you did not upload a photo****</strong>
    	<p>* A maximum of 15 listings</p>
    	<p>** 5 listings that will rank 1st place in search results (on a rotation     basis)</p>
    	</li>
    	<li>
    	<p>Your reward can take up to 24 hours before being credited to your account.</p>
    	</li>
    	</ol>
    		<div class="buttonnav prev">prev</div>
    		<button type="submit">send</button>
    	</fieldset>
    and here is the ext.js file which is included in the page.

    Code:
    $(document).ready(function() {
        if( $('.imageChecked:checked').length > 0 ) {
            $("#rewards1").show();
    		$("#rewards2").hide();
        } else {
            $("#rewards1").hide();
            $("#rewards2").show();
        }
    });
    Cant seem to figure it out

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I don't know about the rest of it, but
    Code:
    if( $('.imageChecked:checked').length > 0 ) {
    seems to be asking if the collection of elements with a class name of "imageChecked" which are checked is larger than 0 whereas it looks like your checkbox does not have that class name, but rather that ID...
    Code:
    <input id="imageChecked" type="checkbox">
    although it would appear that
    Code:
    if ($('#imageChecked').is(":checked"))
    would be a better test to make, really, considering the rest of your html

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi thanks for your reply.

    I tried

    Code:
    $(document).ready(function() {
        if ($('#imageChecked').is(":checked")) {
    		$("#rewards2").hide();
        } else {
            $("#rewards2").show();
        }
    });
    But both divs are still shown

    and changing

    Code:
        if ($('#imageChecked').is(":checked")) {
    in the first script i posted, only allows div2 to be displayed.

    Code:
    $(document).ready(function() {
        if ($('#imageChecked').is(":checked")) {
    		$("#rewards1").show();
    		$("#rewards2").hide();
        } else {
            $("#rewards2").show();
    		$("#rewards1").hide();
    
        }
    });
    Last edited by aquaman; 06-29-2013 at 07:14 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I don't really understand the point of your code. It would seem to make more sense to hide both divs with css on page load, then control which is shown and hidden using jQuery...

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        $('#imageChecked').on("click",function(){
    	if ($(this).is(":checked")) {
    		$("#rewards2").hide();
    		$("#rewards1").show();
        } else {
            $("#rewards2").show();
    		$("#rewards1").hide();
        }
    	});
    });
    </script>

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Exclamation

    Hi, the point of the form is to display different option depending on whether a file has been selected.

    My css file now reads

    Code:
    #rewards1 {
    	display:none;
    	}
    	
    #rewards2 {
    	display:none;
    	}
    My form

    Code:
    <div id="rewards1"> 
    		<ol>
    		<li>
    				
    				<input type="radio" name="reward1" value="reward1" id="reward1" tabindex="50">
    				<label for="reward1" class="inline">25 Free Listings*</label>
    	</li>
    	</ol>
    	<ol>
    	<li>
    		<input type="radio" name="reward2" value="reward2" id="reward2" tabindex="60">
    		<label for="reward2" class="inline">Number 1 Rankings**</label>
    	</li>
    	</ol>
    	<ol>
    	<li>
    		<input type="radio" name="reward3" value="reward3" id="reward3" tabindex="70">
    		<label for="reward3" class="inline">Featured Listings***</label>
    		</li>
    		</ol>
    	</div>
    	<div id="rewards2">
    			<ol>
    		<li>
    		<ol>
    			<li>
    				
    				<input type="radio" name="reward4" value="reward4" id="reward4" tabindex="80">
    				<label for="reward4" class="inline">A maximum of 15 listings*</label>
    			</li>
    			</ol>
    			<ol>
    			<li>
    		<input type="radio" name="reward5" value="reward5" id="reward5" tabindex="80">
    		<label for="reward5" class="inline">Number 1 Rankings**</label>
    		</li>
    		</ol>
    		<ol>
    			<li>
    		<input type="radio" name="reward6" value="reward6" id="reward6" tabindex="100">
    		<label for="reward6" class="inline">Featured Listings***</label>
    		</li>
    		</ol>
    	</div>
    and the jquery as you advised

    Code:
    $(document).ready(function() {
        $('#imageChecked').on("click",function(){
    	if ($(this).is(":checked")) {
    		$("#rewards2").hide();
    		$("#rewards1").show();
        } else {
            $("#rewards2").show();
    		$("#rewards1").hide();
        }
    	});
    });
    Now neither of the divs are shown

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    what is it exactly that you want? if you want one showing on page load, do that in css. if you want to decide which to show or hide depending on if the checkbox is checked, do that with jQuery.

    it seems so simple - I must be missing something...

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I just want to show one the content of one div if the checkbox is unchecked. If it is checked then it should show the content of the other div - I presume this is done with jquery, which is what I have tried without success

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Ok, removed the css. The content of both divs are now displayed if no photo is uploaded. The correct div is displayed if the checkbox is checked.

    But the point of the checkbox was for this div selection. The checkbox is hidden and is only checked automatically when a file is uploaded, so the "click" part of the script is useless. it would need to check the current status of the checkbox automatically

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    ahhhhhhhhhhhhhhhhhhhhhhhh

    ok.

    beginning to get it.

    well then the checkbox is kind of useless too isn't it? but even if it isn't, why not just use the code that currently checks or unchecks the checkbox to hide or show the divs?

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Code:
    $(document).ready(function() {
    	$('#file').change(function() {
        $('#imageChecked').prop('checked', true);
    	});
    });
    Here is the code that checks the checkbox if a file has been uploaded, how could I make that hide or show the div? Sorry for being a dumbass lol

  • #11
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Tried combining the 2 and doing away with checkbox, but still no luck

    Code:
    $(document).ready(function() {
    	$('#file').change(function() {
    		$("#rewards2").show();
    		$("#rewards1").hide();
    	} else {
    		$("#rewards2").hide();
    		$("#rewards1").show();	
    	
    	});
    });

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    why isn't it just
    Code:
    $('#file').change(function() {
    	$("#rewards2").hide();
    	$("#rewards1").show();
    });
    ?

  • #13
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi, tried the above

    $('#file').change(function() {
    $("#rewards2").show();
    $("#rewards1").hide();
    });


    this works if a file is actually selected, but still displayss the content of both divs if no file is selected

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    how showing the "no file uploaded" div on page load and testing for the value of the input on change?

    Code:
    $(document).ready(function() {
    	$('#file').change(function() {
    if($(this).val()!="") {
    		$("#rewards2").hide();
    		$("#rewards1").show();
    	} else {
    		$("#rewards2").show();
    		$("#rewards1").hide();	
    		} 
    	});
    });

  • #15
    New Coder
    Join Date
    Oct 2012
    Posts
    97
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi, I used the code supplied above and have the same problem. If no file is selected then in the next step, both divs are displayed. If a file is selected, then the correct div is displayed. How can I fix this?

    If it helps, my form is located here http://e-quatics.com/CareGuideSubmit.php

    If you click straight on step 6, you can see that it displays the reward options from both divs. However, if you select a file on step 5 of the form, and then view step 6, you can see that the correct div is displayed.

    I really have no clue, so please help!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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