CODEWITHSUNDEEP
htmlformsgoogle-chromecredit-cardautofill
Eric M
Eric M

Reputation: 61

Chrome Credit Card Autofill Field Name Bug/Conflict

Does anyone know why a form field name would cause Chrome's autofill to stop working correctly? If you open the fiddle I've created in Chrome, you'll notice the Card Number field populates correctly, but not the expiry month and year. If you change the name of the BirthDate.MM select list to BirthDate.Foo and BirthDate.YYYY to BirthDate.Bar; and then and re-run, the credit card autofill works as expected. Now, an obvious suggestion would be to simply disable the bday- autofill and change the those values to "off" or completely remove the autocomplete attribute. Astoundingly, removing the autocomplete attribute or changing the bday- values to "off" on those fields then breaks the address autofill!!!

The solution to the autofill problem itself is simply change the field names. What I want to know is why? Can anyone clarify how I unwittingly poked Chrome's field name sniffing feature?

<fieldset>
    <legend>Payment Information</legend>
    <div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
    <div>
        <label for="CreditCard_ExpirationMonth">Expires:</label>
        <select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
            <option value="">Year</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
            <option value="2027">2027</option>
            <option value="2028">2028</option>
            <option value="2029">2029</option>
            <option value="2030">2030</option>
            <option value="2031">2031</option>
            <option value="2032">2032</option>
            <option value="2033">2033</option>
            <option value="2034">2034</option>
            <option value="2035">2035</option>
            <option value="2036">2036</option>
            <option value="2037">2037</option>
        </select>
    </div>
</fieldset>

Upvotes: 2

Views: 1105

Answers (1)

gatsby
gatsby

Reputation: 1229

Use the lower-case version of your names.

For me , using Name as name attribute is not working, autofill recognizes the field as CC !!

If I change it to name , works like a charm.

Hope this helps!

Upvotes: 0

Related Questions