Customize Wordpress registration form - html

I am using Cimy User Extra Fields plugin for extra fields in Wordpress registration but I would like to make it in two columns so users would not scroll since now I have to many fields. I have problem in how to implement it in code. When I am editing via Inspect element it looks like this
<form name="registerform" id="registerform" action="http://test.com/wp-login.php?action=register" method="post" style="
position: absolute;
margin-left: -200px;
">
<div style="float:left;width: 350px;" ;=""><p>
<label for="user_login">Username<br>
<input type="text" name="user_login" id="user_login" class="input" value="" size="20"></label>
</p>
<p>
<label for="user_email">E-mail<br>
<input type="text" name="user_email" id="user_email" class="input" value="" size="25"></label>
</p>
<!--
Start code from Cimy User Extra Fields 2.5.1
Copyright (c) 2006-2013 Marco Cimmino
http://www.marcocimmino.net/cimy-wordpress-plugins/cimy-user-extra-fields/
-->
<input type="hidden" name="cimy_post" value="1">
<p id="cimy_uef_wp_p_field_1">
<label for="cimy_uef_wp_1">Password</label><input type="password" name="cimy_uef_wp_PASSWORD" id="cimy_uef_wp_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_2">
<label for="cimy_uef_wp_2">Password confirmation</label><input type="password" name="cimy_uef_wp_PASSWORD2" id="cimy_uef_wp_2" class="cimy_uef_input_27" value="" maxlength="100">
</p></div>
<div style="float:right;width: 350px;padding-left: 30px;" ;="">
<p id="cimy_uef_wp_p_field_3">
<label for="cimy_uef_wp_3">First name</label><input type="text" name="cimy_uef_wp_FIRSTNAME" id="cimy_uef_wp_3" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_4">
<label for="cimy_uef_wp_4">Last name</label><input type="text" name="cimy_uef_wp_LASTNAME" id="cimy_uef_wp_4" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_1">
<label for="cimy_uef_1">Company</label><input type="text" name="cimy_uef_COMPANY" id="cimy_uef_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_2">
<label for="cimy_uef_2">Industry </label><select name="cimy_uef_INDUSTRY" id="cimy_uef_2" class="cimy_uef_input_27">
<option value="Consulting">Consulting</option>
<option value="Events and PR">Events and PR</option>
<option value="Other industries">Other industries</option></select>
</p>
<br>
<!--
End of code from Cimy User Extra Fields
-->
</div>
<p id="reg_passmail">A password will be e-mailed to you.</p>
<br class="clear">
<input type="hidden" name="redirect_to" value="">
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register"></p>
</form>
NOTE: I would like first div to open before user_login to close after cimy_uef_wp_p_field_2
Is there any way to make something like this since user_login is default wp-login.php field and cimy_uef_wp_p_field_2 is Cimy User Extra Fields plugin field

Related

HTML5 only - 'Required' attribute on checkbox input preventing form from being resubmitted after validation fail

Looking for answers for HTML5 ONLY, no JS solutions please!
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. The question is:
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page.
The form in question is below, sorry for the shitpost aspects;
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
The SPECIFIC part I'm having trouble with is this bit right here:
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it.
I appreciate your help!
You have to change the oninput to onchange for input tags like this:
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
onchange="setCustomValidity('')"
updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>

How to Display content of Form when Submit is clicked

I have created a form to accept registration of users. What I want is to make the content of the form show in another page when the submit button is clicked - so that the user can view the details of the form and print.
<form action="sendresult.php" method="post" name="form2" id="form2" autocomplete="on">
<p align="center"><img src="images/headerform.jpg" width="691" height="135"></p>
<p align="center"><strong style="font-size: 24px;">COURSE REGISTRATION FORM
</strong> - <span style="color: #00F"><strong><em>Click Here to Return to other pages</em></strong></span></p>
<p align="center" style="text-align: left; font-size: 16px;">
<label for="LastName">LAST NAME:</label>
<input name="LastName" type="text" id="LastName" form="form2" size="40">
<label for="Firstname">FIRST NAME:</label>
<input name="Firstname" type="text" id="Firstname" form="form2" size="40">
</p>
<p>
<label for="Occupation">OCCUPATION:</label>
<input name="Occupation" type="text" id="Occupation" form="form2" size="100" maxlength="40">
</p>
<p>
<label for="Organisation">ORGANISATION:</label>
<input name="Organisation" type="text" id="Organisation" form="form2" size="97">
</p>
<p>
<label for="Address">ADDRESS:</label>
<input name="Address" type="text" id="Address" form="form2" size="105">
</p>
<p>
<label for="email:">EMAIL:</label>
<input name="email:" type="email" id="email:" form="form2" size="109">
</p>
<p>
<label for="Telephone">TELEPHONE:</label>
<input name="Telephone" type="tel" id="Telephone" form="form2" size="102">
</p>
<u><p><strong>PAYMENT MODE</strong></p></u>
<u><p><strong><span style="color: #F00">Bank Account Details </span></strong></p></u>
<p><strong><span style="color: #F00">Bank - Zenith Bank Nig Plc.</span></strong></p>
<p><strong><span style="color: #F00">Account Name:- Lead Vision Concepts</span></strong></p>
<p><strong><span style="color: #F00">Account Number:- </span></strong></p>
<table width="200">
<tr>
<td><label>
<input name="Bank" type="radio" id="PaymentType_0" form="form2" value="radio">
BANK (ZENITH)</label></td>
</tr>
<tr>
<td><label>
<input name="Direct_Payment" type="radio" id="PaymentType_1" form="form2" value="radio">
DIRECT (CASH)
</label></td>
</tr>
</table>
<p>
<label for="Teller No.">TELLER NO:</label>
<input name="Teller No." type="text" id="Teller No." form="form2" size="40">
<label for="Amount Paid">AMOUNT PAID:</label>
<input name="Amount Paid" type="text" id="Amount Paid" form="form2" autocomplete="on" size="40">
</p>
<p>
<input name="submit" type="submit" id="submit" form ="form2" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset">
</p>
</form>
Use this PHP code on sendresult.php
<?php
foreach($_POST as $key=>$value){
echo "{$key}: {$value}<br />";
}
?>

Creating a comples form in html

i'm making a html form from a pdf file. Attached is a screenshot
The input fields was different width. Is there a better way to do this form using css or jquery for the width.
Here is my fiddle
http://jsfiddle.net/cancerian73/amW5c/
<p>
<label class="lbl1">Name: (as it appears on passport):</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">Address:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Apt.#:</label>
<input name="" type="text" class="inpt1" />
</p>
<p>
<label class="lbl1">City:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">State:</label>
<input name="" type="text" class="inpt1" />
<label class="lbl1">Zip:</label>
<input name="" type="text" class="inpt1" />
</p>
Thanks
San

HTML form input steals focus/ focus gets shifted

For some reason the focus keeps getting shifted from any of the address field to the credit card field on my HTML form.
So onclick of address fields, the focus goes back to the credit card field.
It's probably something really simple, but can anyone help?
http://jsfiddle.net/xYbsz/
<form name='order-validation'>
<p><label>email: <input type="email" title="email" id="emailAddress" name="email" value=""></label></p>
<p>
Phone: <select name="countrycode" style="display: inline;">
<option value="44" selected>UK (+44)</option>
<option value="1">USA (+1)</option>
<option value="213">Algeria (+213)</option>
</select><input type="tel" name="phone" id="id_tel" required pattern="(\+?\d[-.]*){7,13}" title="international, national or local phone number"/></p>
<img class="cc-img" id="visa-card-img" src="visa.jpg" />
<img class="cc-img" id="mastercard-card-img" src="mastercard.jpg" />
<img class="cc-img" id="amex-card-img"src="american-express.jpg" />
<p><label>credit card: <input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
<img class="cc-security-code" id="visa-sec-code" src="cvv.gif" />
<img class="cc-security-code" id="amex-sec-code" style="display: none;" src="amex-sec-code.gif" /><br />
Address:
<input type="text" name="newCreditCardStreet" size="35" tabindex="5" value="" id="id_creditCardStreet"><br />
Town/City:
<input type="text" name="newCreditCardLocality" size="35" tabindex="5" value="" id="id_creditCardLocality"><br />
Country:
<input type="text" name="country" id="id_country">
<p><input type="button" name="submit" value="Submit" /></p>
<p id="test"></p>
</form>
The label tag for cc_number is not closed.
<label for="cc_number">credit card:</label>
<input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
Also I noticed in the markup the label tags are wrapping the inputs. This is unnecessary:
<label>email:
<input type="email" title="email" id="emailAddress" name="email" value="">
</label>
Instead use the for attribute:
<label for="emailAddress">email:</label>
<input type="email" title="email" id="emailAddress" name="email" value="">
Working Example http://jsfiddle.net/xYbsz/1/

