Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

Clearing Form Fields with JavaScript

Labels

This Discussion is public

Notifications

I thought I'd share a couple of scripts that do some form field clearing based on selections from other form fields. You can throw these in your Form Settings / Customize HTML / After Fields section, or in your header or footer.

 

Radio Clears Checkbox

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[101]"]').change(function(){
$('input[name="item_meta[635][]"]').prop('checked',false);
});
})
</script>

This one clears a checkbox if a radio button is changed. Change [101] to the field ID of your radio button. Change [635][] to the field ID of the checkbox you want to uncheck when the radio button is changed. Note the field ID of the checkbox is [635][]. That's tricky. In the form builder, it just says [635], but I couldn't get it to work. Then I checked the actual HTML output and found that the field ID was actually [635][] in the HTML. So watch out for that.

 

Radio Clears Radio

This next one clears a radio button field if another radio button field is changed. It's exactly the same code as clearing a checkbox. Just change [180] to the field ID of the radio button that will clear the other radio button when changed, and change [189] to the field ID of the radio button that will be cleared.

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[189]"]').prop('checked',false);
});
})
</script>

 

Radio Resets Dropdown

This next one will reset a dropdown menu to null when a radio button is changed, where [180] is the radio button and [181] is the dropdown menu that will be reset:

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('select[name="item_meta[181]"]').val("");
});
})
</script>

 

Specific Radio Value Resets Dropdown / Specific Radio Value Changes Dropdown to Specific Value

This one is just a bit more complicated. It will reset a dropdown menu to null when a radio button is changed to a specific value. The dropdown menu will not reset if the radio button is changed to just any value. The code specifies a specific value that alone will trigger the reset of the dropdown menu. Change [101] to the field ID of the radio button one of whose values will reset the dropdown. Change [103] to the field ID of the dropdown menu you want to reset. And change the '$25' to whatever the actual value of the button option is that you want to use to reset the dropdown. Make sure you keep your value wrapped in those single-quotes.

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="radio"][name="item_meta[101]"]').change(
function () {
var valCheck = this.value === '$25';
$('select[name="item_meta[103]"]').val(function () {
return valCheck ? 'null' : this.value;
});
});
})
</script>

You can also change 'null' to a specific value in the dropdown menu; that way rather than resetting the dropdown to null, the specific radio button option (here '$25') will change the value of the dropdown to a specific value (e.g., 'Horseradish').

 

Specific Radio Value Hides Custom HTML Field

This last one can obviously be done using conditional logic in the form builder, but I had several Custom HTML fields that were showing based on conditional logic, so I couldn't use the conditional logic feature to hide it based on another event. So I took half of the code from the last bit of code, and then looked at the HTML output of the conditional logic for that Custom HTML field, and reversed it from 'show' to 'hide'. This Custom HTML field is actually also dependent on another field, so the code below represents that dependency, and I'm not sure whether I had to reproduce that dependency, but, hey, it works like a charm anyway.

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="radio"][name="item_meta[101]"]').change(
function () {
var valCheck = this.value === '$25';
$('#frm_field_653_container').hide();frmCheckDependent($('#field_3389r').val(),106);
});
})
</script>

Here, [101] is the radio button field ID, and '$25' is the specific radio button value that will hide the custom HTML field when selected. '#frm_field_653_container' is the field ID (well 653 is) of the Custom HTML field that I want to hide, and 3389r is the field KEY of the dropdown menu upon which this custom HTML field is dependent. Also, 106 is the field ID of that parent dropdown menu.

What I use this for: I have five dropdowns that have hundreds of options each, and within those options are Sub-Headers that we don't want people selecting. So I created custom HTML fields that give a "Selection Error Message," telling them they can't pick that, and that message shows if they select any one of 16 different options on the dropdown menu. Thus, my conditional logic was taken up by those sixteen "show ifs." So I had to create this code to do a "hide if." Why I had to do that is complicated. The user could eliminate the dropdown that gave them the error message altogether by selecting fewer categories on the radio button that shows and hides the five dropdown menus, but if they did that, the error message would remain. So I had to come up with a way to hide the error message based on the radio button selection as well, which is what the above code does. Anyway, point is, there's lots of potential purposes for this kind of thing, like dealing with the fallout of having conditional field within conditional field ad infinitum.

 

