I was trying to add some rows of input to my form so I will be able to post them to the back-end in one request, and also be able to add more of the same information type if need be
this is the code that I'm using:
<!DOCTYPE html>
<head>
</head>
<body>
<form action="#" method="post">
<input id="firstElement" type="text" name="firstElement" value="">
<button onClick="addRow()">add row</button><br>
<div id="container"></div>
<input type="submit" value="submit">
</form>
<script>
function addRow() {
var container = document.getElementById("container");
var myElement1 = document.getElementById("firstElement").value;
document.getElementById("firstElement").value = "";
var i = 0;
var input1 = document.createElement("input");
input1.type = "text";
input1.name= "myElement1"+ i;
input1.disabled = "true";
input1.value = myElement1;
container.appendChild(input1);
container.appendChild(document.createElement("br"));
i++;
}
</script>
</body>
this code shows the output for a second or less and then nothing...
The default type attribute of a button element is submit, so when you click the button you're actually submitting your form. Change that easily by specifying the type to be a button instead:
<button onClick="addRow()" type="button">add row</button>
jsFiddle example
Related
I'm new to this website and I'm just learning how to code. My program doesn't write anything or create an input, can someone help me and spot the mistake?
<html>
<head><title>array exchange</title></head>
<body>
<form id="ne" >
number of array elements: <input type="number" name="el_array" ><br>
<input type="submit" value="execute" onsubmit="create()">
</form>
</body>
<script>
function create(){
var numel = document.getElementById("ne");
var x = document.createElement("INPUT");
x.setAttribute("type", "number");
}
</script>
</html>
You need to append child then it will be reflected in DOM
numel.appendChild(x)
Also use type="button" instead of type="submit" and onclick event handler
<input type="button" value="execute" onclick="create()">
function create() {
var numel = document.getElementById("ne");
var x = document.createElement("INPUT");
x.setAttribute("type", "number");
numel.appendChild(x);
}
<form id="ne">
number of array elements: <input type="number" name="el_array"><br>
<input type="button" value="execute" onclick="create()">
</form>
You can read about the usage of the form tag as well for better understanding:
https://www.w3schools.com/TAgs/tag_form.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
İ recommend starting read from MDN.My opinion MDN The best documentation for Javascript:
https://developer.mozilla.org/bm/docs/Web/JavaScript/Guide/Introduction
var input = document.createElement("input");
input.type = "submit";
document.body.appendChild(input);
input.addEventListener("click",function createEl(){
var numel = document.getElementById("ne");
var x = document.createElement("INPUT");
x.setAttribute("type", "number");
numel.appendChild(x);
});
<form id="ne" >
number of array elements: <input type="number" name="el_array" >
<br>
</form>
I want to create text fields according to user's input and show the text fields through JavaScript function but this code is not working!
<html>
<head>
<title>Create text Fields according to the users choice!</title>
<script type="script/JavaScript">
function createTextField(){
var userInput = parseInt(document.form2.txtInput.view);
for(var i=0; i<=userInput;i++)
{
document.write('<input type="text">');
}
}
</script>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
Please Replace this line:
var userInput = parseInt(document.form2.txtInput.view);
To
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
function createTextField(){
// alert(document.getElementById('txtInput').value);
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
for(var i=0; i<userInput;i++)
{
document.write('<input type="text">');
}
}
<html>
<head>
<title>Create text Fields according to the users choice!</title>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput" id="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
You shouldn't use document.write. The correct way to do it is to append the inputs to a div.
Demo on Fiddle
HTML:
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>Input:
<input type="text" name="txtInput" />
<input type="button" name="btnInput" value="Create" />
<div></div>
</form>
JavaScript:
var btn = document.getElementsByTagName("input")[1];
btn.onclick = function () {
var userInput = parseInt(document.getElementsByTagName("input")[0].value, 10);
for (var i = 0; i <= userInput - 1; i++) {
document.getElementsByTagName("div")[0].innerHTML += "<input type='text' />"
}
};
Jquery is better option to add dynamic input/div's easy to manipulate DOM.
Check the following code
<div class="box">
<label> Enter input value </label>
<input type="number" id="in_num"/>
<button type="button" id="submit"> submit </button>
<h3> Append input values</h3>
<div id="dynamicInput"></div>
</div>
$(document).ready(function(e){
$('#submit').click(function(){
var inputIndex = $('#in_num').val();
for( var i=0; i<inputIndex; i++)
{
$('#dynamicInput').append('<input type=text id=id_'+ i +'/>');
}
});
});
Demo URl: http://jsfiddle.net/sathyanaga/75vbgesm/3/
Change:
var userInput = parseInt(document.form2.txtInput.view);
To:
var userInput = parseInt(document.getElementById("txtInput").value);
And give the input textbox an id (I used "txtInput", but it can be anything).
I believe you also need to change the loop from, when I typed "2" it created 3 inputs instead of 2.
I'm working on a web form with a textbox for pets and an "add pet" button. Each time the button is clicked, an additional textbox should be displayed below the original one.
I'm assuming this would be accomplished with an onclick event, but I can't figure out how to get it to work.
Here is the code I have so far:
<html>
<head>
<title>Project 4</title>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Pets: <input type="text" id="pets">
<input type="button" id="addPet" value="Add Pet">
<br>
</form>
<script type="text/javascript">
function makeCopy() {
var copy = <input type="text">;
return copy;
}
</script>
</body>
</html>
There are other pieces to this as well, but none of them affect this particular problem I am having so didn't see the need to include the full code as it's fairly long.
Any suggestions are greatly appreciated.
Update:
I realize after reading the answers that I should've included more of my code to give you guys a better idea of the actual layout of my page. I have several text fields in my form and need the additional textboxes to be displayed right below the original "pets" textbox. Here's a jfiddle I threw together to give you guys a better idea of the layout. http://jsfiddle.net/a5m8nqwk/
Something like this?
<form name="myForm" id="myForm" onsubmit="return validateForm()">
Pets: <br />
<input type="text" id="pets" />
<input type="button" id="addPet" value="Add Pet" />
<br/>
</form>
document.getElementById("addPet").onclick = function() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
input.type = "text";
var br = document.createElement("br");
form.appendChild(input);
form.appendChild(br);
}
Edit: I'd suggest using a table to style the input boxes, keep them in line. FIDDLE
You could easily add elements to the DOM:
function createPetField() {
var input = document.createElement('input');
input.type = 'text';
input.name = 'pet[]';
return input;
}
var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
form.appendChild(createPetField());
});
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
var text = document.getElementById("textId");
//Append the element in page (in span).
text.appendChild(element);
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Adding textbox on button click with javascript</b>
<br><br>
<form>
<input placeholder="text" name="element" hidden> </input>
<input type="button" value="Click Me" onclick="add(document.forms[0].element.value)"/>
<span id="textId"> </span>
</form>
I am trying to create a text field and button that reads a width and height of a quadrilateral. You enter the width and height, click the button, then a quad appears with those specifications. For some reason I can't get Javascript to read a measurement correctly, so nothing happens.
Here's what I have:
<html>
<style>
</style>
<head>
<title>Make a Polygon!</title>
<script language="javascript">
// var element = document.createElement('div');
// element.className = "someID";
function func(form) {
var element = document.createElement('div');
element.className = "someID";
var wide = form.width.value;
document.body.appendChild(element);
// this properties work//
var a = document.getElementsByClassName('someID');
for(var i in a ){
a[i].style.zIndex='3';
a[i].style.color='rgb(255,255,0)';
a[i].style.background='rgb(0,102,153)';
//a[i].style.width=wide;
a[i].style.width='70px';
a[i].style.height='200px';
a[i].style.left='500px';
a[i].style.top='90px';
}
}
</script>
</head>
<body>
<form name="widthForm" method="get"> Width:
<input type="text" name="width" value=""> <p>
<input type="submit" name="button" value="Create" onclick="func(this.form)">
</form>
<br>
</body>
</html>
So far I'm testing the width only.
It's partially based on code found here:
How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript
You're submitting the page, and instantly refreshing it. Change the submit element to just a button :)
Change submit to button, and add return false statement to limit the button submits form when click, because if do that, the page will be refreshed and div added in javascript could not be seen. Try this:
<html>
<style>
</style>
<head>
<title>Make a Polygon!</title>
<script language="javascript">
// var element = document.createElement('div');
// element.className = "someID";
function func(form) {
var element = document.createElement('div');
element.className = "someID";
var wide = form.width.value;
var height = form.height.value;
document.body.appendChild(element);
// this properties work//
var a = document.getElementsByClassName('someID');
for(var i in a ){
a[i].style.zIndex='3';
a[i].style.color='rgb(255,255,0)';
a[i].style.background='rgb(0,102,153)';
//a[i].style.width=wide;
a[i].style.width=wide;
a[i].style.height=height;
a[i].style.left='500px';
a[i].style.top='90px';
}
}
</script>
</head>
<body>
<form name="widthForm" method="get">
Width:
<input type="text" name="width" value="">
Height:
<input type="text" name="height" value="">
<br>
<p>
<input type="button" name="button" value="Create" onclick="func(this.form);return false;">
<!-- ^^^^^^ ^^^^^^^^^^^^^-->
</form>
<br>
</body>
</html>
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>