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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Change input's type or tabindex

    Hi,

    I am new on this forum, and I need to do a change to the following code, it is part of a signup form used on SocialEngine 4 script.

    What I need is to change the email's input type="email" to type="text", or to change tabindex="1" to tabindex="0".

    Can this be made with JS? without modifing the HTML code?

    Code:
    <form enctype="application/x-www-form-urlencoded" class="global_form" action="/signup" method="post">
    
    <div><div>
    
    <h3>Create Account</h3>
    
    <div class="form-elements">
    
        <div id="email-wrapper" class="form-wrapper">
          <div id="email-label" class="form-label"><label for="email" class="required">Email Address</label></div>
          <div id="email-element" class="form-element">
            <input type="email" name="email" id="email" value="" autofocus="autofocus" tabindex="1">
          </div>
        </div>
        
        <div id="password-wrapper" class="form-wrapper">
          <div id="password-label" class="form-label"><label for="password" class="required">Password</label></div>
          <div id="password-element" class="form-element">
            <input type="password" name="password" id="password" value="">
          </div>
        </div>
        
        <div id="passconf-wrapper" class="form-wrapper">
          <div id="passconf-label" class="form-label"><label for="passconf" class="required">Password Again</label></div>
          <div id="passconf-element" class="form-element">
            <input type="password" name="passconf" id="passconf" value="">
          </div>
        </div>
    
        
        <div id="submit-wrapper" class="form-wrapper">
          <div id="submit-label" class="form-label">&nbsp;</div>
          <div id="submit-element" class="form-element">
            <button name="submit" id="submit" type="submit">Continue</button>
          </div>
        </div>
    
    </div>
    
    </div></div>
    </form>

    Thank you for your help.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The answer is partially yes and partially no:

    1. Yes, you can change the tabindex
    2. The discussion around type="email" is a little bit longer

    type="email" is a new HTML5 feature. Therefor, only the browsers which have implemented HTML5 will render it as such. The older browsers (like IE7 and IE8) will simply consider those inputs as type="text".

    As a result: the type="email" is a nice and good feature, as I don't understand why do you need to change it. See also:
    http://davidwalsh.name/html5-email

    Moreover, the old browsers will automatically consider that type as text, so no additional changes are needed for them.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    bogh (11-23-2011)

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Kor View Post
    The answer is partially yes and partially no:

    1. Yes, you can change the tabindex
    I have figured that I have to change only the tabindex, from tabindex="1" to tabindex="0"

    I need this because I am using a Login widget and a Signup widget on the same page, and this widget have the same type="email" and tabindex="1", so what happens:
    -After I am typing the email in the signup form and press TAB it goes me to the login widget's password, and vice versa

    Is there any way you could tell me what the javascript code for changing the tabindex is?

    Thank you a lot.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try:
    Code:
    <script type="text/javascript">
    onload=function(){
    document.getElementById('email').tabIndex=0;
    }
    </script>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    bogh (11-25-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It is still not working and maybe because the signup's code is generated by a widget, the index.tpl of the widget contains the following code. I have added before javascript code like that, to fix other issues, and it worked


    <?php echo $this->form->render($this); ?>


    <script type="text/javascript">
    onload=function(){
    document.getElementById('email').tabIndex=0;
    }
    </script>


  •  

    Tags for this Thread

    Posting Permissions

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