Change input's type or tabindex

[bogh]

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?

<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.

[Kor]

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.

[bogh]

Originally Posted by Kor

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.

[Kor]

Try:

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

[bogh]

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>