Changing text field value

[sonicthehedgehog]

How do I change this so that it updates the value of a text field when particular number (credit card)?

$("span#type").removeClass().addClass("card " + card.type).fadeIn('fast');

I want it to change the value of text field with the id payment-card to the card type which is determined by the card number. That bit I've already done but I don't know how to change the text value too.

The card types are

SOLO

VISA

AMEX

MASTER

DINER

[justsomeguy]

You need to add some context. Are you using something else to detect the card type? What is "the text value" that you're trying to change?

[sonicthehedgehog]

I'm using this to detect the card: http://www.whynot.io/detect-card-js/ and want to send the card type when the form is sent. I thought that the best way of doing this was to have a hidden text field that have the card name as a value when the number if entered in the card number field.

[justsomeguy]

The documentation on Github shows a cardChange event that you can use to update whatever you want.

[sonicthehedgehog]

I know I'm probably being dumb but I didn't understand how to adapt it to get it working for a text field

[justsomeguy]

It's already using a text field in the example, you type into the text field. You target the text field and call the detectCard method on it to do the auto-detection, and use the cardChange event to update your page when the card number changes. That's what they show here:

$("input#cardNumber").detectCard().on("cardChange", function(e, card) {}

input#cardNumber is their text field, they call the detectCard method on that field, and then attach a cardChange handler to update the page when the card number changes. The card object contains information about the number and card type they entered, that gets passed to the cardChange handler. You can use console.log(card) to send that card object to the developer console so you can see all the properties and methods on it, and you can write whatever other code in the handler to update the page however you want, like putting the card type in a hidden input.

[sonicthehedgehog]

I did try that but it didn't work. I want to have an additional text field that sends the card type as well as the one that has the cad number

[dsonesuk]

I would have thought that you could create a hidden input

<input type="hidden" value="" id="card_type_text" name="card_type_text">

Then use code similar to

$("input#cardNumber").detectCard().on("cardChange", function(e, card) {$("input#card_type_text").val(card.type).toUpperCase();});

[sonicthehedgehog]

Thank you, it now works perfectly!! Can I ask though, what does toUpperCase() do?

[dsonesuk]

card.type i thought returned lowercase card type, but you want in post #1

 

SOLO

VISA

AMEX

MASTER

DINER

so .toUpperCase() would change card.type value to uppercase

[sonicthehedgehog]

Thank you, yes I did want it to be uppercase, I'd just never come across that before