JavaScript changing input style on submit form

Question

I am trying to make same loading animation at the background of input when a form is submitted.

css:

.inputLoading {
  background-image: url("../img/loading.gif");
  background-repeat: no-repeat;
  background-position: 99% 50%;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

javascript:

function onSearch(){
    document.getElementById("loadingAnimation").className += " inputLoading";
}

html:

<form action="index.php" method="get" onsubmit="onSearch()">
    <input type="text" id="loadingAnimation" class="form-control">
    <button type="submit">Search</button>
</form>

Problem is that this works in IE11 and Firefox 26 but not in Chrome 33. In Chrome there is no animation after form is submitted. URL to gif is correct. So I try to resolve the problem but no luck. It is strange that if I change only background color of input it will work everywhere.

Any ideas?

UPDATE: I have tested this on several computers and now I can tell that there is not problem only in Chrome. On some computers do not work even on FF or IE.

http://stackoverflow.com/questions/3349332/getelementsbyclassname-not-working — Rakesh Sharma, Apr 02 '14 at 10:52
Is the `inputLoading` class definitely getting added to the `input` element in chrome? — Pattle, Apr 02 '14 at 10:54

score 0 · Answer 1 · answered Apr 02 '14 at 10:59

0

Make sure if any kind of adBlock extension or image block extension is installed on you chrome browser. It may be one of the reasons if image is not being displayed.

answered Apr 02 '14 at 10:59

Mandeep Singh

983
8
9

JavaScript changing input style on submit form

1 Answers1