Show/hide fields

Resolved

Bos

(@hermanbos)

Bunny Bomb made a very good solution for show/hidding of 1 field. I try to use this function more times, however the second hiding doesnot show up?
The first hidefunction operates perfect, I added e second hide function (and i am intending to create more hidefunctions). But the field doesnot show up?
See the jQuery code and the contactform code here below. The second show/hide function concerns hide3. What i am doing wrong?

/*! jQuery script to hide certain form fields */
$(document).ready(function() {
	//Hide the field initially
	$("#hide1").hide();
  $("#hide2").hide();
	$("#hide3").hide();
	//First hidefunction: Laat de tekst zien, waneer resp "ik kom niet", "mijn partner komt niet" gekozen wordt.
	$('#wieniet').change(function() {
		if ($("#wieniet").val() == "ik kom niet") {
			$("#hide1").show();
		}
		else {
			$("#hide1").hide();
			}
			if ($("#wieniet").val() == "mijn partner komt niet") {
			$("#hide2").show();
		}
		else {
			$("#hide2").hide();
			}
	});
//Second hidefunction:Laat de tekst zien, waneer resp "graag informatie over mogelijke invaller", "ik zorg zelf voor een invaller" gekozen wordt.
	$('#intinv').change(function() {
		if ($("#intinv").val() == "ja") {
			$("#hide3").show();
		}
		else {
			$("#hide3").hide();
			}
  });
});

Contact Form 7 code:

<table>
<tr>

<td><label for="wieniet">Wie komt er niet?*</label></td>
<td>[select* wieniet 20 id:wieniet include_blank class:contactForm "ik kom niet" "mijn partner komt niet" "mijn partner en ik komen niet"]</td>
<tr>
<td><div class="hide" id="hide1">
        <label for="telp">Telefoonnr. partner*</label>
        [text* telp 11/11 id:telp class:contactForm]

 <label for="intinv">Interesse om met invaller te spelen?*</label>
[select* intinv include_blank "ja" "nee"]
</div>

<div class="hide" id="hide2">
          <label for="mtel">Mijn telefoonnr.*</label>
          [text* mtel 11/11 id:mtel class:contactForm]
  <label for="intinv">Interesse om met invaller te spelen?*</label>
[select* intinv include_blank "ja" "nee"]
</div>
</tr>
<tr>
<td>
<div class="hide" id="hide3">
  <label for="zinv">Indien er interesse is om met een invaller te spelen:*</label>
[select* zinv  id:intinv include_blank class:contactForm "graag informatie over mogelijke invaller" "ik zorg zelf voor een invaller"]
</div>
</td>
</table>

http://wordpress.org/extend/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter Bos
(@hermanbos)

13 years, 6 months ago

Nobody did help me, so after a long time of trial and error I solved this problem myself.
Every hiding that has to fullfill to the same condition you have to write an if/else statement more with another hide number.
Every other hide condition you have to write a new JQuery script. See step 3 of the work of BunnyBomb: (http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=39).
You have to give this script another filename. For instance hidefieldsScript2.js.
Add this file directly into the “js” folder for your theme (example: “./wordpress/wp-content/themes/your-theme-name/js/”.
Don’t forget step 5 by adding “<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript2.js”></script> to the header.php
Now you are able to expand the contact form with extra hidings and new conditions for hiding.
It works great!
Marinko
(@weberteam)

13 years, 1 month ago
Hi HermanBos,

I have a similar problem using BunnyBomb’s solution but with some customization according my needs.
I have to make a form with a dropdown field such as this:

— (blank)
One kid
Two kids
Three kids

And than, if someone select “One kid”, form will show up just one text field to be filed with kids age.
If someone select “Two kids”, form will show up two text fields so the user can input ages for both kids separately.
If someone select “Three kids”, form will show up three text fields so user can also input their ages separately (and so on if needed).

Now, my code looks like this:
```
/*! jQuery script to hide certain form fields */

$(document).ready(function() {

	//Hide the field initially
	$("#onekid").hide();
	$("#twokids").hide();
	$("#threekids").hide();

	$('#awesome').change(function() {
		if ($("#awesome").val() == "1") {
			$("#onekid").show();
			$("#twokids").hide();
			$("#threekids").hide();
		}
	});

	$('#awesome').change(function() {
		if ($("#awesome").val() == "2") {
			$("#onekid").show();
			$("#twokids").show();
			$("#threekids").hide();
		}
	});

	$('#awesome').change(function() {
		if ($("#awesome").val() == "3") {
			$("#onekid").show();
			$("#twokids").show();
			$("#threekids").show();
		}
	});
});
```
and it works except when I click some option from dropdown (eg. Three kids), and than click blank again, it wont clear empty fields!

I’ve tried about a 50 different solutions but none with a complete success.

Any ideas? Thanks…
Thread Starter Bos
(@hermanbos)

13 years, 1 month ago

Into my opninion you should define 3 hidings in your js folder:
hidefieldsScript1.js>>age 1 kid
hidefieldsScript2.js>> age 1 kid and age 2 kid
hidefieldsScript3.js>>age 1 kid, age 2 kid and age 3 kid
Marinko
(@weberteam)

13 years, 1 month ago
Thank you HermanBos for a quick answer.
It looks like I’ve found a solution to keep it all in one .js file 🙂

Here is the code:
```
/*! jQuery script to hide certain form fields */

$(document).ready(function() {

	//Hide the field initially
	$("#onekid").hide();
	$("#twokids").hide();
	$("#threekids").hide();

	//Show first hidden field
	$('#awesome').change(function() {
		if ($("#awesome").val() == "1") {
			$("#onekid").show();
			$("#twokids").hide();
			$("#threekids").hide();
		}
		else {
			$("#onekid").hide();
		}
	});

	//Show first & second hidden field
	$('#awesome').change(function() {
		if ($("#awesome").val() == "2") {
			$("#onekid").show();
			$("#twokids").show();
			$("#threekids").hide();
		}
		else {
			$("#twokids").hide();
		}
	});

	//Show all three hidden fields
	$('#awesome').change(function() {
		if ($("#awesome").val() == "3") {
			$("#onekid").show();
			$("#twokids").show();
			$("#threekids").show();
		}
		else {
			$("#threekids").hide();
		}
	});
});
```
So far, it works in Firefox, IE, Opera, but it doesn’t completely work in Chrome (it doesn’t hide fields after opening). I must mention that I didn’t use Bunny Bomb’s CSS at all.

If I make it completely cross-browser compatible, I’ll post it here.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Show/hide fields’ is closed to new replies.