How to Add Unlimited Fields in Form Using JavaScript and Store Into Database With PHP
Tags: howto, javascript, php
Published: 2020-03-19 20:07:23

Sometimes we need to add unlimited fields into our form for better user experience. At that time, we can put an **ADD FIELD** button into the page for dynamic field generation on a webpage.

Creating unlimited fields in the form is effortless using JavaScript and jQuery. In addition, saving the data into a database is also easy to handle with PHP.

## Adding Unlimited Fields Using JS and Saving Using PHP

Here we are going to use JavaScript to add new fields and PHP to save data into the database.

### Step: Create a form and add a function to add new dynamic fields

```
<!DOCTYPE html>
<html>
	<body>
		<form id="form" method="POST" action="save_data.php">
			<input type="text" name="text_field[]">
			<button type="submit">SUBMIT</button>
		</form>
		<button onclick="add_field()">ADD FIELD</button>
		<script>
			function add_field(){
			    
				var x = document.getElementById("form");
	            // create an input field to insert
				var new_field = document.createElement("input");
				// set input field data type to text
				new_field.setAttribute("type", "text");
				// set input field name 
				new_field.setAttribute("name", "text_field[]");
                // select last position to insert element before it
				var pos = x.childElementCount;
				
				// insert element
				x.insertBefore(new_field, x.childNodes[pos]);
			}
		</script>
	</body>
</html>
```

#### Explanation

Here we created a function named **add\_field** to append a text field at the second last position in the form.

**Note:** Here, we set every field name as **text\_field[]**, which submits all text field data as an array.

### Step 2: Create a save\_data.php file to store the data to the database

```
<?php
    $conn = mysqli_connect("localhost","USER_NAME","PASSWORD","DATABASE_NAME");
    
    $data = $_POST['text_field'];
    $data = implode(",",$data);
    
    $query = "INSERT INTO `test`(`data`) VALUES ('$data')";
    if(mysqli_query($conn,$query)){
        echo "Success: Data successfully inserted";
    }else{
        echo "Error: Could not insert data into table";
    }
?>
```

#### Explanation

- Here we first stored the submitted array data in a PHP array variable named **$data**.
- After that, we used an inbuilt PHP function **implode()**, which converts an array into a PHP string.
- Finally, we saved our string data to our data table.

[<button>DOWNLOAD CODE</button>](https://github.com/niick007/errorsea/tree/master/Add%20Unlimited%20Fields%20in%20Form%20Using%20JavaScript)

### Conclusion

Creating unlimited dynamic fields is very easy using JavaScript. Even more, we learned a way to store that dynamic data into a database using some simple functions of PHP.

I hope now you have a complete understanding of dynamic field insertion and data storing techniques.

Enjoy Coding ![🙂](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f642.png)

The post [Add Unlimited Fields in Form Using JavaScript and PHP](https://errorsea.com/how-to-add-unlimited-fields-in-form-using-javascript-and-store-into-database-with-php/) appeared first on [errorsea](https://errorsea.com).