<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="container">
<h1>Dynamic Input Fields</h1>
<p class="subtitle">Add and remove multiple input fields dynamically with jQuery</p>
<div class="info-box">
<h3>
<ion-icon name="information-circle-outline"></ion-icon>
How It Works
</h3>
<p>Click "Add More Fields" to dynamically create new input fields. Each row can be individually removed using the remove button. All data is collected when you submit the form.</p>
</div>
<div class="form-section">
<h2>
<ion-icon name="person-outline"></ion-icon>
Contact Information
<span class="count-badge" id="fieldCount">1 Field</span>
</h2>
<div id="inputContainer">
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" name="name[]" placeholder="Enter name" class="name-input">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email[]" placeholder="Enter email" class="email-input">
</div>
<div class="input-group">
<label>Phone</label>
<input type="tel" name="phone[]" placeholder="Enter phone" class="phone-input">
</div>
<button type="button" class="btn-remove remove-field">
<ion-icon name="trash-outline"></ion-icon>
</button>
</div>
</div>
<button type="button" class="btn-add" id="addField">
<ion-icon name="add-circle-outline"></ion-icon>
Add More Fields
</button>
</div>
<div class="action-buttons">
<button type="button" class="btn-submit" id="submitForm">
<ion-icon name="checkmark-circle-outline"></ion-icon>
Submit Form
</button>
<button type="button" class="btn-clear" id="clearAll">
<ion-icon name="close-circle-outline"></ion-icon>
Clear All
</button>
</div>
<div class="result-section" id="resultSection">
<h3>
<ion-icon name="code-outline"></ion-icon>
Form Data (JSON)
</h3>
<pre id="resultData"></pre>
</div>
<div class="code-section">
<h3>
<ion-icon name="code-slash-outline"></ion-icon>
jQuery Code Example
</h3>
<div class="code-block">
<span class="comment">// Add new input field</span>
$(<span class="string">'#addField'</span>).<span class="function">click</span>(<span class="keyword">function</span>() {
<span class="keyword">var</span> newRow = <span class="string">`
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" name="name[]" placeholder="Enter name">
</div>
<button type="button" class="btn-remove remove-field">
Remove
</button>
</div>
`</span>;
$(<span class="string">'#inputContainer'</span>).<span class="function">append</span>(newRow);
});
<span class="comment">// Remove input field</span>
$(<span class="keyword">document</span>).<span class="function">on</span>(<span class="string">'click'</span>, <span class="string">'.remove-field'</span>, <span class="keyword">function</span>() {
$(<span class="keyword">this</span>).<span class="function">closest</span>(<span class="string">'.input-row'</span>).<span class="function">remove</span>();
});
<span class="comment">// Get all form data</span>
<span class="keyword">var</span> formData = [];
$(<span class="string">'.input-row'</span>).<span class="function">each</span>(<span class="keyword">function</span>() {
<span class="keyword">var</span> name = $(<span class="keyword">this</span>).<span class="function">find</span>(<span class="string">'input[name="name[]"]'</span>).<span class="function">val</span>();
<span class="keyword">var</span> email = $(<span class="keyword">this</span>).<span class="function">find</span>(<span class="string">'input[name="email[]"]'</span>).<span class="function">val</span>();
formData.<span class="function">push</span>({ name: name, email: email });
});
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #0f9b0f 0%, #00d2ff 100%);
min-height: 100vh;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 50px 40px;
width: 100%;
max-width: 800px;
}
h1 {
font-size: 32px;
color: #333;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
}
.subtitle {
color: #666;
font-size: 15px;
margin-bottom: 40px;
text-align: center;
}
.form-section {
background: #f8f9fa;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
}
.form-section h2 {
font-size: 20px;
color: #0f9b0f;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.input-container {
margin-bottom: 20px;
}
.input-row {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: flex-start;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.input-group {
flex: 1;
}
.input-group label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 5px;
}
.input-group input,
.input-group select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
transition: border-color 0.3s;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: #0f9b0f;
}
.btn-remove {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: white;
border: none;
border-radius: 10px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
margin-top: 25px;
min-width: 45px;
}
.btn-remove:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
}
.btn-remove ion-icon {
font-size: 20px;
}
.btn-add {
background: linear-gradient(135deg, #0f9b0f 0%, #00d2ff 100%);
color: white;
border: none;
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
}
.btn-add:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 155, 15, 0.4);
}
.btn-add:active {
transform: translateY(0);
}
.action-buttons {
display: flex;
gap: 15px;
margin-top: 30px;
}
.btn-submit {
background: linear-gradient(135deg, #0f9b0f 0%, #00d2ff 100%);
color: white;
border: none;
border-radius: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
flex: 1;
justify-content: center;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 155, 15, 0.4);
}
.btn-clear {
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
color: white;
border: none;
border-radius: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
flex: 1;
justify-content: center;
}
.btn-clear:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(149, 165, 166, 0.4);
}
.result-section {
background: #e8f5e9;
border-radius: 15px;
padding: 30px;
margin-top: 30px;
display: none;
}
.result-section h3 {
font-size: 20px;
color: #0f9b0f;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.result-section pre {
background: white;
padding: 20px;
border-radius: 10px;
overflow-x: auto;
font-size: 14px;
line-height: 1.6;
}
.info-box {
background: #fff9e6;
border-left: 4px solid #ffc107;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.info-box h3 {
color: #f57c00;
margin-bottom: 10px;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.info-box p {
color: #666;
font-size: 14px;
line-height: 1.6;
}
.count-badge {
background: #0f9b0f;
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
display: inline-block;
margin-top: 10px;
}
.code-section {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
margin-top: 30px;
}
.code-section h3 {
font-size: 18px;
color: #0f9b0f;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
font-size: 13px;
overflow-x: auto;
line-height: 1.8;
}
.code-block .comment {
color: #6272a4;
}
.code-block .keyword {
color: #ff79c6;
}
.code-block .function {
color: #50fa7b;
}
.code-block .string {
color: #f1fa8c;
}
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
h1 {
font-size: 26px;
}
.input-row {
flex-direction: column;
}
.btn-remove {
margin-top: 5px;
width: 100%;
}
.action-buttons {
flex-direction: column;
}
}
$(document).ready(function() {
// Update field count
function updateFieldCount() {
var count = $('.input-row').length;
$('#fieldCount').text(count + (count === 1 ? ' Field' : ' Fields'));
}
// Add new input field row
$('#addField').click(function() {
var newRow = `
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" name="name[]" placeholder="Enter name" class="name-input">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email[]" placeholder="Enter email" class="email-input">
</div>
<div class="input-group">
<label>Phone</label>
<input type="tel" name="phone[]" placeholder="Enter phone" class="phone-input">
</div>
<button type="button" class="btn-remove remove-field">
<ion-icon name="trash-outline"></ion-icon>
</button>
</div>
`;
$('#inputContainer').append(newRow);
updateFieldCount();
});
// Remove input field row (using event delegation)
$(document).on('click', '.remove-field', function() {
if ($('.input-row').length > 1) {
$(this).closest('.input-row').fadeOut(300, function() {
$(this).remove();
updateFieldCount();
});
} else {
alert('At least one field is required!');
}
});
// Submit form and collect data
$('#submitForm').click(function() {
var formData = [];
var isValid = true;
$('.input-row').each(function(index) {
var name = $(this).find('.name-input').val().trim();
var email = $(this).find('.email-input').val().trim();
var phone = $(this).find('.phone-input').val().trim();
if (name || email || phone) {
formData.push({
id: index + 1,
name: name || 'N/A',
email: email || 'N/A',
phone: phone || 'N/A'
});
}
});
if (formData.length === 0) {
alert('Please fill at least one complete row!');
return;
}
// Display results
$('#resultData').text(JSON.stringify(formData, null, 2));
$('#resultSection').slideDown();
// Scroll to results
$('html, body').animate({
scrollTop: $('#resultSection').offset().top - 20
}, 500);
});
// Clear all fields
$('#clearAll').click(function() {
if (confirm('Are you sure you want to clear all fields?')) {
// Keep only one row
$('.input-row').not(':first').remove();
// Clear first row inputs
$('.input-row:first input').val('');
// Hide results
$('#resultSection').slideUp();
updateFieldCount();
}
});
// Initialize count
updateFieldCount();
});
No comments yet. Be the first!