CODEWITHSUNDEEP
javascriptonclick
user979331
user979331

Reputation: 11871

javascript getting the value of a text box

I have this text box here...

<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />

and I also have this submit

<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />

what I am trying to do is add whatever is in the text box in my 

onclick="location.href='http://www.website.com/search/';"

so it would look like this..

onclick="location.href='http://www.website.com/search/what ever the user searches';"

how would I go about doing this, I have been googling my little heart out.

Upvotes: 5

Views: 59283

Answers (5)

Pablo Mescher
Pablo Mescher

Reputation: 27437

You would be better off using the < script> tag for this task. Example:

<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search"  id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
    var text= document.getElementById('search').value;
    location.href='http://www.website.com/search/'+text;
}
</script>

However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.

Upvotes: 0

Tomasz Nurkiewicz
Tomasz Nurkiewicz

Reputation: 340743

Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:

document.getElementById('btnSearch').onclick = function() {
    var search = document.getElementById('search').value;
    var searchEncoded = encodeURIComponent(search);
    window.location.url = "http://www.website.com/search/" + searchEncoded;
}

Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.

Upvotes: 11

nebulousGirl
nebulousGirl

Reputation: 1364

This should work:

onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"

But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.

Upvotes: 10

John Kalberer
John Kalberer

Reputation: 5800

Here is a working jsfiddle

I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.

var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');

submit.addEventListener('click', function(e) {
    var searchValue = encodeURIComponent(search.value);  // encode the search query
    window.location.href = 'http://www.website.com/search/' + searchValue ;
});

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78530

You can add it to the onclick event like so

document.getEelementById("btnSearch").onclick = function(){
    location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}

edit: aaaaand too slow... oh well. At least this is not inline.

Upvotes: 0

Related Questions