CODEWITHSUNDEEP
html
Barney
Barney

Reputation: 1848

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>

Upvotes: 0

Views: 932

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

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/

Upvotes: 3

Related Questions