Managing multiple inputs for data such as student records, teacher names, subjects and associated fees can be a complex task, especially when dynamic forms and database integrations are involved. The “add multiple records” approach simplifies this by enabling dynamic addition of fields and seamless data entry into the backend database. This tutorial guides you in implementing this efficient method using HTML, JavaScript, PHP, and MySQL.
Create database table
Before diving into form implementation, let’s set up the database table. This table will store multiple records including student name, email, phone, aadhaar number, teacher name, subject stream and total fees. Below is the SQL query to create login table in MySQL:
CREATE DATABASE newaddinputonclick;
USE newaddinputonclick;
CREATE TABLE login (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
phone VARCHAR(100) NOT NULL,
aadhar VARCHAR(100) NOT NULL,
teacher VARCHAR(100) NOT NULL,
stream VARCHAR(100) NOT NULL,
total VARCHAR(100) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
This table structure ensures efficient storage and retrieval of multi-record inputs.
Creating a Dynamic Input Form
Using HTML and JavaScript, we create a dynamic form where users can add multiple inputs for student details and associated fees. The following features are integrated into the form:
- Dynamic Input Addition: Users can add fields dynamically using the “Add Input” button.
- Field Validation: Required fields such as name, email and phone are valid.
- Stream Selection: Checkboxes allow users to select multiple streams (Hindi, English, Maths, Science) with respective fees.
- Global and Individual Totals: The total fees for each record are calculated, and a global total displays the cumulative amount.
Frontend Code
The HTML and JavaScript code handles the dynamic addition of input fields and calculates the fee based on the stream selected. Here is the required implementation:
<input type="button" id="addInput" value="Add Input">
<input type="submit" value="Submit">
<div id="alltotal" style="margin-top: 20px; font-weight: bold;">Global Total: ₹0</div>
The AddInput button dynamically creates new input rows, containing checkboxes for stream selection as well as fields for name, email, phone, and teacher name.
Backend Integration
Data from the form is processed and inserted into the database using PHP. Server-side code handles:
- Validation: Ensures all areas meet requirements.
- Batch Insertion: Uses SQL queries to insert multiple records efficiently.
- Error Handling: Catches database connection problems and query errors.
Here is the PHP code snippet to process the form data:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST["name"])) {
$names = $_POST["name"];
$emails = $_POST["email"];
$phones = $_POST["phone"];
$aadhars = $_POST["aadhar"];
$teachers = $_POST["teacher"];
$streams = $_POST["stream"];
$totals = $_POST["total"];
$conn = mysqli_connect("localhost", "root", "", "newaddinputonclick");
if (!$conn) {
die("Connection Failed" . mysqli_error($conn));
}
$sql = "INSERT INTO login (name, email, phone, aadhar, teacher, stream, total) VALUES ";
$values = [];
for ($i = 0; $i < count($names); $i++) {
$name = mysqli_real_escape_string($conn, $names[$i]);
$email = mysqli_real_escape_string($conn, $emails[$i]);
$phone = mysqli_real_escape_string($conn, $phones[$i]);
$aadhar = mysqli_real_escape_string($conn, $aadhars[$i]);
$teacher = mysqli_real_escape_string($conn, $teachers[$i]);
$studentStreams = isset($streams[$i]) ? implode(',', $streams[$i]) : '';
if($studentStreams === "") {
echo "<script>alert('Please select at least one stream.');</script>";
continue;
}
$stream = mysqli_real_escape_string($conn, $studentStreams);
$total = mysqli_real_escape_string($conn, $totals[$i]);
$values[] = "('$name', '$email', '$phone', '$aadhar', '$teacher', '$stream', '$total')";
}
if (!empty($values)) {
$sql .= implode(", ", $values);
if (mysqli_query($conn, $sql)) {
header("Location: ball-slide-game.php");
exit();
} else {
echo "Error: " . mysqli_error($conn);
}
}
mysqli_close($conn);
}
?>
JavaScript code for dynamic input and fee calculation
- The JavaScript manages:
- Dynamically adding input fields.
- Validating input to ensure that all required fields are filled.
- Calculation of individual and global totals based on selected stream.
Here is the complete JavaScript code:
<script>
let globalTotal = 0;
document.getElementById("addInput").addEventListener("click", function() {
addition();
});
function addition() {
const br1 = document.createElement("br");
const br2 = document.createElement("br");
const name = document.createElement("input");
name.setAttribute("type", "text");
name.setAttribute("placeholder", "Enter Name");
name.setAttribute("name", "name[]");
name.setAttribute("required", "");
const email = document.createElement("input");
email.setAttribute("type", "text");
email.setAttribute("placeholder", "Enter Email");
email.setAttribute("name", "email[]");
email.setAttribute("required", "");
const phone = document.createElement("input");
phone.setAttribute("type", "text");
phone.setAttribute("placeholder", "Enter Phone");
phone.setAttribute("name", "phone[]");
phone.setAttribute("required", "");
const aadhar = document.createElement("input");
aadhar.setAttribute("type", "text");
aadhar.setAttribute("placeholder", "Enter Aadhar Card number");
aadhar.setAttribute("name", "aadhar[]");
aadhar.setAttribute("required", "");
const teacher = document.createElement("input");
teacher.setAttribute("type", "text");
teacher.setAttribute("placeholder", "Enter Teacher Name");
teacher.setAttribute("name", "teacher[]");
teacher.setAttribute("required", "");
const streamsDiv = document.createElement("div");
const totalDiv = document.createElement("div");
totalDiv.textContent = "Total: ₹0";
totalDiv.style.fontWeight = "bold";
const totalInput = document.createElement("input");
totalInput.setAttribute("type", "hidden");
totalInput.setAttribute("name", "total[]");
totalInput.value = "0";
const remove = document.createElement("button");
remove.textContent = "X";
remove.addEventListener("click", function(event) {
event.preventDefault();
form.removeChild(br1);
form.removeChild(name);
form.removeChild(email);
form.removeChild(phone);
form.removeChild(aadhar);
form.removeChild(teacher);
form.removeChild(streamsDiv);
form.removeChild(remove);
form.removeChild(br2);
updateGlobalTotal(-parseInt(totalInput.value));
});
const calculateTotal = () => {
let total = 0;
if (hindi.checked) total += 100;
if (english.checked) total += 200;
if (math.checked) total += 300;
if (science.checked) total += 400;
const oldTotal = parseInt(totalInput.value) || 0;
totalDiv.textContent = "Total: ₹" + total;
totalInput.value = total;
updateGlobalTotal(total - oldTotal);
if (!hindi.checked && !english.checked && !math.checked && !science.checked) {
alert("Please select at least one stream.");
}
};
const labelHindi = document.createElement("label");
labelHindi.textContent = "Hindi (₹100)";
const hindi = document.createElement("input");
hindi.setAttribute("type", "checkbox");
hindi.classList.add("stream-checkbox");
hindi.setAttribute("name", "stream[" + (document.querySelectorAll('[name="name[]"]').length) + "][]");
hindi.setAttribute("value", "Hindi");
hindi.addEventListener("change", calculateTotal);
const labelEnglish = document.createElement("label");
labelEnglish.textContent = "English (₹200)";
const english = document.createElement("input");
english.setAttribute("type", "checkbox");
english.classList.add("stream-checkbox");
english.setAttribute("name", "stream[" + (document.querySelectorAll('[name="name[]"]').length) + "][]");
english.setAttribute("value", "English");
english.addEventListener("change", calculateTotal);
const labelMath = document.createElement("label");
labelMath.textContent = "Math (₹300)";
const math = document.createElement("input");
math.setAttribute("type", "checkbox");
math.classList.add("stream-checkbox");
math.setAttribute("name", "stream[" + (document.querySelectorAll('[name="name[]"]').length) + "][]");
math.setAttribute("value", "Math");
math.addEventListener("change", calculateTotal);
const labelScience = document.createElement("label");
labelScience.textContent = "Science (₹400)";
const science = document.createElement("input");
science.setAttribute("type", "checkbox");
science.classList.add("stream-checkbox");
science.setAttribute("name", "stream[" + (document.querySelectorAll('[name="name[]"]').length) + "][]");
science.setAttribute("value", "Science");
science.addEventListener("change", calculateTotal);
streamsDiv.appendChild(labelHindi);
streamsDiv.appendChild(hindi);
streamsDiv.appendChild(labelEnglish);
streamsDiv.appendChild(english);
streamsDiv.appendChild(labelMath);
streamsDiv.appendChild(math);
streamsDiv.appendChild(labelScience);
streamsDiv.appendChild(science);
streamsDiv.appendChild(totalDiv);
streamsDiv.appendChild(totalInput);
const form = document.getElementById("myForm");
form.appendChild(br1);
form.appendChild(name);
form.appendChild(email);
form.appendChild(phone);
form.appendChild(aadhar);
form.appendChild(teacher);
form.appendChild(streamsDiv);
form.appendChild(remove);
form.appendChild(br2);
var es=document.getElementsByClassName("stream-checkbox");
var rdd;
for(var i=1;i<=es;i++)
{
rdd+=es[i];
}
rdd.required=true;
}
function updateGlobalTotal(amount) {
globalTotal += amount;
document.getElementById("alltotal").textContent = "Global Total: ₹" + globalTotal;
}
</script>
How It Works:
- Dynamic Inputs: The addNewInput function dynamically adds input fields to the form when the “Add Input” button is clicked.
- Checkbox Selection: Streams are represented as checkboxes, and their fees are calculated upon selection.
- Remove Input Rows: Each row has a “Remove” button to remove it from the form, the global total is recalculated accordingly.
- Global Total Update: The UpdateGlobalTotal function keeps track of the cumulative charges for all records.
Benefits of "Add input onclick" method
- Scalability: Easily accommodate any number of records without modifying the form structure.
- User-Friendly: Intuitive interface with minimal clicks to add new records.
- Efficiency: Batch processing reduces server load and ensures faster database interactions.
- Customizability: Adaptable to a variety of use cases like student registration, inventory management, and more.
Benefits of "Add input onclick" method
- Scalability: Easily accommodate any number of records without modifying the form structure.
- User-Friendly: Intuitive interface with minimal clicks to add new records.
- Efficiency: Batch processing reduces server load and ensures faster database interactions.
- Customizability: Adaptable to a variety of use cases like student registration, inventory management, and more.
Conclusion
The “Add input onclick” method provides a robust solution for dynamically adding and managing multi-record tables. Its integration with MySQL database ensures data consistency and reliability. By following this guide, you can streamline data entry processes and enhance the overall user experience.
Dynamic Input Form Download
Send download link to:
