Change input text with select option using jquery

Question

how you can change the text input to select the option, I've tried but not running. if I choose one option.

For example if I choose option genus then look like this.

and if I choose option PH then look like this

this my script

<form action="javascript:void(0)" onsubmit="search()" id="search-form" method="post" enctype="multipart/form-data" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">Search</span></span>
                        <input type="text" name="find_genus" id="find_genus" class="form-control"  placeholder="ex: genus or PH">
                        <select name="ph_option" id="ph_option" title="select" class="selectpicker" data-width="15%">
                            <option value="genus">1-26</option>
                            <option value="ph">26-50</option>
                        </select>
                        <select name="option_kategori" id="option_kategori" title="Kategori" class="selectpicker" data-width="15%">
                            <option value="genus">Genus</option>
                            <option value="ph">PH</option>
                        </select>
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                        </span> 
                    </div>
                </div>
            </div>
        </form>

JS script

$(document).ready(function(){
    $('[name="ph_option"]').hide;
    if (!$('#option_kategori').val() == "ph"){
        $('[name="find_genus"]').change(function () {
            $('[name="ph_option"]').show;
            $('[name="find_genus"]').hide;
        })  
    }
});

Just a word: If we look at your request with UX perspective, then the option to choose GENUS or PH should come first and then their input controls should change accordingly. — Deepak Yadav
– Deepak Yadav, Commented Mar 20, 2017 at 8:51

wdetac · Accepted Answer · 2017-03-20 10:25:28Z

5

Try this.

Demo: https://jsfiddle.net/8t88brd3/1/

HTML:

<form action="javascript:void(0)" onsubmit="search()" id="search-form" method="post" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group">
    <div class="col-md-12">
      <div class="input-group">
        <span class="input-group-addon">Search</span>
        <div class="input-div">
          <input type="text" name="find_genus" id="find_genus" class="form-control" placeholder="ex: genus or PH">
        </div>
        <div class="select-div">
          <select name="ph_option" id="ph_option" title="select" class="selectpicker" data-width="15%">
            <option value="">1-26</option>
            <option value="">26-50</option>
          </select>
        </div>
        <select name="option_kategori" id="option_kategori" title="Kategori" class="selectpicker" data-width="15%">
          <option value="genus">Genus</option>
          <option value="ph">PH</option>
        </select>
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>

CSS:

.select-div, .input-div {
  display: inline-block;
}

Javascript:

$(document).ready(function() {
  $('.select-div').hide();

  $('[name="option_kategori"]').change(function() {
    if ($('[name="option_kategori"]').val() === "ph") {
      $('.select-div').show();
      $('.input-div').hide();
    } else {
      $('.select-div').hide();
      $('.input-div').show();
    }
  })
});

edited Mar 20, 2017 at 10:25

answered Mar 20, 2017 at 8:56

wdetac

2,8825 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

irwan dwiyanto Over a year ago

thanks @wdetac, This run, but hiding $('#ph_option').hide(); he did not want to hide.

wdetac Over a year ago

what is your expected result differ from this code?

irwan dwiyanto Over a year ago

almost as I expected, but there is little that has not been resolved. like the image that I send, if the option "category" name = "ph_option" not show

wdetac Over a year ago

I don't see anything wrong, can you explain more? jsfiddle.net/8t88brd3

irwan dwiyanto Over a year ago

I use a bootstrap-select, if I remove the selectpicker class name = "ph_option" will hide but otherwise it will be like this image, 3.bp.blogspot.com/-xYOhN-cALlk/WM-nT7M8-YI/AAAAAAAABwc/…

jupeter · Accepted Answer · 2017-03-20 10:25:12Z

function getTxtbox(){
  return '<input class="form-control" type="text" id="txt_genus">'
}

function getDropdown(){
  return [
    '<select name="ph_option" id="ph_option" title="select" class="form-control" data-width="15%">',
    '<option value="genus">1-26</option>',
    '<option value="ph">26-50</option>',
    '</select>'
  ].join('');
}
$('#swap-area').html(getTxtbox()); //default

$('.menu-ddm1').on('click',function(){
  $('#ddm1').html($(this).html());
  
  var display = $('#swap-area');
  
  switch($(this).html()){
    case 'Genus' : 
      display.html(getTxtbox());
      break;
    case 'PH' :
      display.html(getDropdown());
     break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<form class="form-inline">
<div class="form-group">
  <label class="control-label">Input addons</label>
  <div class="input-group">
    <span class="input-group-addon">Search</span>
    <span id="swap-area">
      <!-- put element in here -->
    </span>
    <span class="input-group-btn">
      <div class="dropdown">
        <button 
        class="btn btn-default dropdown-toggle" 
        type="button" 
        id="ddm1" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="true">
          Genus
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="ddm1">
          <li><a href="#" class="menu-ddm1">Genus</a></li>
          <li><a href="#" class="menu-ddm1">PH</a></li>
        </ul>
      </div>
    </span>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </span>
  </div>
</div>
</form>

thanks @wit_peter for answer , but answer from wedtac more simple.

Collectives™ on Stack Overflow

Change input text with select option using jquery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related