How To Auto Hide Form Entry Based On Multi-choice Radio Button?

**Sage** · 03-05-2013, 09:53 AM

I have a form with several radio button questions.

I would like each question to disappear automatically once the radio button is clicked.

Can it be done in Javascript?

Here's the form code:

In this case I would like id="frm_field_682_container" to disappear if either of the radio button options are selected (name="item_meta[683]" id="field_683-0" or name="item_meta[682]" id="field_682-1" value="Option 2").

<code>
<div class="frm_forms with_frm_style" id="frm_form_24_container">
<form enctype="multipart/form-data" method="post" class="frm-show-form " id="form_ha2076" >

<script type="text/javascript">jQuery("head").append(unescape("%3Clink rel='stylesheet' id='frm-forms0-css' href='/beta2/wp-content/uploads/formidable/css/formidablepro.css' type='text/css' media='all' /%3E"));</script>
<h3>test</h3>
<div class="frm_form_fields">
<fieldset>
<div>
<input type="hidden" name="frm_action" value="create" />
<input type="hidden" name="form_id" value="24" />
<input type="hidden" name="form_key" value="ha2076" />
<div id="frm_field_682_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label">Test
<span class="frm_required"></span>
</label>
<div class="frm_radio"><input type="radio" name="item_meta[682]" id="field_682-0" value="Option 1" /><label for="field_682-0">Option 1</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[682]" id="field_682-1" value="Option 2" /><label for="field_682-1">Option 2</label></div>

</div>
<div id="frm_field_683_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label">test 2
<span class="frm_required"></span>
</label>
<div class="frm_radio"><input type="radio" name="item_meta[683]" id="field_683-0" value="Option 1" /><label for="field_683-0">Option 1</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[683]" id="field_683-1" value="Option 2" /><label for="field_683-1">Option 2</label></div>

</div>
<input type="hidden" name="item_key" value="" />
</div>
</fieldset>
</div>
<script type="text/javascript">
</script>

<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</code>

**JMRKER** · 03-05-2013, 05:51 PM

Yes, it can be done in JS. I would not recommend it, but the following code should do what you want.

I would not recommend it because the OP cannot change their mind if the RBtn is checked on purpose of accidently.
I would recommend at least adding a button that would restore original options at some point.

Code:

<html>
<head>
<title> Undefined </title>
</head>
<body>
<div class="frm_forms with_frm_style" id="frm_form_24_container">
<form enctype="multipart/form-data" method="post" class="frm-show-form " id="form_ha2076" >
<!-- for testing purposes:      onsubmit="alert('submit'); return false" -->

<script type="text/javascript">
 jQuery("head").append(unescape(
 "%3Clink rel='stylesheet' id='frm-forms0-css' href='/beta2/wp-content/uploads/formidable/css/formidablepro.css' type='text/css' media='all' /%3E"));

function hide(IDS) {
  document.getElementById(IDS).style.display = 'none';
}
</script>
<h3>test</h3>
<div class="frm_form_fields">

<fieldset>
<div>
 <input type="hidden" name="frm_action" value="create" />
 <input type="hidden" name="form_id" value="24" />
 <input type="hidden" name="form_key" value="ha2076" />

 <div id="frm_field_682_container" class="frm_form_field form-field frm_top_container">
  <label class="frm_primary_label">Test <span class="frm_required"></span> </label>
  <div class="frm_radio"><input type="radio" name="item_meta[682]" id="field_682-0" value="Option 1"
       onclick="hide('frm_field_682_container')" />
   <label for="field_682-0">Option 1</label></div>
  <div class="frm_radio"><input type="radio" name="item_meta[682]" id="field_682-1" value="Option 2" 
       onclick="hide('frm_field_682_container')" />
   <label for="field_682-1">Option 2</label></div>
 </div>

 <div id="frm_field_683_container" class="frm_form_field form-field frm_top_container">
  <label class="frm_primary_label">test 2 <span class="frm_required"></span> </label>
  <div class="frm_radio"><input type="radio" name="item_meta[683]" id="field_683-0" value="Option 1" />
   <label for="field_683-0">Option 1</label></div>
  <div class="frm_radio"><input type="radio" name="item_meta[683]" id="field_683-1" value="Option 2" />
   <label for="field_683-1">Option 2</label></div>
 </div>
 <input type="hidden" name="item_key" value="" />
</div>
</fieldset>

</div>
<script type="text/javascript">
</script>

<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</body>
</html>

BTW: You should enclose your code between [ code] and [ /code] tags (without the spaces)
not the <code> and </code> you tried to use.

**Sage** · 03-05-2013, 09:11 PM

Wow, thanks for the code.

Before I wasted anyone's time though, I should have clarified that this form is generated by the FormidablePro wordpress plugin.

I don't have the luxury of editing the form by adding onclick functions. (I would lose the backend FormidablePro analytics).

Can it be down using javascript and CSS, using .css('visibility','hidden')? Something like hiding id="frm_field_682_container", with an if/then statement, if input of item_meta[682] does not = "select" then hide css?

...and doing it without altering the form itself?

P.S. I already asked the FormidablePro help desk. It's beyond their scope

**JMRKER** · 03-06-2013, 07:22 AM

I don't use wordpress so I'm not sure what can and cannot be done there.

Unless you can change the form at some time, I think it would be hard to change the actions of the form.
Even changing the css state from visibility to hidden involves some kind of event occuring, in this case a change to the radio button status.

Perhaps some other forum members have come across this problem and can give you the answer you desire.

**Sage** · 03-06-2013, 11:18 AM

With WordPress head injection plugins I can inject any code into the <head> tag.

I can add any code to the <body> tag too. PHP can be added too, but with a separate plugin. Javascript is a simpler solution if possible.

I just can't change the form code itself. I need to do it using CSS and Javascript outside the form. I think it can be done using visibility, hidden class with CSS and javascript. Just don't know the specific code.

Here's how they are doing that to show/hid the submit button on the form (I can imagine something like this could be applied here):

Code:

(Change 5 to the ID of your form. Change 25, 26, and 27 to the IDs of your form fields and add the additional fields to check.)

<script type="text/javascript">
jQuery(document).ready(function($){
$("#frm_form_5_container input[type=submit]").attr('disabled','disabled'); //disable submit button by default

$("input[name='item_meta[25]'], input[name='item_meta[26]'], input[name='item_meta[27]']").change(function(){ 
var submit = true;
if($("input[name='item_meta[25]']:checked").val() == 'No' ||
$("input[name='item_meta[26]']:checked").val() == 'No' ||

$("input[name='item_meta[27]']:checked").val() == 'No')

 submit = false;

if(submit){$("#frm_form_5_container input[type=submit]").removeAttr('disabled'); }
else{$("#frm_form_5_container input[type=submit]").attr('disabled','disabled'); }

});
});
</script>

Thread: How To Auto Hide Form Entry Based On Multi-choice Radio Button?

Thread Tools

Display

How To Auto Hide Form Entry Based On Multi-choice Radio Button?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions