How to change submit button on click to input

Question

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?

And what was your attempt in this scenario? Any code you have produced? — Beri
– Beri, Commented Nov 25, 2014 at 8:08
So I tried: #searchform input[type='text']:focus #searchsubmit { background: url("../images/submit.png") 0 -14px no-repeat; } but it dont work — Ihor Tkachuk
– Ihor Tkachuk, Commented Nov 25, 2014 at 8:13

ONOZ · Accepted Answer · 2014-11-25 08:20:18Z

7

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.

edited Nov 25, 2014 at 8:20

answered Nov 25, 2014 at 8:14

ONOZ

1,4102 gold badges12 silver badges19 bronze badges

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

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-11-25 08:21:30Z

3

Like this:

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

edited Nov 25, 2014 at 8:21

answered Nov 25, 2014 at 8:08

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Benjamin · Accepted Answer · 2014-11-25 08:31:28Z

1

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

edited Nov 25, 2014 at 8:31

Benjamin

2,6902 gold badges24 silver badges34 bronze badges

answered Nov 25, 2014 at 8:12

user3811714

2763 gold badges8 silver badges21 bronze badges

4 Comments

Der Vampyr Over a year ago

Paste the code of your jsbin to the answer. Your answer will become useless if the link stop working, so make sure to put the relevant code as text in it.

Der Vampyr Over a year ago

Yeah it does, but what if someone in 6 months has this problem and google duides him here? Will the jsbin link work at this time too? You can´t be sure, so it´s recommended to put the code in the answer.

user3811714 Over a year ago

@DerVampyr I hear you,but was there any reason to down vote me?

Der Vampyr Over a year ago

The reason why you get downvotes is, because your answer is now ok, but maybe be bad in future, so it helps nobody. Just edit your answer and put the code from the jsbin in here and you will lose the downvotes, because your answer will become more useful. Useful link: How to answer on SO check the "Provide context for links" part.

Riad · Accepted Answer · 2014-11-25 08:17:05Z

0

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');
})

answered Nov 25, 2014 at 8:17

Riad

3,8585 gold badges30 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to change submit button on click to input

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related