.
HTML5 Form Auto Generate Multiple Name Entries
HTML
<!-- minified via http://minifycode.com/html-minifier/-->
<head><base target='_blank'><meta name='viewport' content='width=device-width, initial-scale=1.0' /><title>Registration</title><link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'></head><body>
<!--Begin Form Section -->
<form id="FormPerson">
</form>
<!--End Form Section -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.1.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js'></script> </body>
|
JS
(Use http://minifycode.com/ to minify or beautify the codes)
Change the number if you want to allow more names in the form.
$(document).ready(function () {
var labelPerson = "Delegate";
var htmlFormSection = "<div id='FormSection{Person}'><h5 class='left-align teal-text' style='padding-top:20px;'> <span id='Label{Person}'>{labelPerson}</span></h5><div class='input-field col s12'> <i class='material-icons prefix'>account_circle</i> <input id='{Person}_Name' type='text' name='{Person}_Name' class='validate' required='' aria-required='true'> <label for='{Person}_Name'>Name</label></div><div class='input-field col s12'> <i class='material-icons prefix'>picture_in_picture</i> <input id='{Person}_Pid' type='text' name='{Person}_Pid' class='validate' required='' aria-required='true'> <label for='{Person}_Pid'>Personal ID</label></div><div class='input-field col s12'> <i class='material-icons prefix'>assignment_ind</i> <input id='{Person}_Oid' type='text' name='{Person}_Oid' class='validate' required='' aria-required='true'> <label for='{Person}_Oid'>Organization ID</label></div><div class='input-field col s12'> <i class='material-icons prefix'>work</i> <select id='{Person}_Position' name='{Person}_Position'><option value='' disabled selected>Position</option><option value='Head'>Head</option><option value='Vice'>Vice</option><option value='Deputy'>Deputy</option><option value='Secretary'>Secretary</option><option value='Others'>Others</option> </select></div><div class='file-field input-field col s12'><div class='btn yellow accent-4'> <span>Picture</span> <input id='{Person}_File' name='{Person}_File' type='file'></div><div class='file-path-wrapper'> <input class='file-path validate' type='text' placeholder='Select Picture'></div></div></div>";
var totalPerson = 1;
for (i = 1; i < totalPerson + 1; i++) { /*create a unique label*/
var newLabelPerson = labelPerson.concat(" ", i); /*create unique id */
var newIdPerson = "Person" + i; /*replace id placeholders */
var regex = new RegExp('{Person}', 'g');
var newHtmlFormSection = htmlFormSection;
newHtmlFormSection = newHtmlFormSection.replace('{labelPerson}', newLabelPerson);
newHtmlFormSection = newHtmlFormSection.replace(regex, newIdPerson);
$('#FormPerson').append(newHtmlFormSection);
}
$('#FormPerson').append("<div class='btn btn-large waves-effect waves-light' id ='send' name='send'>Send<i class='material-icons right'>send</i></div>");
$('select').material_select();
$("#send").click(function (event) {
var $inputs = $('#FormPerson').find("input, select");
if (isEmpty($inputs)) {
alert("Please fill all the fields.")
} else {
alert("Sending now...")
}
});
});
function isEmpty($inputs) {
var check = false;
$.each($inputs, function (key, item) {
if (item.value == "") {
check = true
}
});
return check;
}
|
CODEPEN:
Demo:
See the Pen HTML Form Section (Material Design) by notarazi (@notarazi) on CodePen.
.
