CODEWITHSUNDEEP
jquery
Jason
Jason

Reputation:

JQuery - create NEW radio buttons

Ok here's what I have so far.. thanks to Paolo.
And it works fine, but only if I have existing radio button options.

What if I need to create a NEW radio button without any pre-existing ones?

Ultimately what I want to do is create an array of options, loop through them and output a list of options as radio buttons. So originally, there will be NO radio buttons within the 'abc' div.

Thanks in advance!

<script>
$(document).ready(function() {
  // add a new input when a new color is chosen, for example
  $('#aaa').change(function() {
      var radio = $('<input>').attr({
          type: 'radio', name: 'colorinput', value: '2', id: 'test'
      });
      $(':radio:last-child', '#abc').after(radio).after('option 3 ');
  });
});

</script>

<form id='abcdef'>
  <select id="aaa">
    <option>red</option>
    <option>blue</option>
    <option>other</option>
  </select>

  <div id="abc">
    Input<BR>
    option 1 <input type="radio" name="colorinput" value="1" /> 
    option 2 <input type="radio" name="colorinput" value="2" /> 
  </div>
  <BR>
</form>

Upvotes: 4

Views: 20231

Answers (3)

cletus
cletus

Reputation: 625077

Ok given your updated question, this should do it (or be pretty darn close):

  $(function() {
    $("#aaa").change(function() {
      $('<input type="radio" name="colorInput" id="test" value="2">')
        .appendTo($("#abc")).before('Option 3');
    });
  });

Things to bear in mind:

  • You can construct the HTML directly in the jQuery constructor;
  • I assume you will be using dynamic IDs, values and labels. That's simply a question of concatenating strings and variables in the expression;
  • You probably need to check for duplicates (not covered above);
  • If you're putting them in a div like you seem to, after the approach above rather than what I originally suggested (ie $(":radio:last")) as its faster and clearer and doesn't rely on their being a radio button in existence already; and
  • Newly constructed HTML elements won't have any relevant event handlers on them unless you're using the jQuery 1.3 live() event handler.

Upvotes: 6

bendewey
bendewey

Reputation: 40235

Instead of dealing with the after and trying using the append. This way you don't have to check for the last radio button and the functionality will work when there are 0 radio buttons at startup.

var radio = $('<input>').attr({
      type: 'radio', name: 'colorinput', value: '2', id: 'test'
  });
$('#abc').append(radio.after('option 3'));

Upvotes: 4

Scott Evernden
Scott Evernden

Reputation: 39926

$(":radio:last").after('<input type="radio" name="blah">');

Upvotes: 1

Related Questions