0

我试图在单击添加按钮时在下面的代码中附加或添加表单元素，即名字、姓氏、订阅字段。我不清楚如何附加表单元素组。帮我找出错误。

$('.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>

4

2 回答 2

1 

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>

我猜你在找这个！

于 2018-11-15T16:17:05.510 回答
1

为简单起见，看一下这个。

$('.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>

于 2018-11-15T17:16:05.363 回答