How to use this javascript on HTML page?

Question

So I have been getting help from some as to how I could fix the issue about how I want to be able to click a button, and have it instead auto select the search box on my site.

Well, people are telling me to use Javascript for the click to do it and I was told to use this code:

function setFocus() {
    document.getElementById("myTextbox").focus();
}

But I don't know how to properly combine it with my html. Looked around on Google and everything isn't piecing together for me..

My HTML:

<html>
<head>
<title>DLL Download Database</title>
<meta name="description" content="Need a .DLL file? Don't worry, I am sure we have a DLL available for you!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function setFocus() { document.getElementById("search").focus(); }
</script>
</head>
<body>
<div class="my_container cf">
    <div class="headerbuttons"><a href="http://dll-download.us/" style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>HOME</p></a></div>
    <div class="headerbuttons"><a href=""style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>HOW TO INSTALL</p></a></div>
    <div class="headerbuttons"><p style="text-decoration: none; color:#000000;padding:3px;display:block;" onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>
    <div class="headerbuttons"><a href="http://www.dll-files.com/get-fixer/"style="text-decoration: none; color:#000000;padding:3px;display:block;"><p>DLL SOFTWARE FIXER</p></a></div>

</div>
<h2 class="homepage-start"><strong>WELCOME TO DLL DOWNLOAD.US!</strong></h2>
<div class="body-main2">
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search for a DLL" />
</form>
</div>
</body>
</html>

Add Onclick="setFocus()" on ur button click evnt

Darshan
– Darshan

2013-12-26 05:30:16 +00:00
Commented Dec 26, 2013 at 5:30 — Darshan
– Darshan, Commented Dec 26, 2013 at 5:30

Tony Jose · Accepted Answer · 2013-12-27 07:17:51Z

3

Please make the following changes in your html

HTML

<div class="body-main2">
<form method="get" action="/search" id="search">
    <input id="searchbox" name="q" type="text" size="40" placeholder="Search for a DLL"/>
</form>
</div>    


<div class="headerbuttons">
    <a style="text-decoration: none; 
    color:#000000;padding:3px;display:block;" onclick="setFocus();">
        <p>CAN 'T FIND A FILE?</p>
     </a>
</div>

JavaScript

<script type="text/javascript">
function setFocus() {
document.getElementById("searchbox").focus();
}</script>

Its working fine !!! See this working JSFIDDLE Demo

edited Dec 27, 2013 at 7:17

answered Dec 26, 2013 at 6:05

Tony Jose

1,6641 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3130708 Over a year ago

The only issue is that you have to actually click on the text. The usual padding does not work.

user3130708 Over a year ago

Apologies Tony, as you see, when you hover your mouse on the edges of the other tabs, you can see that it has the hyperlink selected. But on the Can't find file' tab, it's not like the others. Is there a work around for that?

Tony Jose Over a year ago

I think you are asking about the cursor style ?

Tony Jose Over a year ago

You have used <a> tag inside for all other tabs, but for the Can't find file' tab you have used <p> tag, So my question is, do you really want to use <a> tag or You just need a cursor style change ?

user3130708 Over a year ago

I want to be able to click anywhere on the Can't Find File tab, not specific areas. Try clicking on edges and you can see it will not highlight the search box. If you click closer to the text it'll highlight it. I am trying to make the entire thing clickable. Please let me know if I need to re explain differently.

|

Scary Wombat · Accepted Answer · 2013-12-26 05:35:04Z

0

try

onClick="javascript:setFocus();"  // no parameter

or more simply

onClick="setFocus();"  // no parameter

BTW, you should be setting the focus on the input tag not the form, so change the id of the input tag to be id="search" and of course remove it from the form.

edited Dec 26, 2013 at 5:35

answered Dec 26, 2013 at 5:28

Scary Wombat

44.9k6 gold badges38 silver badges67 bronze badges

Comments

shiva raj · Accepted Answer · 2013-12-26 05:36:48Z

0

onClick="setFocus(search);

remove "search" inside the braces

set id="search" for text field

edited Dec 26, 2013 at 5:36

answered Dec 26, 2013 at 5:30

shiva raj

4374 silver badges3 bronze badges

1 Comment

user3130708 Over a year ago

OK, I just did that. It doesn't make a difference in how the button acts.

Rahul Desai · Accepted Answer · 2013-12-26 05:38:42Z

0

Working Demo

You were not calling the function setFocus(). Also, there was no ID assigned to the textbox.

HTML:

<input name="q" id="search_box" type="text" size="40" placeholder="Search for a DLL" />

Javascript:

document.getElementById("search_box").focus();

answered Dec 26, 2013 at 5:38

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Comments

gaurav5430 · Accepted Answer · 2013-12-26 06:08:45Z

0

instead of calling setFocus(search)

have you tried calling only setFocus()

in

`<div class="headerbuttons"><p style="text-decoration: none;color:#000000;padding:3px;display:block;"
onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>`

EDIT:

remove id = search from the form element and set it on the text element

<form method="get" action="/search" >
  <input name="q" type="text" size="40" placeholder="Search for a DLL" id="search" />
</form>

edited Dec 26, 2013 at 6:08

answered Dec 26, 2013 at 5:28

gaurav5430

14.1k8 gold badges73 silver badges127 bronze badges

1 Comment

user3130708 Over a year ago

Makes no difference when clicking.

Collectives™ on Stack Overflow

How to use this javascript on HTML page?

5 Answers 5

7 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related