...

View Full Version : Focus on DIV without FORM



mobeenkhan
08-07-2008, 04:36 PM
Hi,

I'm working on a project, currently I am having a problem ... This is how it goes, at the moment whenever I go to the login page, there are 2 fields, Username and Password and a Submit button. At the moment, the user has to manually click on the username field to be able to type in it, I want that as soon as the fields show up, the first text field automatically gets selected, i know this can be done using FOCUS on Form ,but the problem is that there are no forms in this code so I cannot put the focus in forms, so if there is any other way, plz do let me know !!! I'm kind of stuck !!! I am pasting a little bti of code ... believe me there are no forms defined anywhere the DIV tags !!!

/*** CODE ***/
<div id="login" style="display: none;">
<br>
<br>
</br>
</br>

<center>
<fieldset class="field2">
<legend>Login</legend>
<table width="75%" >
<tr>
<td width="15%"><font color=white> <b>username:</b> </font></td>
<td width="85%"><input type="text" id="user" name="user"></td>

</tr>
<tr>
<td><b><font color=white>password:</b> </td>
<td><input type="password" id="pass" name="pass"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="login" type="submit" value="Submit" onclick="checkPass()" >
</td>
</tr>
</table>
</fieldset>
</center>
</div>

abduraooft
08-07-2008, 04:47 PM
believe me there are no forms defined anywhere the DIV tags !!! Why don't you add one form then?

mobeenkhan
08-07-2008, 05:20 PM
Well, Thanks for the tip but I have tried that already, I'm talking about nearly thousands and thousands of line of code, its a company project im working on !!! Well im working on their 4.1 version, now its hard to change every where ... besides, i tried doing it at one point and BANG !!! forms ruined everything, even after giving the right password, something weird happened and the whole page keep on getting refreshed, so plz a solution without forms will be highly appreciated !!!

Thanks a lot though :)

ninnypants
08-07-2008, 06:11 PM
this can give your form element focus but I don't see how you could run it without a form

document.getElementById('el_id').focus()
Run something like that in the <body>'s onload event

rnd me
08-07-2008, 07:14 PM
<input type="text" id="user" name="user" tabindex="1" >

if that doesn't work use ninnypants' code like:

<body onload="document.getElementById('name').focus()" >

mobeenkhan
08-08-2008, 10:58 AM
Thanks a lot rnd me and ninnypants, well I tried both of them but didnt work, maybe the reason is that this login section is basically a DIV Block which is called when the user press Configuration button, the parameters of this block is defined using CSS, so could this be the reason, u've seen the login code, here is the CSS one, thought maybe u would like to see ...

/** CODE - CSS **/
#pascol {
background: black;
position: absolute;
left: 10px;
top: 168px;
width: 30em;
height: 170px;
z-index: 200
}

I know my question is quite retard but honestly i dun know much about this stuff ...

Thanks a lot everyone !!!

mobeenkhan
08-08-2008, 12:15 PM
Another strange thing which happens is ... i dun know why ... is that whenever i declare a form outside or within the DIV tags, once the login process is done, instead of going inside the configuration pages (next page after login), it goes outside to the main page, as if it gets refeshed ... why is that :S

WillMeister
08-27-2008, 01:58 AM
I clipped a bit of your code such as the 'color=white' and 'display:none' to make it work for me, otherwise here is a slightly more refined version as suggested by rnd me

Here is my live demo
https://neutroninternet.com/text-focus.html

First, you should always use a form. In each form, ensure each element (IE. textbox, checkbox) has a name and Most Especially, an ID.
Second, you should be posting this info within the same page to make it more secure. If you want a AJAX form solution, contact me and I will post the scripts somewhere here for free and some hints on how to post within the same page. This is a super-cool, super-secure, easy-to-implement and easy-to-customize function for forms.

<----------------------------Re-writing Form Code--------------------------->
<--- Add this to the body tag in your page (specify in format [document.<FORMNAME_ID>.<FIELDNAME_ID>.focus()] ) --->
<--- Using this code, you can focus on any ID that you specify, not just the first field --->
<body onLoad="document.formId.user.focus()">
<div id="login">
<br>
<br>
</br>
</br>

<center>
<fieldset class="field2">
<legend>Login</legend>
<--- Add this tag in your page --->
<form action="" name='formId' id='formId'>
<table width="75&#37;">
<tr>
<td width="15%"><font> <b>username:</b> </font></td>
<td width="85%"><input type="text" id="user" name="user"></td>

</tr>
<tr>
<td><b><font>password:</b> </td>
<td><input type="password" id="pass" name="pass"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="login" id="login" type="submit" value="Logon" onclick="checkPass()" >&nbsp;<input name="Reset" id="Reset" type="reset" value="Reset">
</td>
</tr>
</table>
<--- Add this tag in your page --->
</form>
</fieldset>
</center>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum