Các trường đầu vào động trong PHP




Mã nguồn




Đọc thêm - Cách chỉnh sửa trường HTML động bằng cách sử dụng Ajax với PHP



Hello Friends this tutorial is relating to dynamically insert or delete  input html fields using Jquery Ajax with PHP MySql. User can insert more than one data at the same time. User can Add bulk data at same time. Data will be inserted with out page refresh because we use ajax function call for insert data. User can add more fields by clicking on add more button then new textbox will be appear on webpage with remove button. If user want to remove some field then it can be remove input fields on click on remove button. Now a days this functionality is very useful in web application.


Xem thêm

  • góc cạnhJS. Thêm Tự động loại bỏ các trường đầu vào trong PHP
  • Thêm vào Xóa các trường HTML động bằng Plugin JQuery trong PHP
  • Thêm Xóa các trường hộp chọn Tự động sử dụng jQuery Ajax trong PHP



Các trường đầu vào động trong PHP





Xem bản trình diễn



Mã nguồn


mục lục. php


    <html>  
      <head>  
           <title>Dynamically Add or Remove input fields in PHP with JQuery</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>  
                <div class="form-group">  
                     <form name="add_name" id="add_name">  
                          <div class="table-responsive">  
                               <table class="table table-bordered" id="dynamic_field">  
                                    <tr>  
                                         <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                                         <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                    </tr>  
                               </table>  
                               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                          </div>  
                     </form>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"name.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>
   

tên. php


    <?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $number = count($_POST["name"]);  
 if($number > 0)  
 {  
      for($i=0; $i<$number; $i++)  
      {  
           if(trim($_POST["name"][$i] != ''))  
           {  
                $sql = "INSERT INTO tbl_name(name) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";  
                mysqli_query($connect, $sql);  
           }  
      }  
      echo "Data Inserted";  
 }  
 else  
 {  
      echo "Please Enter Name";  
 }  
 ?> 
   

  • Chia sẻ cái này.   
  • Facebook
  • Twitter
  • Google+
  • Tình cờ gặp
  • đào

Thêm và loại bỏ các trường nhập động là một tính năng quan trọng của ứng dụng web. Nó cho phép tính năng thân thiện với người dùng tự động thêm và xóa đầu vào biểu mẫu để tăng trải nghiệm người dùng. Nếu bạn đang phát triển một ứng dụng web muốn thêm tính năng này thì bạn đang ở đúng nơi

Trong hướng dẫn này, bạn sẽ tìm hiểu cách thêm và xóa các trường nhập biểu mẫu một cách linh hoạt bằng cách sử dụng jQuery

Bạn cũng sẽ học cách xử lý lưu giá trị trường được thêm động vào cơ sở dữ liệu bằng PHP. Hướng dẫn bao gồm các bước rất dễ dàng với Demo trực tiếp và mã nguồn hoàn chỉnh để tải xuống

Làm cách nào để thêm động các trường đầu vào trong PHP?

Cách Tự động Thêm/Xóa các trường nhập liệu trong PHP bằng Jquery. .
.
.

Trường đầu vào động là gì?

Trường nhập động cho phép cung cấp nhiều giá trị trong một biểu mẫu . Nó rất hữu ích khi bạn muốn nhận nhiều đầu vào cho cùng một trường ở dạng HTML. Có thể dễ dàng tích hợp tính năng trường nhập liệu động bằng jQuery. Bạn có thể thêm nhiều trường và loại bỏ các trường một cách dễ dàng.

Làm cách nào để tạo trường văn bản động trong PHP?

Các hộp kiểm trước các hàng của trường nhập liệu được thêm động được sử dụng để chọn hàng loạt các hàng cần xóa. .
tập lệnh cơ sở dữ liệu. Chạy câu lệnh CREATE này trong khi thiết lập ví dụ này trong môi trường cục bộ của bạn. .
HTML hộp văn bản. Lưu mã này làm đầu vào. .
Tải và nối thêm hộp văn bản động. .
Xóa hộp văn bản. .
Đọc đầu vào hộp văn bản động

Trường biểu mẫu động là gì?

Thực hiện các thay đổi theo thời gian thực đối với biểu mẫu của bạn dựa trên thông tin nhập của người dùng, lưu tiến trình của khách hàng để họ có thể hoàn thành sau trên bất kỳ thiết bị nào và điền trước dữ liệu để giảm lỗi . Biểu mẫu động cũng cho phép bạn xác thực các trường để định dạng phù hợp và tự động xác minh dữ liệu như địa chỉ và số thẻ tín dụng.