function addField(plusElement){
let displayButton = document.querySelector("form button");
// Stopping the function if the input field has no value.
if(plusElement.previousElementSibling.value.trim() === ""){
return false;
}
// creating the div container.
let div = document.createElement("div");
div.setAttribute("class", "field");
// Creating the input element.
let field = document.createElement("input");
field.setAttribute("type", "text");
field.setAttribute("name", "notes[]");
// Creating the plus span element.
let plus = document.createElement("span");
plus.setAttribute("onclick", "addField(this)");
let plusText = document.createTextNode("+");
plus.appendChild(plusText);
// Creating the minus span element.
let minus = document.createElement("span");
minus.setAttribute("onclick", "removeField(this)");
let minusText = document.createTextNode("-");
minus.appendChild(minusText);
// Adding the elements to the DOM.
form.insertBefore(div, displayButton);
div.appendChild(field);
div.appendChild(plus);
div.appendChild(minus);
// Un hiding the minus sign.
plusElement.nextElementSibling.style.display = "block"; // the minus sign
// Hiding the plus sign.
plusElement.style.display = "none"; // the plus sign
}
function removeField(minusElement){
minusElement.parentElement.remove();
}
let form = document.forms[0];
form.addEventListener("submit", fetchTextNotes);
function fetchTextNotes(event){
// prevent the form to communicate with the server.
event.preventDefault();
// Fetch the values from the input fields.
let data = new FormData(form);
// Storing the values inside an array so we can handle them.
// we don't want empty values.
let notes = [];
data.forEach( function(value){
if(value !== ""){
notes.push(value);
}
});
// Output the values on the screen.
let out = "";
for(let note of notes){
out += `
<p>${note} <span onclick="markAsDone(this)">Mark as done</span></p>
`;
}
document.querySelector(".notes").innerHTML = out;
// Delete all input elements except the last one.
let inputFields = document.querySelectorAll(".field");
inputFields.forEach(function(element, index){
if(index == inputFields.length - 1){
element.children[0].value = "";
}else{
element.remove();
}
});
}
function markAsDone(element){
element.classList.add("mark");
element.innerHTML = "✓";
}
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
<!DOCTYPE html>
<html>
<head>
<title>
Create a Form Dynamically with
the JavaScript
</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
Click on the button to create
a form dynamically
</p>
<button onClick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN"></p>
<script>
var down = document.getElementById("GFG_DOWN");
// Create a break line element
var br = document.createElement("br");
function GFG_Fun() {
// Create a form dynamically
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "submit.php");
// Create an input element for Full Name
var FN = document.createElement("input");
FN.setAttribute("type", "text");
FN.setAttribute("name", "FullName");
FN.setAttribute("placeholder", "Full Name");
// Create an input element for date of birth
var DOB = document.createElement("input");
DOB.setAttribute("type", "text");
DOB.setAttribute("name", "dob");
DOB.setAttribute("placeholder", "DOB");
// Create an input element for emailID
var EID = document.createElement("input");
EID.setAttribute("type", "text");
EID.setAttribute("name", "emailID");
EID.setAttribute("placeholder", "E-Mail ID");
// Create an input element for password
var PWD = document.createElement("input");
PWD.setAttribute("type", "password");
PWD.setAttribute("name", "password");
PWD.setAttribute("placeholder", "Password");
// Create an input element for retype-password
var RPWD = document.createElement("input");
RPWD.setAttribute("type", "password");
RPWD.setAttribute("name", "reTypePassword");
RPWD.setAttribute("placeholder", "ReEnter Password");
// create a submit button
var s = document.createElement("input");
s.setAttribute("type", "submit");
s.setAttribute("value", "Submit");
// Append the full name input to the form
form.appendChild(FN);
// Inserting a line break
form.appendChild(br.cloneNode());
// Append the DOB to the form
form.appendChild(DOB);
form.appendChild(br.cloneNode());
// Append the emailID to the form
form.appendChild(EID);
form.appendChild(br.cloneNode());
// Append the Password to the form
form.appendChild(PWD);
form.appendChild(br.cloneNode());
// Append the ReEnterPassword to the form
form.appendChild(RPWD);
form.appendChild(br.cloneNode());
// Append the submit button to the form
form.appendChild(s);
document.getElementsByTagName("body")[0]
.appendChild(form);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting the pages character encoding -->
<meta charset="UTF-8">
<!-- The meta viewport will scale my content to any device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Adding dynamically input fields</title>
</head>
<script>
var choices = ["one", "two","three"];
function addInput(divName) {
var newDiv = document.createElement('div');
var selectHTML = "";
selectHTML = "<select>";
for (i = 0; i < choices.length; i = i + 1) {
selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
}
selectHTML += "</select>";
newDiv.innerHTML = selectHTML;
document.getElementById(divName).appendChild(newDiv);
}
</script>
<body>
<form class="new" method="post" action="/jobs">
<div id="dynamicInput"></div>
<input type="button" value="Add" onclick="addInput('dynamicInput');" />
<input type="button" value="Save" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting the pages character encoding -->
<meta charset="UTF-8">
<!-- The meta viewport will scale my content to any device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Adding dynamically input fields</title>
</head>
<script>
var choices = ["one", "two"];
function addInput(divName) {
var select = $("<select/>")
$.each(choices, function(a, b) {
select.append($("<option/>").attr("value", b).text(b));
});
$("#" + divName).append(select);
}
</script>
<body>
<form class="new" method="post" action="/jobs">
<div id="dynamicInput"></div>
<input type="button" value="Add" onclick="addInput('dynamicInput');" />
<input type="button" value="Save" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic DropDown List | Javacodepoint
</title>
</head>
<body>
<button onclick="dynamicDropdownList()">Create Dynamic Dropdown List
</button>
<br>
<br>
<div id="dropdown-container">
</div>
<script>
//country data in string array format
var countries = ["Australia", "France", "India", "Japan", "United States"];
//This method calls on button click
function dynamicDropdownList() {
var dropdown = document.createElement("select");
for (var i = 0; i < countries.length; i++) {
var opt = document.createElement("option");
opt.text = countries[i];
opt.value = countries[i];
dropdown.options.add(opt);
}
//Load the dynamically created dropdown in container
var container = document.getElementById("dropdown-container");
container.appendChild(dropdown);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic DropDown List | Javacodepoint
</title>
</head>
<body>
<button onclick="dynamicDropdownList()">Create Dynamic Dropdown List
</button>
<br>
<br>
<div id="dropdown-container">
</div>
<script>
//country data in json array format
var countries = [{
"code": "AU",
"name": "Australia"
}, {
"code": "FR",
"name": "France"
}, {
"code": "IN",
"name": "India"
}, {
"code": "JP",
"name": "Japan"
}, {
"code": "CH",
"name": "Switzerland"
}, {
"code": "GB",
"name": "United Kingdom"
}, {
"code": "US",
"name": "United States"
}];
//This method calls on button click
function dynamicDropdownList() {
var dropdown = document.createElement("select");
for (var i = 0; i < countries.length; i++) {
var opt = document.createElement("option");
opt.text = countries[i].name;
opt.value = countries[i].code;
dropdown.options.add(opt);
}
//Load the dynamically created dropdown in container
var container = document.getElementById("dropdown-container");
container.appendChild(dropdown);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic DropDown List | Javacodepoint
</title>
</head>
<body>
<button onclick="dynamicDropdownList()">Create Dynamic Dropdown List
</button>
<br>
<br>
<div id="dropdown-container">
</div>
<script>
//country data in json array format
var countries = [{
"code": "AU",
"name": "Australia"
}, {
"code": "FR",
"name": "France"
}, {
"code": "IN",
"name": "India"
}, {
"code": "JP",
"name": "Japan"
}, {
"code": "CH",
"name": "Switzerland"
}, {
"code": "GB",
"name": "United Kingdom"
}, {
"code": "US",
"name": "United States"
}];
//This method calls on button click
function dynamicDropdownList() {
var dropdownHTML = '<select>';
for (var i = 0; i < countries.length; i++) {
var name = countries[i].name;
var value = countries[i].code;
dropdownHTML += '<option value="' + value + '">' + name + '</option>';
}
dropdownHTML += '</select>';
//Load the dynamically created dropdown in container
var container = document.getElementById("dropdown-container");
container.innerHTML = dropdownHTML;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting the pages character encoding -->
<meta charset="UTF-8">
<!-- The meta viewport will scale my content to any device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Adding dynamically input fields</title>
<style>
label {
font-size: 1rem;
font-family: sans-serif;
padding-right: 10px;
}
button,
select {
font-size: .9rem;
padding: 2px 5px;
}
</style>
</head>
<body>
<html>
<body>
<div id="container"></div>
<br>
<div>
<button id="generate">Generate</button>
</div>
</body>
<script>
$(document).ready(function() {
$('#generate').click(function() {
var values = ["dog", "cat", "parrot", "rabbit"];
var select = $('<select>').prop('id', 'pets')
.prop('name', 'pets');
$(values).each(function() {
select.append($("<option>")
.prop('value', this)
.text(this.charAt(0).toUpperCase() + this.slice(1)));
});
var label = $("<label>").prop('for', 'pets')
.text("Choose your pets: ");
var br = $("<br>");
$('#container').append(label).append(select).append(br);
})
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting the pages character encoding -->
<meta charset="UTF-8">
<!-- The meta viewport will scale my content to any device width -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Adding dynamically input fields</title>
<style>
label {
font-size: 1rem;
font-family: sans-serif;
padding-right: 10px;
}
button,
select {
font-size: .9rem;
padding: 2px 5px;
}
</style>
</head>
<body>
<html>
<body>
<select id="dynamic-select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<button onclick="addOption()">add item</button>
<button onclick="removeOption()">remove item</button>
<button onclick="removeAllOptions()">remove all</button>
</body>
<script>
function addOption() {
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0');
}
function removeOption() {
var select = document.getElementById("dynamic-select");
select.options[select.options.length - 1] = null;
}
function removeAllOptions() {
var select = document.getElementById("dynamic-select");
select.options.length = 0;
}
</script>
</html>
