Question

I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.

Here is the code I’m using for the radio select:

<script>
$(document).ready(function() {
    $("input[name$='sel']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#sel" + test).show();
    });

    if (test == "CreditCard") {
        $("#card").addClass("validate[custom[card]] text-input");
    } else {
        $("#card).removeClass("validate[custom[card]] text-input");
    }
});
</script>

Field code:

<table><tr><td>

<p>
Credit/Debit Card<lable  style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel"  value="CreditCard" />
</p> 
<p>
Paypal<input type="radio" id="sel"  name="sel" value="Paypal"   />
</p>
<p>
Wire Transfer<input type="radio" id="sel"  name="sel" value="WireTransfer"  />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">

<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
        <input name="card"   type="text"  id="card" value=""  style="width:85px;" />  
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
    paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">

Transfer

</div>
<!====================================================================================>
</td></tr></table>
​

This is the attribute that needs to be inserted to the “card” input field:

class="validate[custom[card]] text-input"

When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.

Link for fiddle:
FIDDLE

Answer 1

telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.

but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/

just click “Credit/Debit Card” and the class nowitsadded wil be added to the input field, which will turn red.

HTML

<input type="radio" id="sel1" name="sel"> Credit/Debit Card

<br>

<input type="radio" id="sel2" name="sel"> Paypal

<br>

<input type="radio" id="sel3" name="sel"> Wire Transfer

<br>
<br>

<div id="selCreditCard" class="desc">
    Card Number <input name="card" type="text" id="card" value="">
</div>

JS

$('#sel1').click(function() { $('#card').addClass('nowitsadded') })

CSS

.nowitsadded {background-color: red}