How can I create a dynamic form using jQuery - javascript

How can I create a dynamic form using jQuery. For example if I have to repeat a block of html for 3 times and show them one by one and also how can I fetch the value of this dynamic form value.
<div>
<div>Name: <input type="text" id="name"></div>
<div>Address: <input type="text" id="address"></div>
</div>

To insert that HTML into a form 3 times, you could simply perform it in a loop.
HTML:
<form id="myForm"></form>
jQuery:
$(function() {
var $form = $('#myForm'); // Grab a reference to the form
// Append your HTML, updating the ID attributes to keep HTML valid
for(var i = 1; i <= 3; i++) {
$form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
}
});
As far as fetching values, how you go about it would depend on your intent. jQuery can serialize the entire form, or you can select individual input values.
.append() - http://api.jquery.com/append/

This is a pretty broad question and feels a lot like 'do my work' as opposed to 'help me solve this problem.' That being said, a generic question begets an generic answer.
You can add new address rows by using the append() method and bind that to either the current row's blur - although that seems messy, or a set of +/- buttons that allow you to add and remove rows from your form. If you're processing the form with PHP on the server side, you can name the fields like this:
<input type='text' name='address[]' />
and php will create an array in $_POST['address'] containing all the values.

Related

How can I get user input with HTML to handle in JS?

