添加和删​​除输入字段功能

Question

1. 我的删除功能有问题，我的代码是错的还是什么？虽然..........
，但添加功能正常

2. 以及如何将添加的输入字段中的数据插入到 数据库？

   <script>
   $(document).ready(function() 
   {
       var max_fields      = 25; 
       var wrapper         = $(".input_fields_wrap"); 
       var add_button      = $(".add_field_button"); 
   
       var x = 1; //initial text box count
       $(add_button).click(function(e){ 
           e.preventDefault();
           if(x < max_fields){ //max input box allowed
               x++; //text box increment
              $(wrapper).append('<div><label for="no_telefon">No.Telefon: </label><input type="text" name="no_telefon[]" id="no_telefon[]" class="required input_field"><label for="lokasi[]">Lokasi: </label><input type="text" name="lokasi[]" id="lokasi[]"  class="required input_field"><a href="#" class="remove_field">Remove</a></div>'); //add input box
           }
       });
   
       $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
           e.preventDefault(); $(this).parent('div').remove(); x--;
       })
   });
   
   </script>
   

                                   <div class="input_fields_wrap">
                                   <h3 class="add_field_button"><a href="#">Add More Fields</a></h3>  
   
   
   
                                   <label for="no_telefon">No.Telefon:</label> <input type="text"  id="no_telefon" name="no_telefon" class="required input_field" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" required/> 
                                   <label for="lokasi">Lokasi:</label> <input type="text" id="lokasi" name="lokasi" class="required input_field" required/>
   
   
                                   </div>
   
   
   
   
                                   </fieldset>
   

sql .......

<?php
require("dbase.php"); 

if ($_POST) {

    $id_akaun           = isset($_POST['id_akaun'])         ? $_POST['id_akaun'] : '';
    $daerah             = isset($_POST['daerah'])           ? $_POST['daerah'] : '';
    $kategori_akaun     = isset($_POST['kategori_akaun'])   ? $_POST['kategori_akaun'] : '';
    $bahagian           = isset($_POST['bahagian'])         ? $_POST['bahagian'] : '';
    $jenis              = isset($_POST['jenis'])            ? $_POST['jenis'] : '';
    $no_telefon         = isset($_POST['no_telefon'])       ? $_POST['no_telefon'] : '';
    $lokasi             = isset($_POST['lokasi'])           ? $_POST['lokasi'] : '';
    $id                 = isset($_POST['id'])               ? $_POST['id'] : '';


    $sql = mysql_query("INSERT INTO maklumat_akaun VALUES ('', '$id_akaun' , '$daerah' , '$kategori_akaun' , '$bahagian' )");
    $sql = mysql_query("INSERT INTO detail_akaun VALUES   ('', '$jenis' , '$no_telefon' , '$lokasi', '".mysql_insert_id()."' )");





    echo "<script type='text/javascript'> alert('AKAUN BERJAYA DIDAFTARKAN')</script> ";
    echo "<script type='text/javascript'>window.location='lamanutama.php'</script>";
}


?>

Answer 1

点击按钮的父级不是div，因此此次展示$(this).parent('div').remove();不执行任何操作。请改用closest方法：

$('fieldset').on("click", ".remove_field", function (e) { //user click on remove text
    e.preventDefault();
    $(this).closest('div').remove();
    x--;
});

演示：http://jsfiddle.net/11jdyrdf/

Answer 2

您尚未添加标签的结束标记

让你的代码完美，你写错了代码..

将此附加代码替换为此

然后parent（）将工作

$(wrapper).append('<div><label for="no_telefon">No.Telefon: </label><input type="text" name="no_telefon[]" id="no_telefon[]" class="required input_field"><label for="lokasi[]">Lokasi: </label><input type="text" name="lokasi[]" id="lokasi[]"  class="required input_field"><a href="#" class="remove_field">Remove</a></div>'); //add input box

Answer 3

PFB代码，希望它有所帮助。我觉得问题是你在document.ready上绑定了click事件以便删除因此在那个时候没有创建remove for anchor，因为它是在add上创建的，所以click事件没有被绑定。在添加处理程序上绑定了它。

$(document).ready(function() 
{ var max_fields = 25; var wrapper = $(".input_fields_wrap"); var add_button = $(".add_field_button");

    var x = 1; //initial text box count
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><label for="no_telefon">No.Telefon: <input type="text" name="no_telefon[]" id="no_telefon[]" class="required input_field"><label for="lokasi[]">Lokasi: <input type="text" name="lokasi[]" id="lokasi[]"  class="required input_field"><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent().parent().remove(); x--;
    });
    });


});