CODEWITHSUNDEEP
javascriptjqueryhtml
RyeGuy
RyeGuy

Reputation: 4483

Appending content upon button click

I am getting a reference error every time I try to run this fiddle.

The function is supposed to add another radio button to form.

Any help would be great.

Thanks

https://jsfiddle.net/RyeManship/2jtvjd28/

HTML

    <section class="content">
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <input type="text" class="form-control" placeholder="Type Question Here">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <input type="text" class="form-control" placeholder="Type Question Here">
  </label>
</div>
</section>
<div class="row">
  <button type="button" class="btn btn-success" onclick="javascript:AddQuestion()">Add</button>
  <button type="button" class="btn btn-danger">Remove</button>
  <button type="button" class="btn btn-info">Submit Question</button>
</div>

Javascript

function AddQuestion() {
$(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>');
};

Upvotes: 2

Views: 63

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

It's because your fiddle is setup incorrectly. When using an on* event attribute the function has to be within scope of the window, so you need to change 'Load Type' in the JS settings from onLoad to No Wrap - in <head>.

Fixed fiddle

Note that a much better solution entirely would be to not use any outdated event attributes at all and replace them with unobtrusive event handlers. This leads to a much better separation of concerns as the HTML and JS are now completely disconnected. As you're already using jQuery, here's how you can do that:

$(function() {
  $('.add').click(function() {
    $(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="content">
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      <input type="text" class="form-control" placeholder="Type Question Here">
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      <input type="text" class="form-control" placeholder="Type Question Here">
    </label>
  </div>
</section>
<div class="row">
  <button type="button" class="btn btn-success add">Add</button>
  <button type="button" class="btn btn-danger">Remove</button>
  <button type="button" class="btn btn-info">Submit Question</button>
</div>

Upvotes: 4

Related Questions