CODEWITHSUNDEEP
javascriptjqueryhtmlformshttp-redirect
jPratas
jPratas

Reputation: 215

HTML onclick image not working

I'm working on this website and I need it to change the page through javascript, for now. And whenever I click the image(acts as a search button), it doesn't do what it's supposed to.

So this is my form (note that I am using Foundation):

<form>
  <div class="ten columns" style="margin-left:0px">
      <input type="text" id="search" name="search" placeholder="Search..."/>
  </div>
  <div class="two columns" style="margin-left:0px">
  <input type="image" src="img/search.png" width="20" height="20" onClick="return getSearch()"/>
  </div>
</form>

And here's the getSearch function:

<script src="foundation/javascripts/jquery.js"></script>
  <script src="foundation/javascripts/foundation.min.js"></script>
  <script src="foundation/javascripts/app.js"></script>

  <script>
function getSearch(){
    var searchValue = $('#search').val();
    if(searchValue == 'shirt'){
        window.location.href = "feed.html";
    }
}
</script>

Any help would be much appreciated. Thanks, Joao.

Upvotes: 1

Views: 5788

Answers (2)

johnnyd23
johnnyd23

Reputation: 1705

Try adding return false to the function

function getSearch(){
    var searchValue = $('#search').val();
    if(searchValue == 'shirt'){
        window.location.href = "feed.html";
        return false;
    }
}

Upvotes: 0

Alex Choroshin
Alex Choroshin

Reputation: 6187

Here's a simple solution :

html:

<form>
  <div class="ten columns" style="margin-left:0px">
      <input type="text" id="search" name="search" placeholder="Search..."/>
  </div>
  <div class="two columns" style="margin-left:0px">
  <img src="img/search.png" width="20" height="20" id="myImg"/>
  </div>
</form>

js:

  $("#myImg").click(function(){
    var searchValue = $('#search').val();
    if(searchValue == 'shirt'){
        window.location.href = "feed.html";
    }
});

Live example: http://jsfiddle.net/choroshin/LgY2y/1/

Upvotes: 2

Related Questions