The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. using jquery and mysqli i have created to add and remove multiple input field and upload to database using mysqli insert sql
CREATE TABLE names (
id INT PRIMARY KEY AUTO_INCREMENT,
names VARCHAR(255)
);
<!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.0">
<title>Multiple Fields</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow">
<div class="card-body">
<form action="controller.php" method="post">
<div class="form-group">
<h3 class="text-center">Names</h3>
</div>
<div class="form-group">
<table class="table" id="dynamic_field">
<tr>
<td>
<input type="text" name="name[]" autocomplete="off" placeholder="Enter Names" class="form-control" required>
</td>
</tr>
</table>
</div>
<button class="btn btn-success" type="button" name="add" id="add">Add More</button>
<div class="form-group mt-3">
<input type="submit" value="Save" name="btn_submit" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<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 Names" autocomplete="off" class="form-control" required></td><td><button type="button" class=" btn btn-danger btn_remove" name="remove" id="'+i+'">Remove</button></td></tr>')
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
</body>
</html>
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow">
<div class="card">
<?php
$connect = new mysqli("localhost","root","","names");
if($connect->connect_errno !=0){
die('connection error');
}
if(isset($_POST['btn_submit'])){
// echo "<pre>";
// print_r($_POST);
}
$number= count($_POST["name"]);
echo "<h3 class='text-center'>You have entered ".$number." names</h3> <br> <ul>";
if($number>0){
for($i=0;$i<$number;$i++){
if(trim($_POST["name"][$i]!='')){
echo "<li style='list-style-type: none;'>".$_POST["name"][$i]."</li>";
$names=$_POST["name"][$i];
// saving in database
$name_sql = "INSERT INTO names (names) VALUES ('$names')";
if($connect->query($name_sql)){
// echo "Saved into Database Successfully";
}
else{
die("Category creation failed $connect->error");
}
}
}
}
echo "</ul> <br><h6 class='text-center'>Saved to databse SuccesFully 👌 </h6>";
$connect->close();
?>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Input fields refer specifically to the text input fields, which are used to obtain data from the users. A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input.