How to add / append html form elements with jQuery

问题

I have tried to append or add the form elements, i.e first name, last name, subscribe fields in the below code, on clicking the add button. I'am not clear how to append the group of form elements. Help me to find out the error.

$('.popup').on('click', function() {
  let value = $('#data').val();
  if (value) {
    $('#profileCard').append('<li>' + value + '</li>');
    $('#data').val('');
  }
  if ($('#checkbox').is(':checked')) {
    $('#checked').show();
    $('#unchecked').hide();
  } else {
    $('#unchecked').show();
    $('#checked').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="row" id="data">
  <div class="col-md-6 form-group">
    <label><b>Firstname</b></label>
    <input type="" class="form-control" id="fname" placeholder="Enter Firstname" required>
  </div>
  <div class="col-md-6 form-group">
    <label><b>Lastname</b></label>
    <input type="text" class="form-control" id="lname" placeholder="Enter Lastname" required>
  </div>
  <div class="col-md-12 form-group">
    <input type="checkbox" id="checkbox" class="mr-6" name="subscribe">
    <label><h6 ><b>Subscribe</b></h6></label>
  </div>
</form>
<div class="col-md-6 form-group">
  <button type="button" class="popup" data-trigger="focus">Add</button>
</div>
<div class="row">
  <ol id="profileCard" class="dis-none">
    <li>
      <div class="form-group">
        <label>Fullname: </label>
        <h5 id="fullname"></h5>
      </div>
      <div class="form-group">
        <label>Status: </label>
        <h5 class="dis-none" id="checked">Subscribed</h5>
        <h5 class="dis-none" id="unchecked">Not Subscribed</h5>
      </div>
    </li>
  </ol>

回答1:

For simplicity sake, take a look at this.

$('.popup').on('click', function() {
  const fullname = $('#fname').val() + " " + $('#lname').val()
  const subscribed = $('#checkbox').is(':checked') ? 'Subscribed' : 'Not Subscribed'
  if (fullname.length) {
    $('#profileCard').append('<li><div class="form-group">Fullname: ' + fullname + '</div><div class="form-group">Status: ' + subscribed + '</div></li>');
    $('#data')[0].reset()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="row" id="data">
  <div class="col-md-6 form-group">
    <label><b>Firstname</b></label>
    <input type="" class="form-control" id="fname" placeholder="Enter Firstname" required>
  </div>
  <div class="col-md-6 form-group">
    <label><b>Lastname</b></label>
    <input type="text" class="form-control" id="lname" placeholder="Enter Lastname" required>
  </div>
  <div class="col-md-12 form-group">
    <input type="checkbox" id="checkbox" class="mr-6" name="subscribe">
    <label><h6 ><b>Subscribe</b></h6></label>
  </div>
</form>
<div class="col-md-6 form-group">
  <button type="button" class="popup" data-trigger="focus">Add</button>
</div>
<div class="row">
  <ol id="profileCard" class="dis-none">
    
  </ol>

回答2:

var data = {items: [
    {id: "1", name: "abc", type: "xyz"}
]};

$('button').on('click',function(){
    var name = $('#name').val();
    var type = $('#type').val();
    var id = parseInt(data.items[data.items.length-1].id)+1;
        
    data.items.push({"id":id.toString(), "name":name,"type":type});
    console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="name"/>
<input id="type"/>
<button>add</button>

I guess you were looking for this!

来源：https://stackoverflow.com/questions/53323278/how-to-add-append-html-form-elements-with-jquery

标签

javascript

jquery

html