I have a rails 4 app with bootstrap and simple form.
I have a simple form for datum.
It has a primary question, which if answered true, requires a follow up question. I want to hide the follow up question until the first question is answered as true.
I have defined a separate CSS class for the label above the follow up question (survey-link-data) so that the label is hidden and shown with the input field. This JS is incorrect - it doesn't hide at then show as I had hoped.
Please can you see what I've done wrong? Thank you.
These are my two simple form for (@datum) questions:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'data-survey-link' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
This is my JS script:
<script>
$(function() {
// Hide the survey_link input
$('input[name="datum[survey_link]"]').hide();
$('.data-survey-link').hide();
// When the survey checkbox changes
$('input[name="datum[survey]"]').change(function() {
// If the survey checkbox is ticked
if(this.checked) {
// Survey checkbox was ticked - show the survey_link input
$('input[name="datum[survey_link]"]')toggle(this.checked);
$('.data-survey-link').show();
} else {
// Survey checkbox was unticked - hide the survey_link input
$('input[name="datum[survey_link]"]').hide();
$('.data-survey-link').hide();
}
});
});
</script>
First of all, you are selecting, and hiding two elements (label and input), which is less efficient than just hiding/showing a wrapper (by default simple_form wraps input and label inside a special div tag). Let's give this wrapper a class:
<%= f.input :survey_link, wrapper_html: { class: 'survey-link-wrapper' } %>
I stripped the rest of the options for the simplicity of example.
You can initially hide it with CSS:
.survey-link-wrapper {
display: none;
}
Second, create a more efficient selector for first input:
<%= f.input :survey, input_html: { class: 'survey-checkbox' } %>
Then your javascript code becomes this:
<script>
$(function() {
var $surveyLinkWrapper = $('.survey-link-wrapper');
$('.survey-checkbox').change(function(e) {
// If the survey checkbox is ticked
if ( $(this).is(":checked") ) {
// Survey checkbox was ticked - show the survey_link input
$surveyLinkWrapper.show();
} else {
$surveyLinkWrapper.hide();
}
});
});
</script>
More clear and easier to read.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments