CODEWITHSUNDEEP
javascriptjqueryhtmlformsinput
Nesiehr
Nesiehr

Reputation: 247

Form won't call javascript function when I press enter

<form id="search" onSubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="button" value="Go" class="go" id="go" onclick="go()">
</form>

I have the function in an external javascript document that I have sourced at the bottom of my webpage, the function works when I click the submit button, just not when I hit enter.

My go function:

function go() {
var input = document.getElementById('searchbar').value;
var words = input.split(" ");
var wordsLength = words.length;
var searchWords = '';

if(words[0] == 'search' || words[0] == 'Search') {
    for(var x = 1; x < wordsLength; x++) {
        searchWords += words[x];
        if(x == wordsLength-1) {
        } else {
            searchWords += '+';
        }
    }
    window.location.replace("http://www.google.com/#q=" + searchWords);
} else if(words[0] == 'navigate' || words[0] == 'Navigate') {
    for(var x = 1; x < wordsLength; x++) {
        searchWords += words[x];
        if(x == wordsLength-1) {
        } else {
            searchWords += '+';
        }
    }
    window.location.replace("http://www.google.com/maps/place/" + searchWords);
}
}

Upvotes: 0

Views: 169

Answers (5)

vjdhama
vjdhama

Reputation: 5058

Try using jQuery solution.

<form id="search">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit" value="Submit">
</form>

On Form Submit call go().

$(document).ready(function() {
    $('#search').submit(function() {
        //Add code from go() or just call go()
    });
});

UPDATE : 

<form id="search" onSubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit" value="Submit">
</form>

Jquery Part. 

$(document).ready(function() {
    $('#searchbar').live("keypress", function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            e.preventDefault();
            e.stopPropagation();
            $(this).closest('form').submit();
        }
    });
});

Upvotes: 0

Lumi Lu
Lumi Lu

Reputation: 3305

Try this, it is working.

HTML

<form id="search" onSubmit="return false">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="button" value="Go" class="go" id="go">
</form>

JavaScript

$('form').keypress(function (e) {
  if (e.which == 13) {
    go($('#searchbar').val());
    $('form#search_form').submit();
    return false;  
  }
});

function go(keyword){
    alert('Your search keyword is [' + keyword + ']');
}

Live Example

Upvotes: 0

Neo
Neo

Reputation: 4760

Your id of the button and the function name is same change one of those.

<form id="search" onSubmit="go()">
     <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
     <input type="button" value="Go" class="go" id="_go" onclick="go()">
</form>

Upvotes: 0

Biallo
Biallo

Reputation: 1

<form id="search" onsubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit">
</form>

Upvotes: 0

cport1
cport1

Reputation: 1185

You need to change 

<input type="button" value="Go" class="go" id="go" onclick="go()">

to 

<input type="submit">

Upvotes: 1

Related Questions