1

The effect I want to achieve is that when I click the Add button, I can add a line of input to my form. I wrote a jQuery but when I clicked, the content quickly appeared and disappeared. How can I fix it?

$(document).ready(function() {
  $(".add_ac").click(function() {
    $(".choose_activity").clone().attr({
      class: "form-row"
    }).appendTo($("#activity_list"));
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col activity_input">
  <form>
    <div class="form-group">
      <label for="selectAge">Please Select Your Child Age Group</label>
      <select class="form-control" name="" id="selectAge">
        <option value="">Form 0 todo 4</option>
      </select>
    </div>
    <!-- choose activity and hours -->
    <div id='activity_list'>
      <div class="form-row choose_activity">
        <div class="col-5">
          <select class="form-control">
            <option value="0">Choose Activity</option>
          </select>
        </div>
        <div class="col-5">
          <input type="text" class="form-control" placeholder="How many hour this week?">
        </div>
        <div class="col-2">
          <button type="submit" class="btn btn-primary add_ac"> +Add</button>
        </div>
      </div>
      <br>

    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>
Iwo Kucharski
  • 3,735
  • 3
  • 50
  • 66
孔繁超
  • 11
  • 1

1 Answers1

3

The problem is with your button <button type="submit" class="btn btn-primary add_ac"> +Add</button>. Change type="submit" to type="button" will fix the problem, otherwise form will submit when you click this button.

See this document for more information about the button type attribute.

Saji
  • 1,374
  • 1
  • 12
  • 19