I am using a javascript function to populate html element generated automatically after submitting a form from a different div.
Here is the html:
<html >
<body>
<div class="wrapper">
<div id="one">
<form name="form">
<fieldset>
<legend>BILLING</legend>
<div> <label for="ex1">Procedure/Drug</label>
<input type="text" name="procdrug" id="procdrug"/><br><br>
<label>Amount</label>
<input type="text" name="amount" id="amount"/><br><br>
<input type="button" onclick="addInput()" name="add" value="Add input field" style="margin-left:150px" />
</div>
</fieldset>
</form>
</div>
<div id="two">
<fieldset>
<legend>TN QUEUE</legend>
<label><B>Procedure/Drug</b></label><label><b>Amount</b></label><br>
<div id="text">
</div>
<label><b>Total</b></label>
<input type="text" name="total" id="total"/>
</fieldset>
</div>
</body>
</html>
Here is the javascript function
<script language="javascript">
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
if (fields != 10)
{
document.getElementById('text').innerHTML += "<input id='pdgen' type='text'/>";
document.getElementById('text').innerHTML += "<input id='amtgen' type='text'/><br />";
document.getElementById('pdgen').value=pd;
document.getElementById('amtgen').value=amount;
fields += 1;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
</script>
The generated elements values are posted from the form and increment on every submit. My problem is the only on submit first element is updated with the new value:
Sample results
Procedure/Drug Amount
Amoxyl 200
blank element blank element
blank element blank element
blank element blank element
Total
The problem is you are adding your elements with the .innerHtml += method which is avoiding the values entered before. You need to use appendChild method to add new elements. Here is your new code :
fields = 0;
function addInput() {
var amount=document.getElementById('amount').value;
var pd=document.getElementById('procdrug').value;
var br = document.createElement('br');
if (fields != 10)
{
var input1 = document.createElement('input');
input1.setAttribute('id','pdgen' + fields);
input1.value = pd;
var input2 = document.createElement('input');
input2.setAttribute('id','amtgen' + fields);
input2.value = amount;
document.getElementById('text').appendChild(input1);
document.getElementById('text').appendChild(input2);
document.getElementById('text').appendChild(br);
fields++;
}
else
{
document.getElementById('text').innerHTML += "<br />Only A Maximum of 10 is allowed.";
document.form.add.disabled=true;
}
}
FIDDLE
Related
I'm generating a form using document.getElementById.innerHTML and the form is supposed to have a submit button at last. But the form has variable number of fields which are added by clicking on a button, the problem is when a field is added it is inserted below the save button.
<button class="fontButton" onClick="addField()">+</button>
<form id="tasksDataForm"></form>
<script>
var f = document.getElementById("tasksDataForm");
function addField() {
var tasksDataFields = `<br/> <input type="text"> <br/>`;
<!-- I have to put this button to end of the form and all fields that are added to form should be inserted above it -->
if(tasks.innerHTML == ''){
tasks.innerHTML += '<input type="submit" value="Save">';
}
tasks.innerHTML += tasksDataFields;
}
</script>
Thanks to Randy Casburn for the suggestion, it did the trick.
<button class="fontButton" onClick="addField()">+</button>
<form id="tasksDataForm">
<div id="fieldsDiv"></div>
<div id="submitDiv"></div>
</form>
<script>
var tasks = document.getElementById("fieldsDiv");
function addField() {
var tasksDataFields = `<br/> <input type="text"> <br/>`;
var submitDiv = document.getElementById("submitDiv");
if(submitDiv.innerHTML == '')
submitDiv.innerHTML += '<input type="submit" value="Save">';
tasks.innerHTML += tasksDataFields;
}
</script>
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>
I'm trying to add new fields via a button into my form. However, it adds it to the outside of the form. Any ideas on what to edit to accomplish this? Thanks.
My HTML:
<div id="page">
<h1>Quick Order</h1>
<div id="dynamicInput">
<form method="post" name="QuickOrderMulti">
<input type="hidden" name="formName" value="dmiformQuickOrderMulti">
<p>Product # <input type='Text' name="ProductNumber" title="Enter Product #"></p>
<p>Product # <input type='Text' name="ProductNumber" title="Enter Product #"></p>
<input type="submit" value="Add"><input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>
</div>
</div> <!-- page -->
My JavaScript:
<script type="text/javascript">
var counter = 0;
var limit = 3;
function addInput(dynamicInput){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Product # " + (counter + 1) + " <br><input type='text' name='ProductNumber[]'>";
document.getElementById(dynamicInput).appendChild(newdiv);
counter++;
}
}
</script>
You're appending to the DIV surrounding the form thus the fields won't be inside the child form.
Either put the form around your "dynamicInput" div... or insert inside the form instead.
Option A:
<form method="post" name="QuickOrderMulti">
<div id="dynamicInput">
...
</div>
</form>
Option B:
<div id="dynamicInput">
<form method="post" name="QuickOrderMulti" id="QuickOrderMulti">
...
</form>
</div>
<script type="text/javascript">
...
document.getElementById('QuickOrderMulti').appendChild(newdiv);
^^^^^^^^^^^^^^^
...
</script>
You're adding the input to the div, not the form. Just give the form an id and add the input fields to that.
document.getElementById("formId").innerHTML = "Product # " + (counter + 1) + " <br><input type='text' name='ProductNumber[]'>";
Try:
<script type="text/javascript">
var counter = 0;
var limit = 3;
function addInput(dynamicInput){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var parent = document.getElementById('myform')
var element = null;
try { // IE
element = document.createElement('<input type="text" name="ProductNumber[]">');
}
catch (e) { // W3C
element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("name", "ProductNumber[]");
}
parent.appendChild("Product # " + (counter + 1) + element);
counter++;
}
}
</script>
I have a query regarding form generation based on current inputs,
like in applications the text input appear based on our choice.
I am trying to make it work using JavaScript , but my code doesn't do anything:
<html>
<head>
<script>
function addInput() {
if (fields != 10) {
document.getElementById('d_div').innerHTML += "<input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}}
</script>
</head>
<body>
<div align = "center">
<form method = "post" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
Select a Template<br />
<select name = "template" id = "rawquery">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
<br/>
<input type = "submit" name = "submit"><br /><br />
</form>
</div>
<textarea name = "raw" rows = "10" cols = "50" id = "Raw">raw template</textarea>
<br /><br />
<form id="d_form">
<input type="submit" onclick="addInput()" name="newform" value="Click to enter values">
</form>
<div id="d_div"> </div>
</div>
<br> <br> <br> <br>
</body>
</html>
The code making drop-down menu is not used here.
When I click on the button to enter values it doesn't give me a new text area; can you please help, I am very new to this and learning?
where is 'fields'-initialization?
don't forget returning false, if really don't need to submit form #d_form clicking button #newform
You have a lot of problems with your tags. First make those right. I am giving an example
of creating dynamic tags. I think you can use it.copy and see how it works
<script type="text/javascript">
fields=0;
function addInput() {
textvalue=document.getElementById("raw").value;
var opt = document.createElement("option");
if (fields != 10) {
opt.text=textvalue;
document.getElementById('rawquery').options.add(opt);
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled = true;
}
}
</script>
I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:
<script>
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form['field[]'];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I was expecting that will work but i was obviously wrong:(
With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything!
Thanks for your time anyway, and sorry if i have made grammar mistakes!
<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];
http://jsfiddle.net/sZ4sd/