Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Focus on DIV without FORM

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    believe me there are no forms defined anywhere the DIV tags !!!
    Why don't you add one form then?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    this can give your form element focus but I don't see how you could run it without a form
    Code:
    document.getElementById('el_id').focus()
    Run something like that in the <body>'s onload event

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,334
    Thanks
    11
    Thanked 587 Times in 568 Posts
    <input type="text" id="user" name="user" tabindex="1" >

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

    <body onload="document.getElementById('name').focus()" >
    Last edited by rnd me; 08-07-2008 at 07:16 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 !!!

  • #7
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Aug 2008
    Location
    Vancouver BC
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •