Hello, is there a way to add a RESET button at the bottom of a User Form, which will clear all field values inside that form and reset them to null? This is especially important when there are Radio Buttons since once you choose one and submit, you can't go back to no selection.
EXAMPLE USER FORM:
[creduserform]
<div class="form-group">
<label>Field1</label>
[cred_field field="1-1-field-1" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group">
<label>Field2</label>
[cred_field field="1-1-field-2" force_type="field" class="form-control" output="bootstrap"]
</div>
[cred_field field="form_submit" output="bootstrap" value="Submit" class="btn btn-primary btn-lg"]
[/creduserform]
Hello,
You can use HTML code to setup the reset button, and put it into the user form for example:
<button type="reset" value="Reset">Reset</button>
More help:
hidden link
Thanks, but I don't understand where to add this code for the reset button.
I want to reset the data for a Toolset CRED form (see code above).
To display the form on a page, I'm using the following Toolset shortcode:
[cred_user_form form='test-form']
I tried adding your above button reset code in 4 different places, but none of them work:
1. Inside the form code, right before the [/creduserform] end tag.
2. Outside the form code, right after the [/creduserform] end tag.
3. Inside the shortcode on the webpage:
[cred_user_form form='test-form' <button type="reset" value="Reset">Reset</button>]
4. Outside the shortcode on the webpage:
[cred_user_form form='test-undesired-trait']
<button type="reset" value="Reset">Reset</button>
RESULTS
1, 2, 4: Reset button is visible, but doesn't do anything when I click it. The form's field value stays the same as before I clicked it.
3. There is no visible Reset button.
Is there a different place I'm supposed to insert this Reset Button code?
Do I need to somehow associate the button with the specific Toolset form I'm using? If so, how?
Thanks!
You need to put it into form content, within shortcode [creduserform] ...[/creduserform],
See below test site:
hidden link
User form here:
hidden link
username/password: xgren/111111
Hi, thanks but this only works if the form setting says "Create new user." When I change it to "Edit existing user" it fails to work (I click the Reset button and nothing happens).
Because my form is not intended to be a user registration form (my users are already logged in), I only need to "edit" certain fields, even if the user has not seen these specific fields yet.
Also, if I click "Submit" on the test form, the field values disappear. However, on my form I want for the values that the user enters to remain visible after I click submit (this part does work on my form).
Hi again... I just did a few more tests. The "create" vs "edit" user selection was not the problem.
Hitting the RESET button only seems to work when the user has entered something but has NOT yet hit the SUBMIT button. Once they hit SUBMIT, the data is in there and the Reset button has no effect.
There is another way to get it to work again - IF it's a certain type of field such as a text field. If the user has already submitted some text, then deletes out their text and resubmits the blank, then they type in something new and hit Reset (without yet resubmitting), then the Reset button does work again.
However...
In my form, I need for the user to be able to cancel out (reset) the value they have already submitted. This isn't a problem for most fields because they can delete what they've entered and resubmit as in the above example, but I don't need a Reset button to do that.
However, this is not the case for Radio button fields. Once they select and submit their choice, they can't unselect it. And if they don't want to select any of the alternatives but instead want to have a "null" value, they really need a Reset button.
Is there a way to achieve this goal for Radio button fields?
There is a misunderstanding. the HTML reset button is for resetting form status to initial status when you load the form, so it is expected result:
Once they hit SUBMIT, the data is in there and the Reset button has no effect.
See the document I mentioned above:
localhost/wordpress/wp-admin/post.php
reset The button is a reset button (resets the form-data to its initial values)
For the new question:
And if they don't want to select any of the alternatives but instead want to have a "null" value, they really need a Reset button.
You can use JS codes to remove the radio field attribute "checked", for example, when user click the reset button, trigger a JS function:
hidden link
in the JS function, remove the radio field attribute "checked", see similar thread:
https://stackoverflow.com/questions/977137/how-to-reset-radiobuttons-in-jquery-so-that-none-is-checked
For your reference
Hi, I'm still having trouble with this as I'm not a developer, but will persist in working through the links you sent me.
Meanwhile I have a bigger version of this question... is there a way to reset all of the user fields to null within a particular Toolset User Field Group?
I need this function to be available at least on the back-end, but ideally on the front-end as well so that users have control over their own data.
Thanks!
As you can see, there isn't such kind of feature within Types plugin or Form plugin, please try to setup the custom JS codes, if you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and form URL, which field group you are going to reset, I need to test and debug in a live website. thanks
I have done below modification in your website:
1) Edit the custom field group "User Fields 1.1"
hidden link
edit the field "1-1-unhelpful-thought", setup the value for each option:
1, 2, ,3
2) Edit the Toolset user form "1-1-unhelpful-thought"
hidden link
in section "Form content", add a clear button:
<button type="reset" value="reset" id="clear">Clear</button>
3) In JS editor, add below codes:
(function( $ ) {
// javascript code here. i.e.: $(document).ready( function(){} );
$('#clear').click(function(e){
$('input[type="radio"], input[type="checkbox"]','#cred_user_form_1940_1').removeAttr('checked'); // radio and checkboxes
$('select option','#cred_user_form_1940_1').removeAttr('selected'); // select
});
})(jQuery);
Please test again, check if it is what you need, if you are going to apply this codes to other Toolset form, you will need to change 1940 to that form's ID
Wow, this totally works! Luo, thank you SO MUCH for your help on this!!!
I'd love a follow-up...
TEXT FIELDS
I also need to clear single line and multi line text fields... I attempted to do this myself, but don't know the correct way to refer to them. I've included these two additional fields at the end of the form using the same links that I sent previously. Feel free to edit on my website directly if you prefer.
ADDED FIELDS
1-1-notice-1 (single line text)
1-1-mirror1-hopes (textarea)
FORM CODE
[creduserform]
<div class="form-group">
<label>test-radio</label>
[cred_field field="1-1-unhelpful-thought" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group">
<label>test-select</label>
[cred_field field="test-select" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group">
<label>test-checkboxes</label>
[cred_field field="test-checkboxes" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group"> //NEW SINGLE LINE TEXT FIELD
<label>1-1-notice-1</label>
[cred_field field="1-1-notice-1" force_type="field" class="form-control" output="bootstrap"]
</div>
<div class="form-group"> //NEW TEXTAREA FIELD
<label>1-1-mirror1-hopes</label>
[cred_field field="1-1-mirror1-hopes" force_type="field" class="form-control" output="bootstrap"]
</div>
<p></p>
[cred_field field="form_submit" output="bootstrap" value="Submit" class="btn btn-primary btn-lg"]
<button type="reset" value="reset" id="clear">Clear</button>
[/creduserform]
CURRENT JS CODE
(function( $ ) {
// javascript code here. i.e.: $(document).ready( function(){} );
$('#clear').click(function(e){
$('input[type="radio"], input[type="checkbox"]','#cred_user_form_1940_1').removeAttr('checked'); // radio and checkboxes
$('select option','#cred_user_form_1940_1').removeAttr('selected'); // select
});
})(jQuery);
***
p.s. For some reason, when I enter the shortcode for the 1-1-unhelpful-thought form, the name of the form shows up inside the shortcode as 1-1-unhelpful-adjective. I had previously called the form the latter, but more recently had resaved the form with the name ending in "thought". If I leave it alone it works as expected, even though it includes the older name ending in "adjective" inside the webpage content. If this persists, I can just clone the forms and redo the ID #'s inside the JS code... but please let me know if you think this is a problem.
Many thanks!!!!!
Hi again... I just did a bit more testing with the current JS code. The CLEAR button does appear to strip the values of the radio button, select field, and checkbox fields. But if I refresh the page, all three of these field values return back to the previously submitted value. This made me wonder if there's a way to embed a SUBMIT function inside of the CLEAR function?
SO to test... after I hit the CLEAR button, I hit the SUBMIT button again, theoretically to enter in the blank/null values for the radio, select, and checkbox fields. But this time, the radio button still goes back to the previous value (which is not null). Although the select and checkbox fields did in fact go to null which is great.
Any guidance on (1) embedding a submit function... and (2) getting the radio button to work? Seems like the radio button is the hardest one to return to null... THANK YOU IN ADVANCE!!!
Q1) getting the radio button to work?
Yes, you are right, it needs custom codes, I have add a sample snippets codes in your website:
hidden link
file "clear_radio_field_value", use action hook "cred_save_data" to remove the radio field value, like this:
add_action('cred_save_data', 'clear_radio_field_value_func',10,2);
function clear_radio_field_value_func($post_id, $form_data)
{
// if a specific form
if ($form_data['id']==1940)
{
if (!isset($_POST['wpcf-1-1-unhelpful-thought']) || empty($_POST['wpcf-1-1-unhelpful-thought']))
{
// delete
delete_user_meta($post_id, 'wpcf-1-1-unhelpful-thought');
}
}
}
Please test again, click the clear button, then submit the form
More help:
https://codex.wordpress.org/Function_Reference/delete_user_meta
https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data
Q2) "need to clear single line and multi line text fields" and form ID problem
You can setup similar JS codes, for example:
(function( $ ) {
// javascript code here. i.e.: $(document).ready( function(){} );
$('#clear').click(function(e){
var form_id = $(this).parent('form').attr('id');
form_id = '#' + form_id;
$('input[type="radio"], input[type="checkbox"]', form_id).removeAttr('checked'); // radio and checkboxes
$('select option',form_id).removeAttr('selected'); // select
$('input[type="text"]',form_id).removeAttr('value'); // single line text
$('textarea',form_id).empty(); // multiple lines field
});
})(jQuery);
Then you don't need to setup the form ID manually, it will detect the form ID automatically.
And you don't need to submit the form by clicking the "Clear" button.
More help:
hidden link
If there is other new question, please create new thread for the new question, that will help other users to find the answers.
My issue is resolved now. Thank you!
