i am new in Javascript and need some help for a little problem.
i have a button to add textbox value but its value must be sequence number.
var i = 1;
function AddNew() {
if (i <= 3) { //if you don't want limit, you remove IF condition
i++;
var div = document.createElement('div');
div.innerHTML = '<input type="text" name="lineitem_' + i + '" value="' + i + '" maxlength="2" size="2"> <input type="text" name="materialcode_' + i + '" placeholder="Material Code" maxlength="18" size="18"><input type="button" onclick="removeItm(this)" value="-">';
document.getElementById('addingitem').appendChild(div);
}
}
function removeItm(div) {
document.getElementById('addingitem').removeChild(div.parentNode);
i--;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="testing.php" method="post">
<div id="addingitem">
<input type="text" name="lineitem_1" id="item" value="1" maxlength="2" size="2">
<input type="text" name="materialcode_1" placeholder="Material Code" maxlength="18" size="18">
<input type="button" name="addnew" id="Add_New()" onClick="AddNew()" value="New Item">
</div>
</form>
</body>
</html>
how to run subsequently?
if i remove middle of textbox then add new, value run wrong range and duplicate.
Here this working. I have do it from for loop
var i = 1;
function AddNew() {
if (i <= 3) { //if you don't want limit, you remove IF condition
i++;
var div = document.createElement('div');
div.innerHTML = '<input type="text" name="lineitem_' + i + '" value="' + i + '" maxlength="2" size="2"> <input type="text" name="materialcode_' + i + '" placeholder="Material Code" maxlength="18" size="18"><input type="button" onclick="removeItm(this)" value="-">';
document.getElementById('addingitem').appendChild(div);
}
}
function removeItm(div) {
i--;
var addingitem = document.getElementById('addingitem');
addingitem.removeChild(div.parentNode);
var inputs = addingitem.querySelectorAll('[name^="lineitem_"]');
for (var r = 0; r < inputs.length; r++) {
var item = inputs[r];
item.value = r + 1;
}
inputs = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="testing.php" method="post">
<div id="addingitem">
<input type="text" name="lineitem_1" id="item" value="1" maxlength="2" size="2">
<input type="text" name="materialcode_1" placeholder="Material Code" maxlength="18" size="18">
<input type="button" name="addnew" id="Add_New()" onClick="AddNew()" value="New Item">
</div>
</form>
</body>
</html>
Related
Hello I have a problem with such a task I totally don't know how to get down to it, I hope someone will help me to write an application allowing to calculate the sum and the difference of two 2-dimensional numerical tables. Each of these tables should have 2 lines and 3 columns. Input data - the values of individual array elements - enter the keypads. Present the results on screen, on the same website.
My code is below:
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
suma = tablica[0] + tablica[1];
}
document.getElementById("div1").innerHTML = "Suma = " + suma;
</script>
</body>
</html>
First of all the last line of your script is outside the function while it uses a variable that is inside, this will not work but can easily be fixed by moving the line inside the function.
The second issue is that Number converts a string to a number. It does not sum them up. Instead move each input value to it's own Number function and add them together with the + sign.
For the difference in the two numbers you can just subtract one from the other. With Math.abs() we turn the number into a positive. This way we don't need to think about which of the two numbers is higher.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<div id="div2"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value) + Number(input2.value) + Number(input3.value);
tablica[1] = Number(input4.value) + Number(input5.value) + Number(input6.value);
var suma = tablica[0] + tablica[1];
var roznica = Math.abs(tablica[0] - tablica[1]);
document.getElementById("div1").innerHTML = "Suma = " + suma;
document.getElementById("div2").innerHTML = "Różnica = " + roznica;
}
</script>
</body>
</html>
Suma undefined means you never created a variable and then you used it which caused the error below code is working just put all your code inside onclick function so when clicked it calculates and add it to html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
let suma = tablica[0] + tablica[1];
document.getElementById("div1").innerHTML = "Suma = " + suma;
}
</script>
</body>
</html>
i want to make form as many as input text, i'm strugling to make a new form into the new div. if input is 3 then make 3 form, if input is 2 then input is just 2.
<input type="text" id="CountForm">
<form name="regis" id="regis" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>
Is it this ?
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
You can do like this as below
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
div{
padding:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>jQuery add textbox example</title>
<body>
<h1>jQuery add textbox example</h1>
<body>
<form name="regis" id="regis" method="post" action="">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</form>
</body>
You may Try For this:
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" placeholder="please enter name"/>
<input id="email1" name="email1" placeholder="please enter email" />
<input id="phone1" name="phone1" placeholder="please enter phone"/>
<input type="button" id="button12" name="button12" value="submit"/>
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
I am currently creating a signup form for a client and one of the requirements is for the form to be able to transmit and store data offline. I have already tried to work with a database, but I am still in beginning stages learning php so I decided t quit while I am behind.
I found another method of storign data locally suing localstorage with JS, but I am unable to display the stored data in a dynamic table.
Any help on this matter would be greatky appreciated, here is the code I have so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>CIVIC Registration Form</title>
<link rel="icon" href="civic.ico" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/styles.css">
<style>
p.finePrint {
color:#818185;
font-size:70%;
}
</style>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript">
(function()
{
var Applicant = {
fname: "",
lname: "",
age: 0,
phonenum: "",
email: ""
};
var storageLogic = {
saveItem: function (){
var lscount = localStorage.length;
var inputs = document.getElementsByClassName("form-control");
Applicant.fname = inputs[0].value;
Applicant.lname = inputs[1].value;
Applicant.age = inputs[2].value;
Applicant.phonenum = inputs[3].value;
Applicant.email = inputs[4].value;
localStorage.setItem("Applicant_" + lscount, JSON.stringify(Applicant));
location.reload();
},
loaddata: function() {
var datacount = localStorage.length;
if (datacount > 0)
{
var render = "<table border='1'>";
render += "<tr><th>First Name</th><th>Last Name</th><th>Age</th>" +
"<th>Phone Number</th><th>Email</th>";
for (i=0; i < datacount; i++) {
var key = localStorage.key(i);
var applicant = localStorage.getItem(key);
var data = JSON.parse(applicant);
render += "<tr><td>" + data.fname + "</td><td>" + data.lname + "</td>";
render += "<td>" + data.age + "</td>";
render += "<td>" + data.phonenum + "</td>";
render += "<td>" + data.email + "</td>";
}
render += "</table>";
var newTable = document.getElementById("dvContainer");
newTable.innerHTML = render;
}
}
};
var btnsubmit = document.getElementById('btnsubmit');
btnsubmit.addEventListener('click', storageLogic.saveItem(), false);
window.onload = function() {
storageLogic.loaddata();
};
})();
</script>
</head>
<body>
<div class="container">
<h2 style="color:#005E28"><img src="civic.jpg" height="50" width="50"></img>CIVIC Registration Form</h2>
<form role="form">
<div class="form-group">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" placeholder="First Name">
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" placeholder="Last Name">
</div>
<div class="form-inline">
<label for="age">Age: <input type="text" class="form-control" id="age" placeholder="Age"></label>
<label for="phone">Phone Number: <input type="text" class="form-control" id="phonenum" placeholder="Phone Number"></label>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div>
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
<input id="btnsubmit" type="button" value="Submit" class="btn btn-success"/>
<p class="finePrint">*By submitting this form you agree to receiving emails regarding
upcoming events and other information from CIVIC Ontario.
If you have any questions or concerns, please email civicontario#gmail.com*</p>
</div>
</form>
</div>
<div id="dvContainer" class="conatiner">
</div>
</body>
</html>
There are primarily two errors you need to fix:
Move the getElementById() and addEventListener() for id btnsubmit to your onload handler. The way it is now, it tries to find the element before it is actually in the DOM.
You are accidentally invoking the handler that is the second parameter of addEventListener(). In other words, get rid of the () after the second parameter.
Here is a version of your code with those changes that seems to minimally work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CIVIC Registration Form</title>
<link rel="icon" href="civic.ico" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/styles.css">
<style>
p.finePrint {
color:#818185;
font-size:70%;
}
</style>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script type="text/javascript">
(function()
{
var Applicant = {
fname: "",
lname: "",
age: 0,
phonenum: "",
email: ""
};
var storageLogic = {
saveItem: function (){
var lscount = localStorage.length;
var inputs = document.getElementsByClassName("form-control");
Applicant.fname = inputs[0].value;
Applicant.lname = inputs[1].value;
Applicant.age = inputs[2].value;
Applicant.phonenum = inputs[3].value;
Applicant.email = inputs[4].value;
localStorage.setItem("Applicant_" + lscount, JSON.stringify(Applicant));
location.reload();
},
loaddata: function() {
var datacount = localStorage.length;
if (datacount > 0)
{
var render = "<table border='1'>";
render += "<tr><th>First Name</th><th>Last Name</th><th>Age</th>" +
"<th>Phone Number</th><th>Email</th>";
for (i=0; i < datacount; i++) {
var key = localStorage.key(i);
var applicant = localStorage.getItem(key);
var data = JSON.parse(applicant);
render += "<tr><td>" + data.fname + "</td><td>" + data.lname + "</td>";
render += "<td>" + data.age + "</td>";
render += "<td>" + data.phonenum + "</td>";
render += "<td>" + data.email + "</td>";
}
render += "</table>";
var newTable = document.getElementById("dvContainer");
newTable.innerHTML = render;
}
}
};
window.onload = function() {
storageLogic.loaddata();
var btnsubmit = document.getElementById('btnsubmit');
btnsubmit.addEventListener('click', storageLogic.saveItem, false);
};
})();
</script>
</head>
<body>
<div class="container">
<h2 style="color:#005E28"><img src="civic.jpg" height="50" width="50"></img>CIVIC Registration Form</h2>
<form role="form">
<div class="form-group">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" placeholder="First Name">
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" placeholder="Last Name">
</div>
<div class="form-inline">
<label for="age">Age: <input type="text" class="form-control" id="age" placeholder="Age"></label>
<label for="phone">Phone Number: <input type="text" class="form-control" id="phonenum" placeholder="Phone Number"></label>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div>
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
<input id="btnsubmit" type="button" value="Submit" class="btn btn-success"/>
<p class="finePrint">*By submitting this form you agree to receiving emails regarding
upcoming events and other information from CIVIC Ontario.
If you have any questions or concerns, please email civicontario#gmail.com*</p>
</div>
</form>
</div>
<div id="dvContainer" class="conatiner">
</div>
</body>
</html>
I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>
I cant get everything centered.
this is what i get:
xxx xxx xxx xxx xxx
what I want is
xxx
xxx
xxx
xxx
xxx
centered horizonally in the webpage
I also cant get the average functionality to work.I dont know where I am going wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Average Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<h1 style="text-align:center;">My Average Calculator</h1>
<script type="text/javascript">
function getTotal() {
var form = document.getElementById('number');
var numb1 = parseInt(form.numb1.value);
var numb2 = parseInt(form.numb2.value);
var numb3 = parseInt(form.numb3.value);
var numb4 = parseInt(form.numb4.value);
var numb5 = parseInt(form.numb5.value);
var total = document.getElementById('total');
var average = document.getElementById('average');
if (!numb1) {
numb1 = 0;
}
if (!numb2) {
numb2 = 0;
}
if (!numb3) {
numb3 = 0;
}
if (!numb4) {
numb4 = 0;
}
if (!numb5) {
numb5 = 0;
}
total.innerHTML = 'Total: ' + (numb1 + numb2 + numb3 + numb4 + numb5);
average.innerHTML = 'Average: ' + (total / 5);
}
</script>
</head>
<form id="number">
<body>
First Number: <input type="text" name="numb1" onkeyup="getTotal ();" />
Second Number: <input type="text" name="numb2" onkeyup="getTotal();" />
Third Number: <input type="text" name="numb3" onkeyup="getTotal();" />
Fourth Number: <input type="text" name="numb4" onkeyup="getTotal();" />
Fifth Number: <input type="text" name="numb5" onkeyup="getTotal();" />
<div id="total">Total: </div>
<div id="average">Average: </div>
</body>
</html>
total / 5, where total is an element you fetched by ID. No wonder it doesn't work ;)
Also, you may want to learn about loops. Instead of numb1 through numb5, iterate.
Something like this could work nicely:
<fieldset id="numbers"><legend>Numbers</legend>
First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="total">Total: --</div>
<div id="average">Average: --</div>
<script type="text/javascript">
function getTotal() {
var inputs = document.getElementById('numbers').getElementsByTagName('input'),
count = inputs.length, i, total = 0;
for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
document.getElementById('total').firstChild.nodeValue = "Total: "+total;
document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
}
</script>
add BR tag <br/> at the end of every input tag
and change this
average.innerHTML = 'Average: ' + ((numb1 + numb2 + numb3 + numb4 + numb5) / 5);