Jquery manipulating input fields

Question

This is one of my first javascripts but this is what I am trying to do:

If javascript is disabled then have the paypal radio button selected and hide the option to change to credit card.
If javascript is enabled then the credit card option is enabled by default and you also have the option to pick paypal.
If the creditcard option is selected on the radio, the relevant fields are shown.

This is my attempt of the code from the information I have read online. Can anyone help me see why it isn't working?

http://jsfiddle.net/spadez/PceBr/4/

// IF JAVASCRIPT ENABLED...

// select card option by default
$('input:radio[name="creditcard"]').prop("checked", true);
// unhide payment options
$('#paymentchoice').removeClass('hidden');
// unhide card options
$('input:radio[name="creditcard"]').change(
if ($(this).is(':checked') {
    $('#card').removeClass('hidden');
}
});

I believe you should check out this [answer](http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled?page=1&tab=votes#tab-top) — Patsy Issa, Jul 12 '13 at 13:00
If you work with radio buttons, they should use the same name — Aurelio De Rosa, Jul 12 '13 at 13:00
True, but apparently people do it, and it stops my card payment system working so I want to accommodate for these people. — J.Zil, Jul 12 '13 at 13:00

score 1 · Answer 1 · answered Jul 12 '13 at 13:12

Try to set the same name attribute to your radiobuttons. Also, delete the class="hidden" given to your #card DOMElement, since you want the credit card option to be selected at first (seeing your JavaScript):

HTML

<div id="paymentchoice">Creditcard
    <input type="radio" name="paymentProcessor" id="creditcard" value="creditcard">Paypal</input>
    <input type="radio" name="paymentProcessor" id="paypal" value="paypal" checked="checked" />
</div>
<div id="card" >
    <input type="text" name="cardname">
    <input type="text" name="cardnum">
    <input type="text" name="cardcode">
    <select name="month">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
    </select>
    <select name="year">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</div>
<input type="submit" value="Submit">

JavaScript/jQuery

// IF JAVASCRIPT ENABLED...

/*Add the change() function FIRST, since you set the creditcard as selected option just after that */

// unhide card options
$('input[name="paymentProcessor"]').change(function () {
    if ($('#creditcard').is(':checked')) $('#card').removeClass('hidden');
    else $('#card').addClass('hidden');
});

// select card option by default
$('#creditcard').prop("checked", true);

// unhide payment options
$('#paymentchoice').removeClass('hidden');

Live Demo

score 1 · Accepted Answer · answered Jul 12 '13 at 13:12

You may solve it like this:

HTML

I changed the name of the radios to group them:

Creditcard <input type="radio" name="payment_method" value="creditcard">
Paypal <input type="radio" name="payment_method" value="paypal" checked>

JavaScript

var options = $('#card');
var method = $('input[name=payment_method]');

method.change(function() {
    if ('creditcard' == $(this).val() ) {
        options.show();
    } else {
        options.hide();
    }
});

$('input[value=creditcard]').prop('checked', true);
options.show();

Demo

Try before buy

Sbml · Answer 3 · 2013-07-12T14:30:06.947

Try this:

<style type="text/css">
.hidden{
    display:none;
}
</style>


<script type="javascript">
    $('input[name=payment]').change(function() {
    if($(this).val() == "creditcard"){
        $('#card').show();
    }else{
         $('#card').hide();
    }
});
</script>


<noscript>
<style type="text/css">
    .creditcard {display:none;}
</style>  
</noscript>

<div id="paymentchoice">
    <span class="creditcard">Creditcard
    <input type="radio" name="payment" value="creditcard"></span>
        Paypal<input type="radio" name="payment" value="paypal" checked>
</div>

<div id="card" class="hidden">
    <input type="text" name="cardname">
    <input type="text" name="cardnum">
    <input type="text" name="cardcode">
    <select name="month">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
    </select>
    <select name="year">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</div>
<input type="submit" value="Submit">

Or this:

http://jsfiddle.net/sbml/PceBr/10/

A little disadvantage of this is, that you'll always have CSS code within your HTML file. When changes need to be done you may have to edit three parts (CSS, JavaScript and HTML) instead of only two (CSS or JavaScript). — insertusernamehere, Jul 12 '13 at 14:13
@insertusernamehere Yes you are right, he could apply the class hidden to span creditcard and in javascript in top $('.creditcard').show(); — Sbml, Jul 12 '13 at 14:19

Jquery manipulating input fields

3 Answers3

HTML

JavaScript/jQuery

Live Demo