My website has a bunch of rows (as many as the user needs) consisting of two fields. I want the user to fill in all the fields, and submit them. However, I believe this can all be handled client-side, since I want to use the field values in javascript code.
this is the html code:
<div class="players">
<div id="wrapper">
<span>Name: <input type="text"> Dex modifier: <input type="text"></span>
</div>
<input type="button" value="add player" onclick="add_fields()">
<input type="button" value="submit" onclick="submit()">
</div>
and my javascript function
function add_fields() {
document.getElementById("wrapper").innerHTML += '<br><span>Name: <input type="text"> Dex modifier: <input type="text"></span>\r\n'
}
I need a way to get all of the form values (right now with an unwritten function submit()) and store them as variables.
It is good practice to use a <form> element when handling multiple inputs simultaneously. The form element can access all of the inputs it has inside of it. This way you won't have to select each individual input but can select and process them all together.
So start with the form wrapping. Then instead of listening for the onclick on the <input type="button" value="submit" onclick="submit()">, listen for the submit event on the form element.
It is considered best practice to listen to events by using the .addEventListener() method. This way you can set multiple event handlers to a single event without overwriting the onclick or onsubmit property of an element. Chris Baker does an excellent job explaining it in this SO post.
So now that you have a form, how do we get the data out of it? You could use the modern class of FormData. FormData creates an iterable object, which means we can loop over it using for..of, that holds all the names and values of the inputs in a form. It also has methods to add, remove and get the keys or values from the object. The FormData constructor can take a <form> element as argument like so:
var formElement = document.querySelector('form'); // Select the form.
var formData = new FormData(form); // Pass the form into the FormData class.
Now the formData variable holds all of the names and values of the form.
I've added a working example for you to try out. Please read up on the documentation I provided you to understand what is going on and what you can do with it.
Quick sidenote: FormData and the for..of loop are relatively new and are not supported in IE. If that is a dealbreaker I would suggest you don't use the FormData constructor and simply loop over the elements within the form.
Edit: I changed to loop from formData.values() to formData to get both the name and value attributes of each input. This is identical to formData.entries() as show in the MDN documents.
// Create storage for the values.
var values = [];
// Get the form element.
var form = document.getElementById('form');
// Add the submit event listener to the form.
form.addEventListener('submit', submit);
function submit(event) {
// Get the data from the form.
// event.target represents the form that is being submitted.
var formData = new FormData(event.target);
// Loop over each pair (name and value) in the form and add it to the values array.
for (var pair of formData) {
values.push(pair);
}
// Log the values to see the result.
console.log(values);
// Prevent the form from default submitting.
event.preventDefault();
}
<div class="players">
<!-- Wrap a form around the inputs -->
<form id="form">
<div id="wrapper">
<span>Name: <input type="text" name="name"> Dex modifier: <input type="text" name="dex"></span>
</div>
<input type="button" value="add player" onclick="add_fields()">
<!-- Notice type="submit" instead of type="button". This is important -->
<input type="submit" value="submit">
</form>
</div>
You need to be able to get the values of the dynamically added input elements.
First, you need to add them in a way you can separate them. So, providing each pair an exclusive parent is necessary.
document.getElementById("wrapper").innerHTML += '<div id="aparent"><br><span>Name: <input type="text" id="name"> Dex modifier: <input type="text" id="dex"></span><div>\r\n'
Now, get all the parent elements and iterate through them to fill an array of "name" and "dex-modifier" pairs. Use a library like JQuery for easy DOM manipulation. This seems to be your "submit" function.
var userData = [];
//Iterate all the parents
$('#aprane').each(function() {
//Get the values of each pair and put them in an array
userData.push({name: $(this).children('#name').val(), dex: $(this).children('#dex').val()}
})

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function.
document.getElementById('var1').innerHTML = test;
alert(test);
I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:
#helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="#name" id="#id" #toHtmlArgs(args)> }
innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:
<input ...>test</input>
I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.
document.getElementById('var1').value = test;
If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.
Such as various JS two-way component template binding libraries.
For instance, you can simply do the following:
HTML:
<div id="myapp">
<input id="var1"/>
<button>Submit</button>
</div>
JS:
mag.module('myapp',{
view : function(state){
var test= 'tester';
state.button= {
_onclick:function(){
state.var1=test
}
}
}
});
Here is working example of the above example:
http://jsbin.com/ciregogaso/edit?html,js,output
Hope that helps!

How to read multiple rows of Form elements?

I have form elements in multiple rows. What is the best way to name these elements so that i can read all the values in the form and generate a JSON with the values? Since HTML does not support Arrays what is the best alternative?
Each row has 2 text elements and 1 Select element. These rows are generated dynamically.
Edit: Basically i want an easy way to convert my data into JSON so that i can pass it to a service.
Each of my row looks like this
<tr><td><input type="text"></input></td>
<td><select><option>Exact</option><option>Regex</option><option>Action</option></select></td>
<td><input type="text"></input></td></tr>
<tr><td><input type="text"></input></td>
<td><select><option>Exact</option><option>Regex</option><option>Action</option></select></td>
<td><input type="text"></input></td></tr> .....
I think I understand. You can just change your HTML:
<div class="form"> // I prefer getting a namespaced super element
<div class="row">
<input name="name[0][yo]"/>
// Other elements
</div>
<div class="row">
<input name="name[1][yo]"/>
// other elements
</div>
</div>
Then in JQuery:
$.post('to_my_page', $('.form input, .form select, .form textarea').serialize(), function(data){
// Done
}, 'json');
That should allow you to post an array of input rows to another page.
This is of course an extremely simple and basic example.
To extract all the data from the form you can simply use jQuery's serializeArray() method just like this:
$('form').serializeArray();
jsFiddle example
A good way to accomplish that is put an id on the values, for example is you are using just a text wrap it in a span then when you need to make the JSON iterate over rows and get the data from it, i.e.:
var elements = []
$('#formId tr').each(function (i, e){
elements.push({
ElementTd1: $('#td1').val()
});
});

FORM looks empty according to DOM-inspector

I have an issue with an web app im working on. The input-fields in the form is added by jQuery. My form looks like this in the HTML-editor:
<form id="profile" method="post" action="Profile/UpdateProfile">
<tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">#ViewBag.Name</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform">#ViewBag.Address</parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">#ViewBag.ZIP</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform">#ViewBag.Pnumber</parameter></td></tr>
</form>
But it appears like this in the DOM-inspector:
<form id="profile" method="post" action="Profile/UpdateProfile"></form>
<tbody><tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">Anton Gildebrand</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform"></parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">0</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform"></parameter></td></tr>
</tbody>
It may look weird that i have no inputs, but when the user presses an edit-button, the "parameter"-tag transforms into textinputs using this javascript:
$('#' + id + ' .transform').each(function (index) {
var val = $(this).html();
$(this).html('');
var tag = $(this).parent().html();
var newTag = tag.replace('<parameter', '<input type="text" value="' + val + '"');
newTag = newTag.replace('</parameter', '</input');
$(this).parent().html(newTag);
});
As you can see the "parameter"-tags isn't wrapped by the form in the DOM-inspector, and nothing is posted (i debugged using Fiddler) to the server. How do i solve it?
Wrap the form around the entire table.
You can't put forms inside a table element but outside a table cell. The result you see if the browser trying to perform error recovery. It is usually a good idea to make use of a validator (although you need to run it on the markup you intend to generate if you are generating it using JS).
(Also, use css for layout and use label elements instead of bold elements).

Accessing an array of HTML input text boxes using jQuery or plain Javascript

I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.
So my first question is, is this achievable using HTML? Are forms designed to work that way?
If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?
I've attempted to achieve this using the following jQuery code:
someval = $('#field[1]').val();
and
someval = $('#field')[1].val();
and the following JavaScript:
someval = document.getElementById('related_link_url')[1].value;
But I've not had any luck.
Thanks in advance.
Edit:
I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.
Give each element a class and access the group using jQuery:
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
$("input.fields").each(function (index)
{
// Your code here
});
This will run the anonymous function on each input element with a classname of "fields", with the this keyword pointing to the current element. See http://api.jquery.com/each/ for more info.
First of all, id attribute cannot contains [ or ] character.
There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
You can also use attribute selector:
$("input[name^=field]");
I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all input elements (document.getElementsByTagName) and then loop through array of these elements and check each element (whether it has name attribute which value starts with field).

Categories

Resources