PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Auto tab fields

  1. I'm trying to create a credit card field with 4 inputs with maxlength=4 that auto-tab.

    Since the built in credit card field has only one input, and doesn't actually save the card number (yes I'm aware of the security issues and we will meet security standards when the site goes live) I'm using the list field with 4 columns to create my field. Then I've used the gform_column_input_content filter to add maxlength=4.

    My problem now is that I can't seem to get any javascript to hook into those fields. I'm using

    <script type="text/javscript">
    jQuery(function() {
    	jQuery('#field_4_15 input').keyup(function(){
    		if (jQuery(this).val().length == jQuery(this).attr("maxlength")) {
    			jQuery(this).next('input').focus();
    		}
    	});
    });
    </script>

    To move to the next field, but even just putting a simple alert on the keyup event isn't working.

    Is there anything in the Gravity Forms javascript that could be inhibiting this? Can anyone see if I'm doing anything wrong? I'm not getting any errors with it, it just isn't doing anything.

    My test site is http://kristarella.dreampowercostumes.com/
    The actual form is in the checkout procedure, if you want to see the form please add something to the cart and navigate through the checkout pages (choosing credit card payment) until you see a credit card form.

    Posted 8 years ago on Friday December 7, 2012 | Permalink
  2. Hi, do you still need help with this one? I tried putting an item in the cart and getting to credit card payment, but whenever I selected the credit card radio button and clicking next, I got an error on the next page about missing a step.

    If you need assistance still, please let us know. This one scrolled off our radar. Sorry about that.

    Posted 8 years ago on Wednesday January 2, 2013 | Permalink
  3. Hi, thanks for the reply.

    Yes, I do still need help. I still can't interact with the field via jQuery at all so far.

    I just went through the checkout and it all worked for me; the only thing that could be missed that would matter is the shipping details... I'm not sure why a warning wouldn't be more specific or come up earlier. I've updated a bunch of stuff today, so maybe the updates helped. Please let me know if you get more errors.

    Posted 8 years ago on Thursday January 3, 2013 | Permalink
  4. I did notice you have text/javascript misspelled (javscript) but I don't know if that affects anything other than validation.

    I took a look at this and can confirm that the jQuery is running (I moved the alert inside the function and can display the number of characters that have been entered):

    [js]
    alert ((jQuery(this).val().length) + ' characters entered.');

    I can also move the cursor to another input field by ID without using the .next:

    [js]
    jQuery('#input_4_12').focus();

    If you look at the list field, you can see that the tabindex for each list field has a gap (they are 2, 4, 6, and 8). And also you can see all the column and list markup. I suspect that the .next construct is not working because of this additional markup. However, I'm no JavaScript expert and I can't tell you how to fix this. I think we did narrow the problem down.

    Maybe you can use some other method for finding all the inputs with a name of input_15[] and loop through those?

    Posted 8 years ago on Thursday January 3, 2013 | Permalink
  5. Thanks so much for your reply!

    It actually was the misspelling of javascript that was preventing me from doing anything, even a simple alert, with my function! Browsers are actually a bit finicky when it comes to the types of script and styles.

    Anyway, my other problem was that .next() traverses siblings and the inputs are in table cells, so I had to traverse up and then down with jQuery(this).parent().next().children("input").focus();
    Not sure if that's a horrible way to do it, but it's working, which is nice.

    Posted 8 years ago on Thursday February 7, 2013 | Permalink
  6. That's not horrible. At least it's working for you. Thanks for the update.

    Posted 8 years ago on Thursday February 7, 2013 | Permalink