How to reset content of a <div> block when radio button state is changed?

JavaScript
1

Hi there
this is my jsfiddle

My Question is suppose I type something in div block and then I click on “No” then that block disappaer.
But When I click on “yes” again all values that are there are still on the InputFields.

My requirement is I am expecting that those values should be clear when I switch to field “No” in my case

How do I acheive this?

Thanks

2

You would need JS to to do that (or add a reset button perhaps). CSS won’t be able to do this alone.

You can hide and show things but you can’t change their values with css.

There are some jquery plugins that do similar but you probably don’t need something as complex for just a few inputs.

3

I like a good challenge. This is based off your reset idea.

You’d obviously need a bit more styling to this but it’s a rough demo.

I have to go shower for work otherwise I’d keep styling it to make it more similar.
Perhaps I could add some CSS in there to perhaps check if the “yes” ISN’T checked and then style the “no” accordingly. I’ll play with this when I get to work…

4

It’s a damn shame the not() pseudo class doesn’t support pseudo states as arguments. E.g.

input[type="reset"]:not(#yes:checked)
{
  /*crap here*/
}

This could have gone so far…

5

Yes,that’s what I meant but I didn’t think to style the reset button as a radio :smile:. The main problem with that approach is that the whole form gets reset so if there is other data being presented then you would need separate forms for each.

6

Yeah the whole approach needs to be scrapped anyway though since :not() doesn’t allow pseudo states :frowning: . Such a buzzkill.

Just thought I’d have fun with it. I never get to experiment these days.

7

Yes, these are the types of things I like to play with also :smile:

8
1 Like
9

Nice :smile:

1 Like
10

You made a checked state for the reset-button, just as a radio button, nice. :slight_smile:

Played with your demo trying to make it look like a radio button too. Couldn’t get closer than this in the setup, sure crossbrowser differs anyway. http://jsfiddle.net/b0hbk495/30/

1 Like
11

I didn’t really even try to style it since it’s still a b**** to style form elements (kinda sad really) but just thought I’d update you all :slight_smile: .

12

If I am using JQuery to show and hide a block

Is there any better solution using JS

Here is my code

13

You don;t seem to be using jquery to hide anything there so can you clarify the question? You are still using Ryan’s CSS demo.

14

@PaulOB

My Mistake
Here is my jquery code

for my post reference

15

If you are still talking about removing the values from the inputs then you could add this ( $(“#highSchool input[type=text]”).val(‘’); ) to the js.

$("input[name='userData']").on("click",function(){
		if(this.value==="yes"){
			$("#highSchool").css("display","block");
			
		}
		else{
			$("#highSchool").css("display","none");
            $("#highSchool input[type=text]").val('');    
		}
	});
16

@PaulOB
Thanks

17

@PaulOB

Suppose I have a “select” tag also in my div block
And after closing tag I want that should also be in “Select Course”
not indivitual course that are selected

How do I acheive this

Thanks

18

Try something like this.

$("input[name='userData']").on("click",function(){
		if(this.value==="yes"){
			$("#highSchool").css("display","block");
			
		}
		else{
		$("#highSchool").css("display","none");
            $("#highSchool input[type=text]").val('');
            $("#highSchool select option:eq(0)").attr("selected", "selected");
		}
	});
19

Not working

20

This seems to be working:

  1. Choose Yes
  2. Type Paul on the first line
  3. Select Pakistand
  4. Choose No
  5. Choose Yes again

All fields are empty, and the select says Select Course once again.
That seems to be working fine.

What about it is not working for you?