CODEWITHSUNDEEP
javascriptjquery
UnderMyWheel
UnderMyWheel

Reputation: 241

JQuery change input when select changed

I'm trying to get the text and placeholder of an input to change when the select is changed, but I'm not sure why it doesn't work.

Code:

<select class="form-control" name="search_type" id="search_type" style="width: 80%">
     <option selected id="item_name" value="item_name">Item Name</option>
     <option id="item_creator" value="item_creator">Item Creator</option>
</select>

<input type="text" id="search" name="search" placeholder="Item Name..." maxlength="50"  class="form-control" style="width: 100%">

<script>
        $(document).ready(function() {
            function search() {
                $('#search').text('');
                    $('#search').attr("placeholder", "Item Name...");

                if($("#search_type option:selected") == "item_name") {
                    $('#search').text('');
                    $('#search').attr("placeholder", "Item Name...");
                } else if($("#search_type option:selected") == "item_creator") {
                    $('#search').text('');
                    $('#search').attr("placeholder", "Creator Name...");
                }
            }

            $("#search_type").change(search);
        });
    </script>

Upvotes: 0

Views: 267

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65853

Your problem was in how you were attempting to get the value of the select:

if($("#search_type option:selected") == "item_name") {

Should have been:

if($("#search_type").val() == "item_name") {

In my snippet below, I've also reduced your code so that you aren't querying for the same things over and over by setting up variables to the results of the jQuery queries.

In addition, I've taken advantage of jQuery's "method chaining" so that instead of: 

$('#search').text('');
$('#search').attr("placeholder", "Item Name...");

You can write:

$('#search').text('').attr("placeholder", "Item Name...");


        $(document).ready(function() {
            var $txt = $("#txtSearch");
            var $searchType = $("#search_type");
          
            function search() {
              
                $txt.text('').attr("placeholder", "Item Name...");

                if($searchType.val() === "item_name") {
                    $txt.text('').attr("placeholder", "Item Name...");
                } else if($searchType.val() === "item_creator") {
                    $txt.text('').attr("placeholder", "Creator Name...");
                }
            }

           $searchType.change(search);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" id="txtSearch" name="search" placeholder="Item Name..." maxlength="50"  class="form-control" style="width: 100%">

<select class="form-control" name="search_type" id="search_type" style="width: 80%">
     <option selected id="item_name" value="item_name">Item Name</option>
     <option id="item_creator" value="item_creator">Item Creator</option>
</select>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

Tha major issue is that $("#search_type option:selected") will return a jquery object of the DOM element. So you cannot compare it to a string..

Use $("#search_type").val() to test for the selected value. Even better since the context of the method is the select element you can use this.value directly.

You could also simplify the method (because you are repeating a lot of parts) to

function search() {
     val searchEl = $('#search').val('').prop("placeholder", "Item Name..."),
         value = this.value;

     if(value  == "item_name") {
          searchEl.prop("placeholder", "Item Name...");
     } else if(value  == "item_creator") {
          searchEl.prop("placeholder", "Creator Name...");
     }
}

Upvotes: 1

Related Questions