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');
}
});

If you work with radio buttons, they should use the same name — Aurelio De Rosa
– Aurelio De Rosa, Commented Jul 12, 2013 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
– J.Zil, Commented Jul 12, 2013 at 13:00

insertusernamehere · Accepted Answer · 2013-07-12 13:12:41Z

1

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

answered Jul 12, 2013 at 13:12

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff Noel · Accepted Answer · 2013-07-12 13:12:18Z

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

Sbml · Accepted Answer · 2013-07-12 14:30:06Z

1

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/

edited Jul 12, 2013 at 14:30

answered Jul 12, 2013 at 13:41

Sbml

1,9172 gold badges17 silver badges27 bronze badges

2 Comments

insertusernamehere Over a year ago

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).

Sbml Over a year ago

@insertusernamehere Yes you are right, he could apply the class hidden to span creditcard and in javascript in top $('.creditcard').show();

Collectives™ on Stack Overflow

Jquery manipulating input fields

3 Answers 3

Comments

HTML

JavaScript/jQuery

Live Demo

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

HTML

JavaScript/jQuery

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related