Updating value of text field

JavaScript
1

I’ve added this to a site I’m working on but want to send the card type to be included when the form is submitted but don’t know how to update the input value when the card number is entered.

At the moment I’ve got a span class which shows the card image (done using the above example) and then the user has to select their payment method before the form will send. How do I change it so that the type is added to a hidden text field?

2

Does anybody have any suggestions please?

Thanks

3

I’m a bit out of my depth here but as no one else has answered yet could you not check whether the span has a certain class added and then update the hidden input when you submit.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<form id="myform">
		<span class="card maestro"></span>
		<input type="hidden" name="hiddenField" id="hiddenField">
		<input type="submit" name="sbmit" id="sbmit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$("#myform").submit(function(event) {
    var el = $('.card');
    var creditCard = "unknown";
    if (el.hasClass('mastercard')) {
        creditCard = 'mastercard'
    }
    if (el.hasClass('visa')) {
        creditCard = 'visa'
    }
    if (el.hasClass('maestro')) {
        creditCard = 'maestro'
    }
    $(hiddenField).val(creditCard)
});
</script>
</body>
</html>
4

Thanks, I’ll give that a go

5

I don’t know if I’m doing something wrong but I can’t get this to work. This is what I’ve got but it’s not updating:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
</head>

<body>
<form id="wp-form">
		<span class="card maestro"></span>
<input type="hidden" name="wp-cardType" id="wp-cardType">
		<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script type="text/javascript">
$("#wp-form").submit(function() {
var el = $('.card');
var creditCard = "unknown";
if (el.hasClass('diner')) {
creditCard = 'DINER'    }
if (el.hasClass('visa')) {
creditCard = 'VISA'    }
if (el.hasClass('american-express')) {
creditCard = 'AMEX'    }
if (el.hasClass('jcb')) {
creditCard = 'JCB'    }
if (el.hasClass('maestro')) {
creditCard = 'MAESTRO'    }    }
if (el.hasClass('solo')) {
creditCard = 'SOLO'    }
$(cardType).val(creditCard)  
});
</script>
</body>
</html>
6

el is getting element(S) by class, not a single element by ID. Even if there is only ONE element with that class name, you need to index it to specify.

var el = $('.card');
...
if (el[0].hasClass('diner'))...

Also, I don’t see where the variable cardtype is being set…

$(cardType).val(creditCard)

If you mean the ID of ‘wp-cardType’ then that needs to be in quotes.

HTH,

:slight_smile:

7

Thank you, it now works :slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.