Menu
I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.
My HTML Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br /> <a href="#" id="filldetails">Fill Details</a> So, a user will enter an integer value (I'm checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.
I'm not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.
910
To create a form dynamically with JavaScript, we can use the document. createElement method to create the element. Then we can use the setAttribute method to set the element attributes. Then we can use the appendChild method to append the elements into the parent element.
In an HTML form, whenever you want the user's input on something, you use an <input/> tag. To turn this into a text field, all you have to do is set that input's type to ''text'' like this: <input type=''text''/>.
You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():
If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.
Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.
<html> <head> <script type='text/javascript'> function addFields(){ // Number of inputs to create var number = document.getElementById("member").value; // Container <div> where dynamic content will be placed var container = document.getElementById("container"); // Clear previous contents of the container 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>See a working sample in this JSFiddle.
120
Try this JQuery code to dynamically include form, field, and delete/remove behavior:
$(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $(".add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container1"> <button class="add_form_field">Add New Field <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div><input type="text" name="mytext[]"></div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
