Page reloading with e.preventDefault + unable to appen more than once

Page reloading with e.preventDefault + unable to appen more than once

Hello,


I am struggling with 2 problems, the first one is that I can only run the "appen" function once, and then even if I keep clicking on the function, no more than 1 click of data is added(at least the external file is pulled correctly).


My second problem is that when I try to delete the appended data, the page delete the 2 fields from the external file but refresh the page while doing it

Any idea why I am experiencing both issues please?

Here is my code:


  1.         <div class="col-md-2"></div>
  2.         <div class="col-md-8">
  3.         <form action="" method="post" class="form">
  4.         <div class="form-group">
  5.         <label for="variantgroupname">Variant Group Name (ie: Size)</label>
  6.         <input type="text" class="form-control" placeholder="Variant Group name" name="variant_group_name">
  7.         </div>
  8.         <br> <br> <br>
  9.         <div class="form-group">
  10.         <label for="subvariantname">Sub Variant Name (ie: Small,Medium,Large)</label>
  11.         <input type="text" class="form-control" placeholder="Sub Variant Name" name="sub_variant_name[]">
  12.         </div>

  14.         <div class="form-group">
  15.             <label for="linktotoppinglist">Link Topping List</label>
  16.             <select name="toppinglist[]" class="form-control">
  17.         <?php
  18.             $stmt = $conn->prepare("SELECT id,value FROM vat_rates ORDER BY id");
  19.             $stmt->bind_result($id,$value);
  20.             $stmt->execute();
  21.             $stmt->store_result();
  22.             if($stmt->num_rows() > 0){

  24.             while ($stmt->fetch()) {
  25.             $s = "";
  26.             if(isset($_POST['selectvat']) && ($_POST['selectvat'] == $id))
  27.             {
  28.             $s = " selected";
  29.             }
  30.             echo "<option value='".$id."'".$s.">".$value."</option>";
  31.             }
  32.             }
  33.             $stmt->free_result();
  34.             $stmt->close();
  35.          ?>
  36.         </select>
  37.         </div>
  38.         <div class="input_fields_wrap">
  39.         <div class="load_fields"></div>

  41.         <button class="btn btn-success" id="add_field_button">Add More Fields</button>
  42.         <button class="btn btn-danger remove_field" id="#remove_field">Remove Field</button>
  43.         </div>
  44.         </form>
  45.         </div>
  46.         <div class="col-md-2"></div>





  1. <script>
  2.     $(document).ready(function() {
  3.     var max_fields      = 15; //maximum input boxes allowed
  4.     var wrapper         = $(".input_fields_wrap"); //Fields wrapper
  5.     var add_button      = $("#add_field_button"); //Add button ID

  7.     var x = 1; //initlal text box count
  8.     $(add_button).click(function(e){ //on add input button click
  9.         e.preventDefault();
  10.         if(x < max_fields){ //max input box allowed
  11.             x++; //text box increment
  12.         $('.load_fields').load('index.php?page=admin_add_variant_group_append.php');
  13.         }
  14.     });

  16.     $(wrapper).on("click","#remove_field", function(e){
  17.         $(this).parent('div').remove(); x--;
  18.         e.preventDefault();
  19.     })
  20. });
  21. </script>





external file:
  1.         <div class="form-group">
  2.         <label for="subvariantname">Sub Variant Name (ie: Small,Medium,Large)</label>
  3.         <input type="text" class="form-control" placeholder="Sub Variant Name" name="sub_variant_name[]">
  4.         </div>

  6.         <div class="form-group">
  7.             <label for="linktotoppinglist">Link Topping List</label>
  8.             <select name="toppinglist[]" class="form-control">
  9.         <?php
  10.             $stmt = $conn->prepare("SELECT vat_id,vat_value FROM vat_rates ORDER BY vat_id");
  11.             $stmt->bind_result($vat_id,$vat_value);
  12.             $stmt->execute();
  13.             $stmt->store_result();
  14.             if($stmt->num_rows() > 0){

  16.             while ($stmt->fetch()) {
  17.             $s = "";
  18.             if(isset($_POST['selectvat']) && ($_POST['selectvat'] == $vat_id))
  19.             {
  20.             $s = " selected";
  21.             }
  22.             echo "<option value='".$vat_id."'".$s.">".$vat_value."</option>";
  23.             }
  24.             }
  25.             $stmt->free_result();
  26.             $stmt->close();
  27.          ?>
  28.         </select>
  29.         </div>

Thank you.