CODEWITHSUNDEEP
javascriptjqueryhtml
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery change element on select - global script for multiple select inputs

I am creating a form builder script. I have a select input where the user can select the form element they want to use, depending on their selection ("select", "checkbox" or "radio") another form field is displayed allowing users to input their options.

Users can create as many instances of form elements as they want, so each select input has a dynamically created id that corresponds to the id of the hidden form field. I then use jQuery to determine whether the "options" field should be hidden or not (triggered on change of the form elements select input).

Currently, for every instance, I have the following code addedabove the select input:

<script>
  jQuery(document).ready(function($) {
    var arr = ['select', 'checkbox', 'radio'];
    var thisForm = 'select.input-type-118';

    function showHideSelect() {
      var val = $(thisForm + ' option:selected').val();
      var selectOptions = $('#select-options-118')

      if (arr.indexOf(val) >= 0) {
        selectOptions.show();
      } else {
        selectOptions.hide();
      }
    }

    showHideSelect();

      $(thisForm).change(function() {
        showHideSelect();
      });

  });

</script>

Where var thisForm and var selectOptions are added dynamically and refer to the select option below this script.

I'm wondering if there is a better way to do this rather than repeat several instances of this, at the moment, a users page cold look like this:

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

<script>
...
</script>

<select>
...
</select>

<textarea>
This is hidden depending on the select option
</textarea>

...etc...etc

My concern is that I don't think it's best practice to have so many instances of the same script, but I'm unsure how to write a global script that will allow me to show/hide the textarea on an individual basis.

I have shown a more accurate depiction of my workings on this jsfiddle here: https://jsfiddle.net/46stb05y/4/

Upvotes: 0

Views: 67

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

You can use Event Delegation Concepts. https://learn.jquery.com/events/event-delegation/

With this you can change your code to 

$(document).on('change','select',function() { //common to all your select items
    showHideSelect($(this));  // passing the select element which trigerred the change event
  });

This will work even on the select items that are added dynamically

You must change your function to receive the element as the parameter.

    function showHideSelect($selectElement) {      
    var val = $selectElement.val();
    var selectOptionsId =  $selectElement.attr('class').replace('input-type','select-options');
    var selectOptions = $("#"+selectOptionsId);

    if (arr.indexOf(val) >= 0) {
      selectOptions.show();
    } else {
      selectOptions.hide();
    }
  }

Here is the Working JsFiddle

Upvotes: 1

Related Questions