Keenan Payne
Keenan Payne

Reputation: 816

Changing input background on submit

I am trying to create a simple effect that whenever anybody enters anything into my search field, upon hitting "enter", a simple little loading gif appears inside of the input box.

You can see my code here: http://jsfiddle.net/9KEKa/1/, and here is the raw HTML, CSS, and JS:

HTML

<form>
    <input type="text" placeholder="Search..." class="transition-width" />
    <input type="submit" value="Search" class="hide" />
</form>

CSS

/* General */
.hide {
    display: none;
    visibility: hidden;
}

.transition-width {
    -webkit-transition: width 0.5s ease;  
    -moz-transition: width 0.5s ease;  
    -o-transition: width 0.5s ease;  
    -ms-transition: width 0.5s ease;  
    transition: width 0.5s ease;  
}

/* Search Form */
form input { 
    background: url('http://i.imgur.com/7BKx4xr.png') no-repeat right;
    border: none;
    cursor: pointer;
    float: right;
    margin-right: 100px;
    width: 61px;
}

.searching { background: url('http://i.imgur.com/ayJ7sYg.gif') no-repeat right; } 

form input::-webkit-input-placeholder { color: #fff; }

form input::-moz-input-placeholder { color: #fff; }

form input:-moz-input-placeholder { color: #fff; }

form input:-ms-input-placeholder { color: #fff; }

form input:focus { 
    background: #efefef;
    border: 1px solid #aaa;
    cursor: auto;
    width: 200px; 
}

form input:focus::-webkit-input-placeholder { color: #666; }

form input:focus::-moz-input-placeholder { color: #666; }

form input:focus:-moz-input-placeholder { color: #666; }

form input:focus:-ms-input-placeholder { color: #666; }

JavaScript (jQuery)

$(function () {
    $('.search form').on('submit', function (e) {
        e.preventDefault

        $('.search form input.transition-width').addClass('searching');
    });
});

All I'm trying to do is add the class "searching" which contains the animated gif that I want as the background.

A lot of my code seems correct, but I may just be having a mental block. Hopefully it's a simple issue that can be solved.

Upvotes: 0

Views: 169

Answers (3)

JerryHuang.me
JerryHuang.me

Reputation: 1790

Your capture key for enter was incorrect. Also, the "loading effect" will only work for a use case where one hits "enter." I have left your CSS and HTML as intact and without change.

JS

    $('.transition-width').keydown(function(event){
    if (event.keyCode == 13){ 
        event.preventDefault();
        event.stopPropagation();
         $('input.transition-width').blur(); 
        $('input.transition-width').addClass('searching');
    }    
  });

Fiddle

http://jsfiddle.net/58uQU/1/

Upvotes: 2

Dane O&#39;Connor
Dane O&#39;Connor

Reputation: 77288

3 Things:

  1. Your selector for .searching isn't specific enough. It's being overriden by input:focus and thus having no effect.
  2. You need to call the function preventDefault not just point to it. e.preventDefault();
  3. Your event handler is using the wrong selector.

Upvotes: 1

Sebsemillia
Sebsemillia

Reputation: 9476

Try e.preventDefault(); instead of e.preventDefault.

And your selector should not be .search form .. when your sourcecode has no such class element before the form in question. It should be just form in that case.

jsFiddle

Upvotes: 0

Related Questions