CODEWITHSUNDEEP
jquerycssonfocus
Shehab Mahmud
Shehab Mahmud

Reputation: 13

Search input focus() function with jQuery

I want to make a search box when user focus on input field, background of submit button will be changed. Please can you help me to do this. Thank you in advance. 

<script>
$(document).ready(function(){
    $("input#bigsboxh").focus(function(){
        $("submit#bigsboxhsub").css({"background-color": "#137ff3"", "opacity": "1"});
    });
});
</script>
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i></button>

Upvotes: 1

Views: 429

Answers (4)

Gangani Roshan
Gangani Roshan

Reputation: 583

Try Below code.

$("#bigsboxh").focus(function(){
       $("#bigsboxhsub").css('background-color', '#137ff3');

  }).blur(function(){
       $("#bigsboxhsub").css('background-color', 'FFFFFF');
  });

Upvotes: 0

Mr. Roshan
Mr. Roshan

Reputation: 1805

You placed extra Quotation mark"#137ff3"" also

instead of $("input#bigsboxh") , $("submit#bigsboxhsub") only use id's $("#bigsboxh"),$("#bigsboxhsub")

$(document).ready(function(){
    $("#bigsboxh").focus(function(){
        $("#bigsboxhsub").css({"background-color":"#137ff3", "opacity":1});
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search">Search</i></button>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

  1. You have unnecessary quotes "#137ff3"".
  2. Use only the id and not also the tag name $("#bigsboxh")

$(document).ready(function(){
    $("#bigsboxh").focus(function(){
        $("#bigsboxhsub").css({"background-color": "#137ff3", 'opacity':'1'});
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i>try </button>

Upvotes: 0

Chiller
Chiller

Reputation: 9738

You can achieve that using css

See code snippet

#bigsboxh:focus + #bigsboxhsub{
  background:red;
}
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i>submit</button>

Upvotes: 1

Related Questions