Using More than One

If you're going to use a bunch of these, then to make it a little more compact, only use:

<script type="text/javascript">
jQuery(document).ready(function($){

once at the top, and only use:

})
</script>

once at the bottom. Everything else in between those four lines you can just paste one after the other to your heart's content.

 

Hope that helps someone.

Thanks for sharing this...I'll add a link to this topic on our javascript examples page found here: https://formidableforms.com/knowledgebase/javascript-examples/

Cool. Thanks, Steve.

Agreed - thanks worldfest. Saw this yesterday and already put it to use. Totally helpful and you clearly put a lot of time into this post.

Thanks, essaysnark. Glad you found it useful!

This is fantastic. Can't wait to use it

Thanks

Thank you!

Thanks!

Also, I was trying to figure out how a specific checkbox option on deselect clears another checkbox combo. This appears to work so far:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[701][]"][value="English"]').change(function(){
$('input[name="item_meta[180][]"]').prop('checked',false);
});
})
</script>

I have tried these examples in one of my forms--substituting my own field numbers and I get no results.When I view the source, I see my script, but no changes to my fields.

What could I be missing?

Hi, I am trying to clear a user entered number field (or alternatively reset a read-only calculated field to zero) if a specific checkbox option is unchecked. Here's what I have but it is not working.
<script type="text/javascript">
jQuery(document).ready(function($){
$(‘input[name=”item_meta[176][]”]’).change(function(){
var val1 = $("#field_gejkhf-0").val();
var val2 = $("#field_gejkhf-1").val();
var val3 = $("#field_gejkhf-2").val();
var val4 = $("#field_gejkhf-3").val();
var val5 = $("#field_gejkhf-4").val();

if (val1 == null )
{$("#field_hacessyrqty").val('');
$( "#field_hacessyrqty" ).change();
}

if (val2 == null )
{$("#field_hacesiceqty").val('');
$( "#field_hacesiceqty" ).change();
}

if (val3 == null)
{$("#field_hacesashqty").val('');
$( "#field_hacesashqty" ).change();
}

if (val4 == null)
{$("#field_hacescinqty").val('');
$( "#field_hacescinqty" ).change();
}

if (val5 == null)
{$("#field_haceslavqty").val('');
$( "#field_haceslavqty" ).change();
}
});
});
</script>
 

Edited: jQuery(document).ready(function($)
{
$('body').on('change', 'input[name="item_meta[176][]"]', function()
{
if(!$("#field_gejkhf-0").is(':checked')) $("#field_hacessyrqty").val('').trigger('change');
if(!$("#field_gejkhf-1").is(':checked')) $("#field_hacesiceqty").val('').trigger('change');
if(!$("#field_gejkhf-2").is(':checked')) $("#field_hacesashqty").val('').trigger('change');
if(!$("#field_gejkhf-3").is(':checked')) $("#field_hacescinqty").val('').trigger('change');
if(!$("#field_gejkhf-4").is(':checked')) $("#field_haceslavqty").val('').trigger('change');
});
});

wow thanks!

Using that code resets all of the fields if only one checkbox is unchecked. To see what I mean here is the form:http://shopemilime.com/quick-order-form/

Select Aces, then hat, then the colors, then enter quanities. Say you change your mind on one of the colors and uncheck it - it resets all of your quantities of all colors to zero.

We're close! :D

Did you copy it from the email or from here? My original post was incorrect.

Yeah, you copied the original. Copy and paste it again, it'll work.

Thanks!

I re-pasted and it works if only one checkbox option is chosen. Which I can probably work with that if I need to!

