CODEWITHSUNDEEP
javascriptjquery
subas_poudel
subas_poudel

Reputation: 456

Drop down text input option

I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value. I specifically want that user can enter value only when they select "Enter a value " option.

Here is what I have tried so far.

HTML-

<div class="ginput_container">
    <select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
       <option value="0">None</option>
       <option value="155">1-70</option>
       <option value="185">71-250</option>
       <option value="*">Enter value</option>
    </select>
    <input type="text" value="None" class="holder" >
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
        var val = jQuery(this).val();
        var enter = jQuery(this).parent().find('option:selected').text();
        var x = jQuery(this).parent();
        if (enter ==="Enter a value" || enter === "Enter value"){
          var holder = x.find('.holder');
          holder.val('');          
          holder.prop('disabled',false);
          holder.focus();
        } else {
          x.find('.holder').val(x.find('option:selected').text());
        }
});

JS fiddle

however it wont work properly if i click the enter value option again.

Upvotes: 0

Views: 2296

Answers (3)

subas_poudel
subas_poudel

Reputation: 456

Thanks guys I guess i have found my answer

HTML-

<div class="ginput_container">
    <select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
       <option value="0">None</option>
       <option value="155">1-70</option>
       <option value="185">71-250</option>
       <option value="*">Enter value</option>
    </select>
    <input type="text" value="None" class="holder" >
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
  var holder = x.find('.holder');
  holder.val('');          
  holder.prop('disabled',false);
  holder.focus();
  jQuery(this).val("0"); // Change select value to None.
} else {
  x.find('.holder').val(x.find('option:selected').text());
  x.find('.holder').prop('disabled',true);
}

});

JS FIDDLE

Upvotes: 0

pwdst
pwdst

Reputation: 13735

I have forked your JSFiddle to http://jsfiddle.net/pwdst/4ymtmf7b/1/ which I hope does what you wanted to achieve.

HTML-

<div class="ginput_container">
    <label for="input_1_4">Select option</label>
    <select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">        
        <option value="0">None</option>
        <option value="155">1-70</option>
        <option value="185">71-250</option>
        <option value="*">Enter value</option>
      </select>
      <div>
          <label class="hidden-label" for="input_1_4_other">Other value</label>
          <input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
     </div>
</div>

JavaScript-

jQuery(".gfield_select").change(function() {
        var $this = jQuery(this);
        var val = $this.val();
        var holder = $this.parent().find('.holder');
        if (val === "*"){
            holder.val('');          
            holder.removeAttr('disabled');
            holder.focus();
        } else {           
            holder.val(this.options[this.selectedIndex].text);
            holder.attr('disabled', 'disabled');
        }
});

When the "Enter value" option is chosen then the input box is enabled, value set to an empty string, and it is focused. If another option is chosen then the text input is disabled again, and the text value from the select list is used.

Upvotes: 1

Moshtaf
Moshtaf

Reputation: 4903

I think there are many plugins that do what you want but if you want to create your own, it's a basic and simple solution. You can create a select and a textbox with display:none like this:

<select id="ddlDropDownList">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />

<style>
    #txtTextBox{
        display:none;
    }
</style>

then try this JQuery:

$("#ddlDropDownList").change(function(){
    if($(this).val() == '-1'){
        $("#txtTextBox").fadeIn();
    }else{
        $("#txtTextBox").fadeOut();
    }
});

Check JSFiddle Demo

Upvotes: 1

Related Questions