Take this code for example:
var add = function() {
var added = document.createElement("div");
document.getElementById("ID").appendChild(added);
added.setAttribute("id", "Task " + document.getElementById("ID").childElementCount);
added.appendChild(document.createElement("input"));
added.appendChild(document.createElement("br"));
};
<form id="ID">
Name:
<br>
<input type="text" name="name">
<br>
</form>
<button onclick="add()">Add</button>
Every time you click the button, a new input is created for the form.
Is this the best way of making the number of form elements dynamic?
I looked into using HTML templates, but it didn't seem like there was a way to edit the ID of each individual additional element, which would be necessary for my applications.
Also, a subquestion: I'm using AngularJS and can't figure out how to add the bs-datepicker directive to my elements with JavaScript. How can I do that?
Here's an example of bs-datepicker which I know works:
<input type="text" class="form-control"
ng-model="options.fromDate"
max-date="{{options.toDate}}"
start-date="{{options.currentDateValue.toString()}}"
start-week="1" placeholder="From" bs-datepicker>
Related
<form id="search" action="https://www.google.com/search" method="get">
<input type="text" name="q" placeholder="Google 검색 또는 URL 입력">
</form>
literally I want to change dynamically to DOM
I'm not sure what do you ask but it seems like you want to dynamically add this element to DOM.
For this, you can put this markup in a single line and wrap it in single quotes('').
var formElement = ' '
or you can just use es6 string literals(``).
I have an HTML form similar to this.
<label for="person-firstname">First Name</label>
<input type="text" id="person-firstname" name="person-firstname"/>
<label for="person-lastname">Last Name</label>
<input type="text" id="person-lastname" name="person-lastname" />
<label for="person-phone">Phone</label>
<input type="text" id="person-phone" name="person-phone" />
<!-- Button will add the same input as above -->
<button type="button" onclick="addAnotherPersonSection()">+ Add Another Person</button>
<!-- More HTML of different section of the overall form -->
<label for="person-terms">Agree to Terms and Conditions</label>
<input type="checkbox" id="person-terms" name="person-terms" />
<label for="person-initals">Initals</label>
<input type="text" id="person-initals" name="person-initals" />
What I'm trying to do is map out the input into an object with the key name as the name of the input and value being the input text.
{
"Persons":[{
"person-firstname":input.value,
"person-lastname":input.value,
"person-phone":input.value,
"person-terms":input.value,
"person-initals":input.value
}, {
"person-firstname":input.value,
"person-lastname":input.value,
"person-phone":input.value,
"person-terms":input.value,
"person-initals":input.value
}]
}
The problem is naming the key of the object as "person-firstname" instead of when $("input[name^=business]").serializeArray(); creates it the key is named "name" and is structured wrong.
{ name: "person-firstname", value:input},
{ name: "person-lastname", value:input}
I'm just looking for a JavaScript or jQuery solution to create a dynamic object based on multiple inputs of the same name. Also, have control of the key name.
The crux of the problem is that you can't have multiple form fields with the same name. If you do, that's called a "naming collision" which will bust native functionality of an HTML form. But you can use a sort of template-like logic and generate variant names that make sense base on the number of people that are added to the HTML form. My example may not be what you're looking for exactly, but it's what I came up with:
https://codesandbox.io/s/admiring-hypatia-30lrv
Say, I have a simple form:
ie. Just for example, although will be a lot larger.
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
I would like to make it so every time a user 'submits' the form, rather then post it with php. I would like to use vanilla javascript to take the form contents that were inserted by the user, and store all content in a javascript variable with the naming convention similar to:
var = submission1
var = submission2
var = submission3
..and it would have all user submitted form field contents. Later down the line I could grab the form field contents via variable. I want to accomplish this with pure vanilla js. No php nor js libraries, and I don't want to alter the mark-up either.
I have a simple form as follows so a user can type the name of a question:
<input type="text" id="question_name" name="question_name" value="">Question Name: <br />
Add Another
<div id="container"/>
<input id="go" name="btnSubmit" type="submit" value="Submit" class="btn" />
I am wanting to create a Javascript function (addNewQuestion()) which allows a user to add another question dynamically by clicking the "Add Another" link. All the text boxes with the questions should be displayed on the screen.
I understand that it is using getElementById and most likely a for loop but I keep hitting a brick wall. Can anyone show me a simple solution please?
There are many ways to do this. Here's a simple example in plain JavaScript. Note that you will either want to avoid using ids so they aren't duplicated in the DOM, or you will want to dynamically name them.
function addNewQuestion() {
var container = document.getElementById("questions");
var question = document.querySelector(".question");
container.appendChild(question.cloneNode(true));
return false;
}
.question { display: block }
<div id="questions">
<label class="question">
Question Name:
<input type="text" value="" />
</label>
</div>
Add Another
I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:
I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.
I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input
I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.
Heres what the form looks like:
<form action="submit.php" method="post">
Enter Title:<input type="text" name="title" size="20"><BR>
Enter Class Code:<input type="text" name="class" size="20"><BR>
Enter Base Number:<input type="text" name="base" size="20"><BR>
Enter Dash Number:<input type="text" name="dash" size="20"><BR>
<input type="submit" value="Submit">
Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.
Thomas
From what I'm understanding this should do what you describe.
$('#yourForm input').bind('keyup', function(e) {
var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
$('#preview').html(docNum);
});
For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.
http://jsfiddle.net/nuY2M/
Include this html where you want the document number preview to display:
Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>
Add this script to populate the values:
function updateDocNumPreviewPart(fieldName)
{
var preview = document.getElementById(fieldName + "Preview");
var field = document.forms[0][fieldName];
preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
updateDocNumPreviewPart("class");
updateDocNumPreviewPart("base");
updateDocNumPreviewPart("dash");
}
Finally, add some code to your form fields to call the script:
<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />