CODEWITHSUNDEEP
jqueryhtmlcss
Ihor Tkachuk
Ihor Tkachuk

Reputation: 1118

How to change submit button on click to input

I have a form such a structure:

<form role="search" method="get" id="searchform" action="">
    <input type="text" name="s" id="s" placeholder="Search..." />
    <input type="submit" id="searchsubmit" />
</form>

I need to when you click on the input field changed background submit button. How to do it?

Upvotes: 2

Views: 204

Answers (4)

user3811714
user3811714

Reputation: 276

Here is a working example that is easy and clear to understand

Markup

<form role="search" method="get" id="searchform" action="">
    <input type="text" name="s" id="s" placeholder="Search..." />
    <input type="submit" id="searchsubmit" />
</form>

Jquery

$(document).ready(function() {
  $('#s').on('focus',function(){
     $('#searchsubmit').css('background-color','red');
  });
});

Working Bin

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Like this:

$('#s').on('focus',function(){
  $('#searchsubmit').css('background-color','#f00');
}).on('blur',function(){
  $('#searchsubmit').css('background-color','');
});

Upvotes: 3

ONOZ
ONOZ

Reputation: 1410

A pure CSS solution:

input[type="text"]:focus + input[type="submit"]{
    background-color: red;
}

Demo: http://jsfiddle.net/by10et61/

The + in the selector is what makes it work. The selector looks for a submit button, which is preceeded by a text input having focus.

Upvotes: 7

Riad
Riad

Reputation: 3850

You can try it with focus and out function both:

$('#s').focus(function(){
    $('#searchsubmit').css('background-color','#f00');
}).focusout(function() {
     //if you get back to other or previous...
    $('#searchsubmit').css('background-color','#ff0');
})

Upvotes: 0

Related Questions