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
Change required value based on previous question?
Hello,
I have read the online documentation and the examples show pretty close to what I want to accomplish. But I just want to make sure.
My use case is:
A form will contain a dropdown field with two options: New or Returning (users)
- If the user selects “new” I then want that value to be passed to a shirt quantity dropdown field where the quantity starts/defaults to 2.
- Would like for 0 and 1 to not be an option at all
- If the user selects returning, the shirt quantity dropdown field quantity defaults to zero. The values for shirt quantity field will be 0,1,2,3,4,5 in the shirt quantity field.
My objective is to have a single “shirt quantity field” for both new and returning users but the new users have to order 2 shirts and returning users can choose 0-5. I have done this in the past with other form solutions and it requires two shirt quantity fields.
Thanks in advance!
Curtis
March 27, 2018 at 8:09 pm
http://jsfiddle.net/ohwo4sy5/21/
March 27, 2018 at 9:31 pm
Superb response!
Newbie questoin, when I am building the form in formidable where would I put this code?
March 28, 2018 at 6:12 am
I always put my js/jquery in the "after fields" box of the customize html section of the settings for my forms.
April 15, 2018 at 8:27 pm
Ok, I finally got around to working on this. I think I am having a newbie problem getting my syntax formatted properly for the JS. When I do the following.
<script type="text/javascript">
jQuery(document).ready(function($){
$('#field_obbd9[value="0"]').hide();
$('#field_obbd9[value="1"]').hide();
$('#field_obbd9').val("2");
$('#selectuser').bind('change', function () {
if(field_onthf.value == 'New') {
$('#field_ obbd9[value="0"]').hide();
$('#field_ obbd9[value="1"]').hide();
$('#field_ obbd9').prop('selectedIndex',2);
}
else if(field_onthf.value == 'Returning') {
$('#field_hufnn').show();
$('#field_hufnn').prop('selectedIndex',0);
}
})
})
</script>
I am getting an error:
Can'f find variable: JQuery in safari. (see screenshot) Any tips?
Attachment:
April 15, 2018 at 9:27 pm
Try:
$(document).ready(function(){
April 16, 2018 at 5:13 pm
Thanks, I finally had to add before the $document....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
April 16, 2018 at 6:00 pm
Couple more things:
Here is my simple test form:
http://registration.rouseband.org/wp-admin/admin-ajax.php?action=frm_forms_preview&form=gfgev
For some reason when I do this switch the qty value does not follow:
New; qty value = 2
Switch to returning; qty value = 0
Switch back to new; qty value = 0
I expected the value in #3 to be = 2.
Also, in the js code I notice the word "hide". But when I select new, the values 0 and 1 are still available in the dropdown. Should those values be truly gone?
April 17, 2018 at 6:12 pm
I suspect it has to do with the call to the bind element. I doubt your field ID for the user select field is #selectuser in your form. Find the right css ID and it will likely fix it.
April 17, 2018 at 8:45 pm
I fixed the issue with the logic working. I had an extra space. For some reason though the .hide is not working in my sample form or your jsfiddle file
April 17, 2018 at 9:45 pm
On the fiddle if you leave the default or select "New", it hides the values of 0 and 1. If you have it set to "returning", it shows the values of 0 and 1. Is that not what you are seeing? I'm unable to see your script in the page you provided so I can't verify it working.
April 18, 2018 at 7:15 am
I published my page here:
http://registration.rouseband.org/test/
A note about this test page:
The hide does not work for either chrome or safari
Here is a video of how the fiddle is working for me:
https://www.dropbox.com/s/eoncor3pt16ufue/js_hide_fiddle_demo.mov?dl=0
A note about this fiddle:
The hide works in Chrome
The hide does not work in Safari
April 18, 2018 at 9:36 am
Thanks for providing that. I should have cross-browser tested the solution.
Updated fiddle: http://jsfiddle.net/ohwo4sy5/49/
April 18, 2018 at 6:00 pm
Perfect! Worked like a champ in both Chrome and Safari. AND thank you for all your patience and help on this!!!!
Discussion closed.