jquery AJAX Dynamically Add remove PHP MySQLi

jquery AJAX Dynamically Add remove PHP MySQLi

Today, We want to share with you jquery AJAX Dynamically Add remove PHP MySQLi.
In this post we will show you Add remove input fields dynamically with jquery, hear for Add Remove Input Fields Dynamically using jQuery we will give you demo and example for implement.
In this post, we will learn about jQuery Add & Remove Dynamically Input Fields in PHP with an example.

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Add remove input fields dynamically with jquery

Also Read :  Add Remove multiple Input Fields Dynamically in jQuery

JQuery allows us dynamically to add text duplicate more input fields dynamically by add button clicking.and also dynamically to remove row duplicate input fields by remove button

clicking.

index.html


  <title>Add remove input fields dynamically using jquery Example</title>
  
  


<div class="container">
  <div class="well panel panel-default">
    <div class="panel-heading">Add remove input fields dynamically with jquery Example</div>
    <div class="panel-body">
        <form action="do_index.php">
      	<div class="input-group control-group data-add-more-field-after">
          
          <div class="input-group-btn"> 
            <button class="btn btn-success add-data-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add_ROW</button>
          </div>
        </div>
        </form>
        <!-- data all Copy-data Fields see -->
        <div class="copy-data hide">
          <div class="control-group input-group" style="margin-top:10px">
            
            <div class="input-group-btn"> 
              <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove_ROW</button>
            </div>
          </div>
        </div>
    </div>
  </div>
  <hr />
	<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
	<h3>
	<a href="https://pakainfo.com/">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of pakainfo.com </a>
	</h3>
</div>

    $(document).ready(function() {
      $(".add-data-more").click(function(){ 
          var html = $(".copy-data").html();
          $(".data-add-more-field-after").after(html);
      });
      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });
    });



do_index.php

<?php
//Get all Data dynamically all row
echo "<pre>";
print_r($_REQUEST['data_add']);
echo "</pre>";

echo "Welcome to pakainfo By Server side! Good Luck.";
?>

Leave a Reply

avatar
  Subscribe  
Notify of