search

kenkeiter / skeuocard

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.
http://kenkeiter.com/skeuocard/
MIT License
3.23k stars 231 forks source link

Does not work with bootstrap form html layout #108

Closed coderdave closed 11 years ago

coderdave commented 11 years ago

For example, if I change the select box html to:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
      <div class="controls">
        <select id="card_type">
          <option value="">...</option>
          <option value="visa">Visa</option>
          <option value="discover">Discover</option>
          <option value="mastercard">MasterCard</option>
          <option value="maestro">Maestro</option>
          <option value="jcb">JCB</option>
          <option value="unionpay">China UnionPay</option>
          <option value="amex">American Express</option>
          <option value="dinersclubintl">Diners Club</option>
        </select>
      </div>
  </div>

I get the following error: Uncaught TypeError: Cannot read property 'length' of undefined

It would be nice if the no-js html was customizable so that the fallback form will look decent in bootstrap (or whatever framework one might be using).

kenkeiter commented 11 years ago

The issue that you're encountering is that you've changed the the select element's id attribute without letting Skeuocard know about it. When you instantiate a new Skeuocard instance, you should provide the typeInputSelector a value of something like: '[name="cc_type"]'.

The only thing you need to do is ensure that all of the required fields are within a containing element of some sort, and that the containing element is passed to Skeuocard upon instantiation.

As a side note, you can find this information under the Changing Underlying Value Selectors header in README.md.

coderdave commented 11 years ago

Sorry, I should have shown the default layout because I'm using custom fields.

It also breaks when using the default field names:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
    <div class="controls">
      <select name="cc_type">
        <option value="">...</option>
        <option value="visa">Visa</option>
        <option value="discover">Discover</option>
        <option value="mastercard">MasterCard</option>
        <option value="maestro">Maestro</option>
        <option value="jcb">JCB</option>
        <option value="unionpay">China UnionPay</option>
        <option value="amex">American Express</option>
        <option value="dinersclubintl">Diners Club</option>
      </select>
    </div>
  </div>

The error occurs specifically on this line: https://github.com/kenkeiter/skeuocard/blob/master/javascripts/skeuocard.js#L172

MatayoshiMariano commented 9 years ago

It happens the same to me, any solution?