latest stable versions: v150827 (changelog)

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

convert expiration date to drop down boxes?

Home Forums Community Forum convert expiration date to drop down boxes?

This topic contains 8 replies, has 3 voices. Last updated by  Anton Karbanovich 4 years, 2 months ago.

Topic Author Topic
Posted: Saturday Oct 27th, 2012 at 5:48 pm #29939
Username: wellwater

s2member requires the user to type their credit card expiration date as mm/yyyy. Is there anyway to convert this field into separate drop-down month and year boxes?

List Of Topic Replies

Viewing 8 replies - 1 through 8 (of 8 total)
Author Replies
Author Replies
Posted: Monday Oct 29th, 2012 at 2:03 am #29996

That’d require editing the JavaScript for the pro-form, as well as the back-end where the card’s info is forwarded to the payment gateway.

I’ll mention this to Jason as a feature request, though. Thanks! :)

Posted: Monday Oct 29th, 2012 at 3:18 am #29997
Username: wellwater

Hi Cristián. Thanks. I believe having a drop down instead of the text field for the expiration date would be a great addition/feature change. I believe it could have a positive impact on potential cart/order abandonment from the more casual impulse buyers. Expiration date drop-downs are pretty standardized and having it as a text field seems to be a significant deviation from the norm.

Posted: Tuesday Oct 30th, 2012 at 6:53 am #30137

This is just a front end solution. that is not really nice and clean… but thats what i had to do to satisfy my customers desire. place this code in the head of the website and make sure you have the jquery.

it hides the input field and adds two dropdowns to the div#s2member-pro-authnet-update-form-card-expiration-div
(change that name if you are using different then forms). then on the change of the select fields it changes the value of the hidden input field to the value that we have month/year.

just a question to Cristian. i am not able to test it since it a paid website… is there anything that would prevent this solution from working.

$('input.s2member-pro-authnet-card-expiration').hide().parent().append('<select id="exp_month" style="width: 100px;"><option>Month</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select> / <select id="exp_year" style="width: 100px;"><option>Year</option><option>2012</option><option>2013</option><option>2014</option><option>2015</option><option>2016</option><option>2017</option></select>');

$('select#exp_month, select#exp_year').change(function(){

Posted: Tuesday Oct 30th, 2012 at 3:25 pm #30192

Thanks for that, Anton! I don’t know JavaScript, so I’ll email Jason to ask if it’d cause any trouble to use this hack. :)

Posted: Tuesday Oct 30th, 2012 at 10:44 pm #30231
Username: wellwater

Thanks as well, Anton, for the code.

It looks like it would have to be updated with code that checks the hidden expiration date value for an existing value, such as when the form reloads, then select those values in the dropdowns. I’m also concerned about any validation collisions that can occur, such as s2member attempting to validate, server-side, if the expiration date is expired or not (ie, Jan-2012).

Finally, the hidden input would have to at least be pre-populated with an initial month and year combo or else the native s2member javascript validation will say that’s it’s empty on submit, even though the select boxes would have a month and year selected by default.

I certainly think the code is workable, but I’m a little hesitant to use it in a production environment as-is.

  • This reply was modified 4 years, 2 months ago by  TJ.
  • This reply was modified 4 years, 2 months ago by  TJ.
Posted: Thursday Nov 1st, 2012 at 3:54 am #30302

TJ thanks for the feedback.
i will definitely consider that. i mean its a dirty solution, i dont deny that. but thats as good as i can come up with.
can you maybe give more detailed example of come on how to accomplish the following functionality?

Posted: Thursday Nov 1st, 2012 at 11:11 pm #30387
Username: wellwater

Hi Anton,

Sure. Your drop-downs show January and 2012 by default. What if someone submits the form without changing those values? This would prevent your “on change” event from ever firing and populating the hidden input text field with “01/2012”. You’ll either have to 1) pre-populate the hidden input text with something such as “01/2012”, 2) insert the value on form submission (while not colliding with s2member’s own javascript validation script), or 3) put blank options at the top which would signal to the user that something needs to be chosen. But if you took the third approach you risk s2member’s javascript validation saying that “mm/yyyy” needs filling out, which could confuse the user.

s2member has its own javascript validation that fires on form submission, but it also performs server-side validation, such as a during a failed transaction. After a server-side validation error occurs, the form is reloaded with the fields pre-populated with what the user already filled in. The expiration date is one of those fields. So you’ll have to grab what’s in the hidden text input field and set your drop-downs to match it.

This is all alot of work and prone to risk, which is why I think it would be safest for this functionality to be in s2member’s core.

Posted: Monday Nov 5th, 2012 at 8:02 am #30629

thanks for the reply.
i think i can accomplish all all the objections that you have mentioned above with js. so i will let you know.

well i really with is would be in the s2member core… but my customer would not accept that kind of excuse. so have to come up with something better while waiting on s2member update.


Viewing 8 replies - 1 through 8 (of 8 total)

This topic is closed to new replies. Topics with no replies for 2 weeks are closed automatically.

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

Contacting s2Member: Please use our Support Center for bug reports, pre-sale questions & technical assistance.