Question

我正在制作一个动态表格，用户单击它可以添加更多内容，并且该表格将重复1次，并且表格内有textbox。当用户单击add more按钮时，它将增加该textbox内的文本

示例：第一个代码是ss1，用户单击添加更多按钮，该表单将重复1次，并且代码将递增到ss2。

问题是动态表格已经完成，并且成功并且自动递增也成功，但是autoincremented text的位置错误，我希望它在kode_produk文本框旁边。当我单击“删除”按钮时，它将删除单击的表单组；当我单击“删除”按钮时，它确实删除了单击的表单组，但是ss1不会被删除。

这是我的代码：

<?php 
include 'config/db_connect.php';

if(isset($_POST['submit']))
{
$kode = $_GET['kode_cu'];
$kode_produk = $_POST['kode_produk'];
$produk = $_POST['produk'];
$bunga = $_POST['bunga'];
$keterangan = $_POST['ket'];


if($query){
    header('location: home_cu.php');
}else{
    echo "data gagal dimasukan" . mysqli_error($con) . mysqli_errno($con);
}

}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Add More Input Form</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <?php 
    include 'config/db_connect.php';
    $kode_cu = $_GET['kode_cu'];
    $query_mysql = mysqli_query($con,"SELECT * FROM t_cu WHERE kode_cu='$kode_cu'")or die(mysqli_error());
    $nomor = 1;
    while($data = mysqli_fetch_array($query_mysql)){
    ?>
    <div class="container">
        <h1 class="text-center">Tambah Data Kebijakan</h1>
        <form action="add_kebijakan.php" method="post">
        <input type="hidden" value="<?php echo $data['kode_cu']?>" name="meja[]" class="form-control"/>
        </div>
                <h1 class="text-center">Produk Simpanan Saham</h1>
                <div class="form-content">
                <div class="row">
                    <div class="col-md-12">
                        <p><button type="button" id="btnAdd" class="btn btn-primary">Add More</button></p>
                        <br/>
                    </div>
                </div>
                <div id="inputtext"></div>
                <div class="row group">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Kode Produk :</label>
                            <input type="text" name="kode_produk" class="form-control">
                        </div>
                    </div>
                <?php } ?>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Produk</label>
                            <input type="text" name="produk" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Bunga</label>
                            <input type="text" name="bunga" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Keterangan</label>
                            <textarea name="ket" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <button type="button" class="btn btn-danger btnRemove">Remove</button>
                        </div>
                    </div>
                </div>
            </div>
            <p>
            <button type="submit" class="btn btn-success" name="submit">Simpan</button>
            </p><br/>
        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="jquery.multifield.min.js"></script>
    <script>
        $('.form-content').multifield({
            section: '.group',
            btnAdd:'#btnAdd',
            btnRemove:'.btnRemove',
        });
        $(document).ready(function(){
    var count = 1;
    $("#btnAdd").click(function(){
       $("#inputtext").append("<input type='text' value='ss" + count + "' name='photo_" + (count++) +"'/><br />");
    });
})
    </script>
  </body>
</html>

在动态表单上使用jquery自动递增代码

0 个答案: