how to add multiple input fields dynamically in javascript and PHP?

Today, We want to share with you dynamically add input fields and submit to database with javascript and php.In this post we will show you add/remove multiple input fields dynamically with javascript, hear for add/remove input fields dynamically with javascript we will give you demo and example for implement.In this post, we will learn about Add Field Dynamically To Form In Jquery And Php with an example.

how to add dynamic textbox (row) and save to database using php?

Step 1: Create Database and Table

SQL Query:

--
-- Database: `pakainfo_v1`

-- Table structure for table `visitors`
--

CREATE TABLE `visitors` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `visitors`
--

INSERT INTO `visitors` (`id`, `name`, `email`) VALUES
(1, 'rohitsharama', '[email protected]'),
(2, 'bhavika dema', '[email protected]'),
(3, 'mayur', '[email protected]'),
(4, 'dipti', '[email protected]'),
(5, 'rakhi', '[email protected]');

Step 2 : Create Database connection with MySQL

config.php

Step 3 : Create HTML File index page, jQuery & AJAX

index.php

  
  
  
  




  
Dynamic Add/Remove input fields in PHP Jquery AJAX - www.pakainfo.com

  

  

    

      

        

          

            

              

                

                

                
Add More
  
              
            
            
          
        
      
    

  

Step 4 : Create PHP server side code file

action.php

 0) {
	    for ($i=0; $i < $visitorData; $i++) { 
		if (trim($_POST['name'] != '') && trim($_POST['email'] != '')) {
			$name   = $_POST["name"][$i];
			$email  = $_POST["email"][$i];
			$query  = "INSERT INTO visitors (name,email) VALUES ('$name','$email')";
			$result = mysqli_query($con, $query);
		}
	    }
	    echo "Data inserted successfully";
	}else{
	    echo "Please Enter visitor name";
	}

?>

How to Dynamically Add / Remove input fields in PHP with Jquery Ajax?

You can use jQuery AJAX and PHP to dynamically add or remove input fields in a form. Here is an example code to achieve this:

HTML code:

    
    
    


    

        

            Add More Fields
            

        
        
    

PHP code (process.php):

In the HTML code, we have a form with an input field and a button to add more input fields. The input_fields_wrap class is the wrapper for the input fields, and the add_field_button class is the button to add more fields. When the button is clicked, a new input field is added to the wrapper using the jQuery append() function.

We also have a remove_field class that is used to remove input fields. When the remove_field link is clicked, the corresponding input field is removed from the wrapper using the jQuery remove() function.

In the PHP code, we check if the mytext field is set in the $_POST array. If it is set, we retrieve the values of the input fields and process them as required.

Note: This is just a basic example, and you can modify it as per your requirements. You can add more input fields, change the maximum limit of input fields, modify the form processing code in PHP, and so on.

I hope you get an idea about duplicate or add more form input group with jquery and php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.