# Add elements dynamically full (ok) ## Đọc thêm bài này để lấy giá trị ### Example 1

C:\xampp8\htdocs\lva\index.php ```php Add input fields to form dynamically using jQuery

Add input fields to form dynamically using jQuery

``` C:\xampp8\htdocs\lva\style.css ``` #container { width: 600px; margin: 20px auto; padding: 15px; background-color: #eee; } #addField { padding: 5px; display: inline-block; background-color: #3A9668; color: #f1f1f1; border: 1px solid #005; } .removeField { margin: auto; margin-left: 5px; padding: 5px; display: inline-block; background-color: #B02109; color: #f1f1f1; border: 1px solid #005; } #addField:hover, .removeField:hover { cursor: pointer; } label { padding: 0 10px; display: block; float: left; width: 150px; } input, textarea { padding: 5px; font-size: 14px; } input { width: 250px; } textarea { width: 290px; height: 150px; } select { padding: 5px; } .btn-submit { width: 100px; background-color: #428BCA; border-color: #357EBD; } ``` [Add dynamic form fields using AlpineJS](https://codepen.io/sanjayojha/pen/qBONdVm) [link](https://codepen.io/sanjayojha/pen/qBONdVm)

```html

#	Text Feild 1	Text Feild 2	Remove

``` ``` .row { max-width: 80%; margin: 20px auto; } ``` ``` function handler() { return { fields: [], addNewField() { this.fields.push({ txt1: '', txt2: '' }); }, removeField(index) { this.fields.splice(index, 1); } } } ``` ### Example 2 [How to *add,* *remove,* *input fields* with javascript](https://digitalfox-tutorials.com/tutorial.php?title=How-to-add-remove-input-fields-dynamically-using-javascript)

*index.html* ``` Adding dynamically input fields

Write a text note and press the plus button

``` *styles.css* ``` *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: sans-serif; min-height: 100%; color: #555; width: 600px; margin: 0 auto; padding-top: 20px; } h1{ text-align: center; color: #888; } .notes{ padding: 20px; } .notes p{ border-bottom: thin dotted #d4d4d4; padding: 20px 10px 0px 0px; font-style: italic; font-size: 18px; } .notes p span{ font-size: 16px; float: right; cursor: pointer; display: inline-block; } .notes p span.mark{ color: green; font-size: 30px; transform: translateY(-10px); } form{ width: 100%; } .field{ margin-bottom: 10px; display: flex; transition: opacity 0.3s; } .field input{ padding: 5px 10px; width: 100%; border: none; border: thin solid #d4d4d4; font-size: 20px; color: #888; font-family: ubuntu, sans-serif; background-color: #f9f9f9; } .field input:focus{ outline: none; } .field span{ display: inline-block; margin-left: 10px; cursor: pointer; background-color: #f9f9f9; padding: 10px; font-size: 20px; transition: all 0.3s; font-weight: bold; border: thin solid #d4d4d4; } .field span:last-child{ display: none; padding: 12px; } .field span:hover{ background-color: green; border: thin solid green; color: #fff; } .field span:last-child:hover{ background-color: red; border: thin solid red; color: #fff; } button{ display: block; padding: 10px 20px; margin-top: 30px; width: 150px; float: left; font-size: 16px; background-color: #5b8ebf; border: thin solid #d5e4d4; cursor: pointer; color: #fff; } button:active{ background-color: #aedea6; color: #000; } .reset{ float: right; background-color: green; } ``` script.js ``` 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 += `

${note} Mark as done

`; } 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 = "✓"; } ``` ### Example 3 [Dynamically creating a specific number of input form elements](https://stackoverflow.com/questions/14853779/dynamically-creating-a-specific-number-of-input-form-elements)

```xml Number of members: (max. 10)
Fill Details

``` ### Example 4 [Add input elements dynamically \[pure JS\]](https://stackoverflow.com/questions/52161831/add-input-elements-dynamically-pure-js)

```javascript 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); } ``` ```css * { margin: 0; padding: 0; font-family: Arial; } body { background-color: grey; } h1 { color: white; } h2 { color: darkgrey; } ``` ```xml ``` ### Example 5 [How to Create a Form Dynamically with the JavaScript?](https://www.geeksforgeeks.org/how-to-create-a-form-dynamically-with-the-javascript/) ``` Create a Form Dynamically with the JavaScript

GeeksforGeeks

Click on the button to create a form dynamically

``` ### Example 6.1.1 Pure Vanila JS

Fujifilm/gbalb-demo.cybozu.com4913/live.html ```html Adding dynamically input fields ``` ### Example 6.1.2 Pure Vanila JS + sweetalert2

```html Document ``` ### Example 6.2 jQuery Version Fujifilm/gbalb-demo.cybozu.com4913/live.html ```html Adding dynamically input fields ``` ### Example 7

Fujifilm/gbalb-demo.cybozu.com4913/live.html ```html Dynamic DropDown List | Javacodepoint

``` ### Example 8

```html Dynamic DropDown List | Javacodepoint

``` ### Example 9 ```html Dynamic DropDown List | Javacodepoint

``` ### Example [10](https://jsfiddle.net/techiedelight/f4e2nv1b/)

```html Adding dynamically input fields

``` Example 11

```html Adding dynamically input fields ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/javascript/add-elements-dynamically-full-ok.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.

Add input fields to form dynamically using jQuery

Write a text note and press the plus button

Add input elements dynamically

Please select any type

GeeksforGeeks