CODEWITHSUNDEEP
jqueryhtmlformsselect
Rashomon
Rashomon

Reputation: 6762

Making a input appear when specific option is selected in a dynamic jQuery form

Im a jQuery noob and Im stuck in this problem.

This code makes appear a form every time you click the button, and you can remove it clicking "Remove".

The problem is: I need an input to appear (one per form) when the option "Other" is selected. And make it disappear if you select "Option 1", "Option 2" or "Option 3".

You can see the code here: https://jsfiddle.net/9dgr9e3s/1/

HTML 

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>`

script jQuery

$(document).ready(function() {
var max_fields      = 10; //maximum forms allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add form button click
    e.preventDefault();
    if(x < max_fields){ //max forms box allowed
        x++; //text box increment
        $(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select name="username" onchange="update()">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><input type="hidden">\
    <a href="#" class="remove_field">Remove</a></div>'); //add form
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
    $(document).ready(function() {update();});
})

});

Any idea, suggestion? :(

Upvotes: 1

Views: 1844

Answers (2)

codeSwim
codeSwim

Reputation: 125

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select name="username">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><input class="optional-input" style="display:none"/>\
    <a href="#" class="remove_field">Remove</a></div>'); //add form
    $("select").off("change");
  $("select").on("change", function(e){
      var selEl = $(e.currentTarget);
      var inputSel = "input.optional-input";
      if (e.currentTarget.value == 4) {
        //alert("other clicked");

        selEl.parent().find(inputSel).show();
      } else {
        //alert("option clicked");
        selEl.parent().find(inputSel).hide();
      }
      });
    }
});

I tried this here: https://jsfiddle.net/9dgr9e3s/11/ and it works as expected.

I've made some updates to your code: added a class to the input in order to be able to select it and hidden it using display property. Also, for detecting the selection event, I've added selection listeners through jQuery using .on("change", evtHandler). .off("change") is needed so that the change listeners are reset before adding new ones.

Of course, you could (and I recommend this) also create the element separately before add and attach the eventListener on each element separately rather than using the broader $("select") jQuery addressing as provided in the example.

Upvotes: 1

Grommy
Grommy

Reputation: 367

You can make a button with display none and show it with javascript when selected option is 'Other'.

Something like that:

<style>
    .form button {
       display: none;
    }
</style>

<!-- You form here with button-->
<form class='form'>
    <select class='my-select-changer'>
            <option>Option1</option>
            <option>Other</option>
    </select>
    <button class='button-to-hide'></button>
</form>

<script type='text/javascript'>  
    $(".my-select-changer").change( function() {
        var selectedValue = $(this).val();
        var nextButton = $(this).next('.button-to-hide');

        if (selectedValue == "Other") {
            nextButton.show();
        } else {
            nextButton.hide();
        }
    });
</script>

I hope it will help you.

Upvotes: 0

Related Questions