Tell us what you are trying to do?
I am creating a form where the user can choose a radio option whether they want a "Basic" or "Advanced" plan. If they choose "Basic" I conditionally hide the 4 following questions. If they choose "Advanced", I show the 4 following questions.
The 4 questions are radio options. I need the default radio option to be chosen if they choose "Basic"... The problem is that I want them to edit the post as well... If they had chosen "Advanced" while creating the post and selected one of the options that was not the default option, and then return to edit the post and select "Basic" (which hides the 4 following questions), the original option they chose while creating the post is still chosen... Not the default option.
Is there a way to automatically select a specific radio option if they choose "Basic" and make the other options read-only?
Hopefully, that makes sense.
Is there any documentation that you are following?
The conditionals works only in terms of hiding and displaying the fields, however the field values that are selected would always stay the same unless it is adjusted either manually or using JavaScript
The effective way is to make use of some custom JavaScript snippets so that whenever the user marks the “Basic” option as selected you can set default question fields under Advanced to be checked or in whatever way you like to manage them.
The sample JS snippet would be like
$('input:radio[name=field_name]').change(function() {
if (this.value == 'Basic') {
// Select the default value for the questions field
$('input:radio[name="question_filed"][value="enter_default_value"]').prop('checked', true);
}
});
field_name = Field name of Basic and Advanced radio field
question_filed = Filed name of the Question field
enter_default_value = Default value for the questions
$('input:radio[name=crowd-level]').change(function() {
if (this.value == '1') {
// Select the default value for the questions field
$('input:radio[name="display-contributions"][value="3"]').prop('checked', true);
}
});
It's not working, but I assumed that's bc I have something wrong above.
Probably due to JQuery conflict , Please update the code with the one below
(function($) {
$('input:radio[name="crowd-level"]').change(function() {
if (this.value == '1') {
// Select the default value for the questions field
$('input:radio[name="display-contributions"][value="3"]').prop('checked', true);
}
});
})( jQuery );
If you are still having issues, Please check the browser console for errors and you can share the url where the issue can be seen so that i can take a closer look. I am enabling private reply just in case if you want to share access to the site.
I ended adding this code and worked for selecting the correct radio options...
(function($) {
$('input:radio[name="wpcf-crowd-level"]').change(function() {
if (this.value == '1') {
// Select the default value for the questions field
$('input:radio[name="wpcf-display-contributions"][value="3"]').prop('checked', true);
$('input:radio[name="wpcf-crowd-privacy"][value="1"]').prop('checked', true);
$('input:radio[name="wpcf-notifications"][value="1"]').prop('checked', true);
}
});
})( jQuery );
But when I also conditionally hide these fields so they can't select another option manually, it doesn't save the checked radios that were set in the js. Is there a way to simply hide or disable these fields along with the code above to be sure they are can't manually select another option AND the js selection is saved?
Sorry, I am failing to understand what not going through, It would be better if i can see that in action may be a screenshot or a video recording using loom.com would be very much helpful. If you have a public URL of the page where the issue can be seen that should also help in a better way.
In this video you can see that even though "Basic" does default the other questions to the first selection, I am still able to manually select another option on those questions, which I want to disable: hidden link
So, I implemented conditional to hide those fields, but if you click "Basic" then save it, it doesn't save the default selection that is set in the javascript... It just saves the last selection before the fields were hidden. You can see that in this video: hidden link
I just want to make sure if the user selects "Basic", they can't manually change the other questions to something else other than the defaults set by the javascript.
I made some tests and here is whats happening with conditions fields in forms.
- The Conditionals form fields are only processed in the backend if they are visible or enabled in front end,
- In your case after the user updated with Advanced and comes back to change it to basic at this step the entire "Display Contribution to users" fields will not be processed by the form as they are disabled and the associated wpcf-display-contributions field is skipped in the backed.
- Even though the values are adjusted using JS since the field is completely skipped on processing you always see the value that is already select when the fields are visible.
Solution
The possible solution is to add a validation in the backend as well in additions to the JS snippets,
In this case I would make use of the hook cred_before_save_data to process the form data
add_action('cred_before_save_data', 'my_before_save_data_action',10,1);
function my_before_save_data_action($form_data)
{
// Replace the id with the Form id
if ($form_data['id']==12)
{
// check if the Crowd level is Basic
if ( isset( $_POST['wpcf-crowd-level'] ) && $_POST['wpcf-crowd-level'] == '1' )
{
// Set Display Contributes fields to 3 which is default,
$_POST['wpcf-display-contributions'] = 3;
}
}
}
please change the form id with the appropriate form id from your site.
