This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.
In a future version conditional logic on the submit button will be built into the plugin, for now it requires custom JavaScript coding.
Show the submit button depending on a Dropdown Menu choice
Add an HTML element to the form (from the “More” tab) and enter this content:
1 2 3456 78 9 10 11 | <script> jQuery(function ($) { $('.iphorm_1_1').change(function () { if ($(this).val() == 'Option 2') { $('.iphorm-submit-wrap-1').show(); } else { $('.iphorm-submit-wrap-1').hide(); } }).change(); }); </script> |
<script>
jQuery(function ($) {
$('.iphorm_1_1').change(function () {
if ($(this).val() == 'Option 2') {
$('.iphorm-submit-wrap-1').show();
} else {
$('.iphorm-submit-wrap-1').hide();
}
}).change();
});
</script>- On line 3, change
iphorm_1_1to the Dropdown Menu unique ID - On line 4, change
Option 2to the value of the Dropdown Menu you want to show the submit button for - On lines 5 and 7, change the number
1to the form ID
Show the submit button when a value is entered into a Text Input field (Single Line Text / Paragraph Text / Email Address)
Add an HTML element to the form (from the “More” tab) and enter this content:
1 2 34 56 78 9 10 11 | <script> jQuery(function ($) { $('.iphorm_1_1').bind('keyup blur', function () { if ($(this).val() != '') { $('.iphorm-submit-wrap-1').show(); } else { $('.iphorm-submit-wrap-1').hide(); } }).blur(); }); </script> |
<script>
jQuery(function ($) {
$('.iphorm_1_1').bind('keyup blur', function () {
if ($(this).val() != '') {
$('.iphorm-submit-wrap-1').show();
} else {
$('.iphorm-submit-wrap-1').hide();
}
}).blur();
});
</script>- On line 3, change
iphorm_1_1to the Text Input unique ID - On lines 5 and 7, change the number
1to the form ID
Show the submit button when a single Checkbox is ticked
Add an HTML element to the form (from the “More” tab) and enter this content:
1 2 3 4 5 67 89 10 11 1213 14 15 16 | <script> jQuery(function ($) { function checkConditions() { if ($(this).is(':checked')) { $('.iphorm-submit-wrap-1').show(); } else { $('.iphorm-submit-wrap-1').hide(); } } var $checkbox = $('.iphorm_1_1'); $checkbox.click(checkConditions); checkConditions.call($checkbox[0]); }); </script> |
<script>
jQuery(function ($) {
function checkConditions()
{
if ($(this).is(':checked')) {
$('.iphorm-submit-wrap-1').show();
} else {
$('.iphorm-submit-wrap-1').hide();
}
}
var $checkbox = $('.iphorm_1_1');
$checkbox.click(checkConditions);
checkConditions.call($checkbox[0]);
});
</script>- On lines 6 and 8, change the number
1to the form ID - On line 12, change
iphorm_1_1to the Checkbox unique ID
Show the submit button when a Multiple Choice (Radio Button) is checked
Add an HTML element to the form (from the “More” tab) and enter this content:
1 2 34 5 6 789 1011 12 13 14 15 16 17 | <script> jQuery(function ($) { var $choices = $('.iphorm_1_1'); function checkConditions() { if ($choices.filter(':checked').val() == 'Yes') { $('.iphorm-submit-wrap-1').show(); } else { $('.iphorm-submit-wrap-1').hide(); } } $choices.click(checkConditions); checkConditions(); }); </script> |
<script>
jQuery(function ($) {
var $choices = $('.iphorm_1_1');
function checkConditions()
{
if ($choices.filter(':checked').val() == 'Yes') {
$('.iphorm-submit-wrap-1').show();
} else {
$('.iphorm-submit-wrap-1').hide();
}
}
$choices.click(checkConditions);
checkConditions();
});
</script>