If multiple checkboxes are chosen, then it clears the field like it should but to all of the fields instead of the one it pertains to.

No, you copied the original again. Copy the one from this page.

In the original I had #field_gejkhf-0 for all five checkboxes. It should be
#field_gejkhf-0
#field_gejkhf-1
#field_gejkhf-2
#field_gejkhf-3
#field_gejkhf-4

I corrected it above.

Edited jQuery(document).ready(function($){
$('body').on('change', 'input[name="item_meta[176][]"]', function(){
if(!$("#field_gejkhf-0").is(':checked')) $("#field_hacessyrqty").val('').trigger('change');
if(!$("#field_gejkhf-1").is(':checked')) $("#field_hacesiceqty").val('').trigger('change');
if(!$("#field_gejkhf-2").is(':checked')) $("#field_hacesashqty").val('').trigger('change');
if(!$("#field_gejkhf-3").is(':checked')) $("#field_hacescinqty").val('').trigger('change');
if(!$("#field_gejkhf-4").is(':checked')) $("#field_haceslavqty").val('').trigger('change');
});
});

Here is verbatim what I have (different key - dysmax) and it still clears them all instead of just one.

<script type="text/javascript">
jQuery(document).ready(function($){

$('body').on('change', 'input[name="item_meta[176][]"]', function(){

if(!$("#field_dysmax-0").is('checked')) $("#field_hacessyrqty").val('').trigger('change');

if(!$("#field_dysmax-1").is('checked')) $("#field_hacesiceqty").val('').trigger('change');

if(!$("#field_dysmax-2").is('checked')) $("#field_hacesashqty").val('').trigger('change');

if(!$("#field_dysmax-3").is('checked')) $("#field_hacescinqty").val('').trigger('change');

if(!$("#field_dysmax-4").is('checked')) $("#field_haceslavqty").val('').trigger('change');

});
});
</script>

To test what I mean, check multiple checkboxes of colors under 'Aces Hat' and then enter quantities. Then go and uncheck one of those colors, and it clears all quanitties.

Screen recording attached :)

Yeah, I'm already looking at it on your site. Strange. Give me a minute.

Ah, my bad. Silly me. Try this (adding a colon before 'checked')

jQuery(document).ready(function($)
{
$('body').on('change', 'input[name="item_meta[176][]"]', function()
{
if(!$("#field_gejkhf-0").is(':checked')) $("#field_hacessyrqty").val('').trigger('change');
if(!$("#field_gejkhf-1").is(':checked')) $("#field_hacesiceqty").val('').trigger('change');
if(!$("#field_gejkhf-2").is(':checked')) $("#field_hacesashqty").val('').trigger('change');
if(!$("#field_gejkhf-3").is(':checked')) $("#field_hacescinqty").val('').trigger('change');
if(!$("#field_gejkhf-4").is(':checked')) $("#field_haceslavqty").val('').trigger('change');
});
});

IT WOOOOORRRKSSS!!! :D

awesome. thank you so much.

Good deal.

Thank you so much for this Tutorial. Very helpful, especially the annotation about  "field ID was actually [635][]" for checkbox is very useful!!!

AWESOME!!!! You are my hero!!! I have been looking to do this for ages and it works perfectly.

I wanted to to use the "Radio Clears Radio" codes together with the "Specific Radio Value Hides Custom HTML Field" code and had the problem that my HTML field only disappeared for my first radio button.

In the 'Specific Radio Value Hides Custom HTML Field' code, I just removed field Key and dropdown menu:

frmCheckDependent($('#field_3389r').val(),106);

and replaced

var valCheck = this.value === '$25';

with

var valCheck;

to get:

<script type="text/javascript">
jQuery(document).ready(function($){

$('input[type="radio"][name="item_meta[85]"]').change(
function () {
var valCheck;
$('#frm_field_115_container').hide();
});

})
</script>

 

Discussion closed.