One, two, skip a few...tabindexes, that is

The problem: In my HTML sign-up form, I have 18 elements. Each element has a tabindex, starting with the first text input at 1 to the last form element at 18.
When I start out with the first text input, fill out the information and then tab . . . it goes nowhere. At least, that's what it seems to me. Then I tab again, and it goes to text input with tabindex="2" and I have no idea why this is. I get into one form field, then I have to tab 2 x to get to the next.
This is how half of the form reacts. This form is spread out over two columns. There are no elements that would separate the left part of the form from the right part of the form -- except for the layout, of course. The kicker is that the right part of the form behaves correctly. What gives?
And here's the pertinent code:
<form id="form1" name="form1" class="bsf-form topLabel page1" autocomplete="off" enctype="multipart/form-data" method="post" novalidate><!--534-->
<div id="billing-form-columns" class="row"><!--536-->
<div id="billing-column-1" class="span8"><!--537-->
<!--legend>Billing Information</legend-->
<!--div class="sub-legend">Please provide your billing and payment information.</div-->
<!-- ERRORS -->
<div id="errors" class="alert alert-error">
<!--button type="button" class="close" data-dismiss="alert">×</button-->
<div class="err-info"><span class="err-txt">Please address the following issues before the order can be placed:</span></div>
<div class="error-columns clearfix">
<div class="err-col-left"></div>
<div class="err-col-right"></div>
</div>
</div>
<!--SUCCESS-->
<div id="success" class="alert alert-success"></div>
<div class="row-fluid height60">
<label class="desc" for="companyName">Company Name<span class="req">*</span></label>
<input type="text" id="companyName" name="companyName" class="input-xxlarge xxlarge-redux focus" value="" tabindex="1" placeholder="" title="Enter the name of your company" />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="firstName">Full Name<span id="req_2" class="req">*</span></label>
<input type="text" id="firstName" name="firstName" class="input-large" value="" tabindex="2" placeholder="" title="Enter your first name. If there is another name on the credit card, you can enter that below with the credit card information." />
<input type="text" id="lastName" name="lastName" class="input-large" value="" tabindex="3" placeholder="" title="Enter your last name. If there is another name on the credit card, you can enter that below with the credit card information." />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="address">Address<span class="req">*</span></label>
<input type="text" id="address" name="address" class="input-xxlarge xxlarge-redux" value="" tabindex="4" placeholder="" title="Enter your billing address"/>
</div><!--/row-->
<div class="row-fluid height45">
<label class="desc" for="address2"></label>
<input type="text" id="address2" name="address2" class="input-xxlarge xxlarge-redux" value="" tabindex="5" placeholder="Address 2 (optional)" title="This field for a second address (suite, apartment, department, etc.) is optional"/>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="city">City<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="spr1">State / Province / Region</label></span>
</div>
<input type="text" id="city" name="city" class="input-large" value="" tabindex="6" placeholder="" title="Enter the city for your billing address" />
<input type="text" id="spr1" name="spr1" class="input-large" value="" tabindex="7" placeholder="" title="Enter the state, province or region associated with your credit card" />
</div><!--/row-->
<div class="row-fluid clearfix" id="city-state">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="pzc">Postal / ZIP Code<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="country">Country<span class="req">*</span></label></span>
</div>
<input type="text" id="pzc" name="pzc" class="input-large" value="" tabindex="8" placeholder="" title="Enter the Postal or ZIP Code associated with your credit card" />
<select id="country" name="country" class="width210" tabindex="9" title="Select the name of the country associated with your credit card" >
<option value="" selected="selected"></option>
<option value="US" >United States</option>
<option value="UK" >United Kingdom</option>
<option value="AU" >Australia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="emailField">E-mail<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="phoneIntl">Phone Number<span class="req">*</span></label></span>
</div>
<input type="text" id="emailField" name="emailField" class="input-large" value="" tabindex="10" placeholder="" title="Enter a valid e-mail address" />
<input type="text" id="phoneIntl" name="phoneIntl" class="input-large" value="" tabindex="11" placeholder="" title="Enter a valid phone number where we can reach you" />
</div><!--/row-->
</div><!--537-->
<div id="billing-column-2" class="span8"><!--860-->
<div class="cc-validator clearfix">
<div class="row-of-cards height60 clearfix">
<span class="visa">Visa</span>
<span class="mastercard">MasterCard</span>
<span class="amex">American Express</span>
<span class="discover">Discover</span>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" for="card_number">Credit Card Number<span class="req">*</span></label>
<input type="text" id="card_number" name="card_number" class="input-medium focused width210" value="" tabindex="12" placeholder="Credit Card Number" title="Enter a current and valid credit card number for any of the cards listed above." />
</div>
<div class="row-fluid height60 clearfix">
<div class="label-two-apart clearfix">
<span class="desc-left-apart-269"><label class="desc" for="expiry_date">Expiration Date<span class="req">*</span></label></span>
<span class="desc-right-apart-left"><label class="desc" for="cvv">Security Code<span class="req">*</span></label></span>
</div>
</div>
<div class="input-two-apart-850 clearfix">
<div class="input-left-apart clearfix">
<span class="month-year">
<select id="month-list" name="month-list" tabindex="13" title="Select the credit card expiration date (month and year)."></select>
<select id="year-list" name="year-list" tabindex="14" title="Select the credit card expiration date (month and year)."></select>
</span>
<span class="cvv-code">
<input type="text" id="cvv" name="cvv" class="input-mini" maxlength="3" value="" tabindex="15" placeholder="" title="Enter the security code from the back of your credit card. If you have an American Express card, the security code is on the front of the card." />
</span>
</div>
<div class="input-right-apart clearfix"></div>
</div>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-name-on-cc-card" for="name_on_card">Name on Credit Card<span class="req">*</span></label>
<input type="text" name="name_on_card" id="name_on_card" class="input-medium focused width210" value="" tabindex="16" placeholder="" title="Enter the name as it appears on the credit card"/>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password1" for="password1">Password<span class="req">*</span></label>
<input type="password" name="password1" id="password1" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Enter a password containing uppercase and lowercase characters, numbers and special characters such as !, #, #, $, _ and %" />
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password2" for="password2">Re-enter Password<span class="req">*</span></label>
<input type="password" name="password2" id="password2" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Repeat the password you entered above" />
</div>
<div class="row-fluid clearfix" id="agreement">
<label class="desc">Agreement<span class="req">*</span></label>
<input type="checkbox" checked="checked" tabindex="18" value="I accept ACME INC's Terms and Conditions" class="field checkbox" name="acceptTerms" id="acceptTerms" title="You need to accept our Terms and Conditions before you can place your order.">
<label for="acceptTerms" class="choice">I accept the ACME INC <a target="_new" href="/terms.php">Terms and Conditions</a></label>
</div>
<div class="form-actions form-actions-plus">
<div class="btn-align-right"><button type="submit" class="btn btn-primary" id="bsfSubmit" tabindex="18">Accept Billing Information and Continue</button>
</div>
</div>
<input type="hidden" name="telephone" />
<input type="hidden" name="jsn" />
<input type="hidden" name="ctt" />
</div>
</form>
Really, all I need is another set of eyes to tell me where I might have got it wrong. thanks.
Turns out that removing all the tabindex tags did about 90% of the work. No problems anymore as far as getting from one form element to another.
The culprits were:
1) Other forms on the same page, and me thinking that tabindex is per form instead of per page.
2) Select2 assigns a tabindex of -1 to each select element it replaces. So tabbing to a select2 drop-down, as well as tabbing away from it, can cause random spastic web browser behavior.
Solution for #1: Remove all tabindex tags in all forms.
Solution for #2: Write a piece of JavaScript to make sure select2 elements always receive the focus, when you tab to it from the previous element, and make sure select2 elements always pass on the focus to the next form element.
// COMING FROM THE ELEMENT IMMEDIATELY BEFORE THE SELECT2:
$('#postalCode').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#s2id_country a');
if(input !== undefined){
input.focus();
}
}
});
// THEN FROM THE SELECT2 TO THE NEXT FORM ELEMENT
$('#s2id_country a').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#emailField');
if(el.length){
el.focus();
}
}
});
Perhaps there is a more elegant solution for this. Come to think of it, there might even be a possibility of writing a function and using jQuery lingo to find the next and previous elements. At any rate, thanks to everyone who has helped me figure this one out.