How can I set the Name attribute of an input field using Jquery?

Question

Quick question... I was wondering how I can get this to happen.

Okay I have an input field like such:

<input type="text" id="input1" size="10" name="" value="" class="checked other_amount" onfocus="Toggle('radio1', 'input1');" />

I would like to click on a div with an ID of #resetPrompt and fill the empty name attr from the input with "other_amount"

I'm out of ideas its been a long day

Thanks guys,

Matt

Solution 1

$('#resetPrompt').click(function(){
    $('#input1').attr('name', 'other_amount');
});

Solution 2

This is for all the googlers out there:

It should be noted that Alex's proposal, though functional in most "real" browsers, does not work in ie 8 and below (jquery 1.6.2). When setting the "name" attribute of an input field, Microsoft, to address a bug, added a fictitious "submitName" attribute when dynamic input fields are attached to the DOM.

To workaround the problem in ie, either force your users to upgrade, use Firefox, Chrome, etc. or you'll need to add the input field manually:

$("#resetPrompt").click(function(){
   $("#input1").remove();
   $("#input_container").append('<input id="input1" name="' + other_amount + "' type="text" class="checked other_amount" onFocus="Toggle(\'radio1\', \'input1\');" />');
});

Solution 3

If "other_amount" is the ID of the other input, use attr and val as follows:

$("#resetPrompt").click(function(){
    var otherValue = $("#other_amount").val();
    $("#input1").attr("name", "someName");
}

Solution 4

Assuming that "other_amount" is the name, not id of the corresponding input.

$('#resetPrompt').click( function() {
   $('#input1').attr('name', $('[name=other_amount]').val());
});

View more solutions

Comments

[esteewhy]

Confirm: cannot set @name attribute with $.name(.., ..) in MSIE7 -- input simply retains old value and nothing happens. Is it addressed in more recent jQuery ver?

[esteewhy]

As pointed earlier, this won't work in MSIE7 and older. Workaround is to rewrite inner line using .prop(..): $('#input1').attr('name', 'other_amount') || $('#input1').prop('name', 'other_amount');