cloudstryphe
09-27-2012, 05:05 AM
Hello all. I have a customized icon I use from "font-awesome" that I use to submit a search query. Since it's a customized font that I have to use the <i class""></i> to call, I had to create a javascript that did an "onclick" to submit the form. Problem is I also want the the javascript to work if I press enter after typing in the search. How do I make this work? Heres my code:
HTML:
<form onsubmit="searchbarsubmitjs();">
<input type="text" id="search" class="searchclass" name="searchbarinput" placeholder="Search then press enter..." />
<div id="searchcriteria"><span>All Contacts</span>
<i id="searchcriteriachevron" class="icon-chevron-down"></i>
<i id="searchsubmit" class="icon-chevron-right"></i>
<input type="submit" style="position: absolute; left: -99999px;" />
</form>
</div>
Javascript/Jquery:
function searchbarsubmitjs() {
if($("#searchcriteria span").text() == "YouTube") {
var search_term = $('.searchclass').attr('value');
window.location.replace("../../youtube/results.php?q=" + search_term);
};
if($("#searchcriteria span").text() == "Google") {
var search_term = $('.searchclass').attr('value');
window.open("http://www.google.com/?q=" + search_term + "&output=search");
};
if($("#searchcriteria span").text() == "bing") {
var search_term = $('.searchclass').attr('value');
window.open("http://www.bing.com/search?q=" + search_term);
};
if($("#searchcriteria span").text() == "Wikipedia") {
var search_term = $('.searchclass').attr('value');
window.open("http://en.wikipedia.org/wiki/Special:Search?search=" + search_term + "&go=GO");
};
};
$('#searchsubmit').click (function() {
searchbarsubmitjs();
});
$('#searchsubmitform').submit(function() {
searchsubmitjs();
});
HTML:
<form onsubmit="searchbarsubmitjs();">
<input type="text" id="search" class="searchclass" name="searchbarinput" placeholder="Search then press enter..." />
<div id="searchcriteria"><span>All Contacts</span>
<i id="searchcriteriachevron" class="icon-chevron-down"></i>
<i id="searchsubmit" class="icon-chevron-right"></i>
<input type="submit" style="position: absolute; left: -99999px;" />
</form>
</div>
Javascript/Jquery:
function searchbarsubmitjs() {
if($("#searchcriteria span").text() == "YouTube") {
var search_term = $('.searchclass').attr('value');
window.location.replace("../../youtube/results.php?q=" + search_term);
};
if($("#searchcriteria span").text() == "Google") {
var search_term = $('.searchclass').attr('value');
window.open("http://www.google.com/?q=" + search_term + "&output=search");
};
if($("#searchcriteria span").text() == "bing") {
var search_term = $('.searchclass').attr('value');
window.open("http://www.bing.com/search?q=" + search_term);
};
if($("#searchcriteria span").text() == "Wikipedia") {
var search_term = $('.searchclass').attr('value');
window.open("http://en.wikipedia.org/wiki/Special:Search?search=" + search_term + "&go=GO");
};
};
$('#searchsubmit').click (function() {
searchbarsubmitjs();
});
$('#searchsubmitform').submit(function() {
searchsubmitjs();
});