jQuery, dynamic name change of radio button

Question

Looking for something like:

$("input:radio:checked").previous("name", "original_name").attr("name","new_name");

I tried a few different seen around here but mostly get the error: Object Expected

Any help is appreciated.

Solution 1

As Ben S wrote in the comment to your original question, why do you need to change the name?

Let's say you have

<input type="radio" name="myRadio" id="radioChoice1" value="radioChoice1Value" />
<input type="radio" name="myRadio" id="radioChoice2" value="radioChoice2Value" />

If user selects 'radioChoice1' and clicks submit, browser will send

myRadio=radioChoice1Value to your CGI script. You can process this as you desire.

In case you insist on changing the name attribute, I am not sure what is the 'previous' method in your code.

Can you try,

$("input:radio:checked").attr("name","new_name");

And see if it works?

I can imagine that there could be cross browser problems if you try to change the name attribute. You can create a hidden input and store the name of the radio button selected by the user.

<input type="hidden" id="selectedRadioButton" />

$('#selectedRadioButton').val($("input:radio:checked").attr('name'));

EDIT:

Please post your HTML so that I can tell you what kind of values will be posted to CGI.

For example if you have

<input type="radio" name="transactionType" id="buy" value="buy" />
<input type="radio" name="transactionType" id="sell" value="sell" />

If user clicks on the first radio button 'buy', then in your CGI script value for 'transactionType' will be 'buy'.

Solution 2

Here's a jQuery script that does the job requested. I'm using it to rename all the input=text fields on a form. Though I'm not doing anything with radio or checkbox, I added the relevant case statements. Insert your radio/checkbox transforms as needed.

    function renameTextInputFields(ele) {
        var i = 0;
        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'text':
                    $(this).attr("name","textFieldNumber"+(++i));
                    break;
                case 'checkbox':
                case 'radio':
            });
    }

Call this method on a DOM element. Myself, I'm making a clone of a div within a form. The div has lots of text fields. I get the base element like so.

var clone = $('.classAssignedToMyDiv').clone(); 

It runs fine in both IE 8.x and Firefox 3.x

Solution 3

I agree with the others that there is a better solution than to rename the input.

Having said that, and to answer your original question - I suggest that you assign ids to your radio inputs, and then use this code:

$("#inputId").attr("name","new_name");

I don't understand your use of .previous() - I can't find it in the jQuery documentation.

Comments

[Ben S]

Mind if I ask why you'd like to dynamically change the name of a radio button?

[T.T.T.]

I have two different actions available for the 1 selected input.

[Ben S]

I fail to see how that requires renaming a radio button.

[T.T.T.]

The input is being sent to a cgi. I need to distinguish the name of the radio button selected with a different submit, for different functionality, don't want more radio buttons on the UI.

[Ben S]

Why don't you just check to see if the radio button is checked in the cgi? If was checked, then its name would have changed, you're in the same state. Also, what if your users aren't using javascript? Then your page breaks.

[T.T.T.]

Well, is there a better way? Say you have a selection of radio buttons (yes, can only select one) stock1, stock2, stcok3, stock4. Then the option (submit) to buy more or sell......

[Ben S]

Why don't you have a radio button group for buy/sell and a multiple select box or checkboxes for the stocks?

[T.T.T.]

"and a multiple select box or checkboxes for the stocks?" <--then that would mean they could select more than 1 stock. Should only be able to select 1

[T.T.T.]

$("input:radio:checked").attr("name","new_name"); object error

[T.T.T.]

how would the cgi know to execute the buy or sell function with myRadio=radioChoice1Value? What differentiates that?

[SolutionYogi]

That was just an example. Post your HTML so that we can discuss more. Also, I updated my answer with another example.