I want to create an input through js that will create an HTML element that looks exactly like this: <input id="amount" class="amount" autocomplete="off" title="amount" value="0" oninput="updateButton();">
Here is my code:
const parent = document.getElementById('actionButtons');
let linebreak = document.createElement("br");
parent.appendChild(linebreak);
var input = document.createElement('INPUT');
input.type = 'text';
input.id = "amount";
input.class = "amount";
input.autocomplete = "off";
input.placeholder = 0;
input.value = 0;
input.oninput = updateButton();
parent.appendChild(input);
This outputs the element: <input type="text" id="amount" autocomplete="off" placeholder="0">
Note that this does not include the oninput. How do I generate the element in my opening statement?
EDIT
I needed to get rid of the parentheses to make it input.oninput = updateButton; it works now.
Related
HTML:
<body>
<h1>Grocery List</h1>
<form action="/nowhere">
<label for="item">Enter A Product</label>
<input type="text" id="product" name="product" />
<label for="item">Enter A Quantity</label>
<input type="number" id="qty" name="qty" />
<button>Submit</button>
</form>
<ul id="list"></ul>
</body>
Java Script:
const frm = document.querySelector("form");
const prdct = document.querySelector("#product");
const qty = document.querySelector("#qty");
const mylst = document.querySelector("#list");
frm.addEventListener("submit", (e) => {
e.preventDefault();
const myele = document.createElement("li");
myele.textContent = qty.value;
myele.textContent += ` ${prdct.value}`;
mylst.appendChild(myele);
qty.value = "";
prdct.value = "";
});
As can be seen, VS code isn't suggesting '.value' attribute with other suggestions. What can be the reason?
Document.querySelector() returns a Element, so the editor cannot know that it has a value.
If you would create the element by javascript, then the editor DOES know...
let input = document.createElement("input")
let test = input.value // now you can get autocomplete
Another way is to use typescript :
let input:HTMLInputElement = document.querySelector("myinput")!
let test = input.value // now you can get autocomplete
when i add new input box with javascript function, previous input boxes become empty. here is the code:
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
let i=0;
const Add=()=>{
i++
if(i<5)
document.getElementById('field').innerHTML+=`<input type="text" id="value${i}">`
else
document.getElementById('error').innerHTML='Error: Field cant be more then 5'
}
</script>
what can I do to NOT change input values of input box on adding new input box with above codes.
You are overwriting the entire HTML content of ID field,
let i = 0;
const Add = () => {
i++
if (i < 5) {
const input = document.createElement('input');
document.getElementById('field').appendChild(input);
} else
document.getElementById('error').innerHTML = 'Error: Field cant be more then 5'
}
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
One way of doing it, keeping in mind separation of concerns and avoiding the creation of unnecessary global variables could be:
#error {
display: none;
}
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
const Add = () => {
const inputContainer = document.querySelector('#field'); // this variable is not strictly necessary but I think it makes the code more readable
const inputNotification = document.querySelector('#error'); // this variable is not strictly necessary but I think it makes the code more readable
const inputCount = inputContainer.querySelectorAll('input[type=text]').length // count how many input elements of type text are already inside the `field` div
if (inputCount < 5) {
const txtInput = document.createElement('input');
txtInput.setAttribute('type', 'text');
txtInput.setAttribute('id', `value${inputCount}`);
inputContainer.append(txtInput);
} else {
inputNotification.innerText = 'Error: Field can\'t be more than 5';
inputNotification.style.display = 'block'
event.target.setAttribute('disabled', true); // optionally, you can disable the add button if you reached the maximum number of input fields
}
}
</script>
You could use Document.createElement() and element.appendChild() so that you do not alter the HTML of the div#field :
<div id="field">
<input type="text">
</div>
<div id="error"></div>
<button onclick="Add()">add</button>
<script>
let i=0;
const Add=()=>{
i++
if(i<5) {
let input = document.createElement("input");
input.type = "text";
input.id = "value" + i;
let button = document.createElement("button");
button.innerText = "delete";
button.onclick = function(){
input.remove(); //remove text input
this.remove(); //remove this delete button
i--; //decrement i
};
document.getElementById('field').appendChild(input);
document.getElementById('field').appendChild(button);
} else {
document.getElementById('error').innerHTML='Error: Field cant be more then 5';
}
}
</script>
Fiddle Demo
here's the JSfiddle for it, can't seem to get the read-only input to update with the val of the other input (it's going to be a hidden input)
HTML
<form>
<input id="otherAmt" class="qty" type="text" placeholder="Amount Hidden" />
<p> The Costs are:</p> <input type="text" id="otherAmtHidden" name="otherAmtHidden" readonly="" />
</form>
var otherAmt = document.getElementById("otherAmt");
var otherAmtHidden = document.getElementById("otherAmtHidden");
otherAmt.oninput = function(){
alert('input Received');
var val1 = parseInt(otherAmt.value, 10);
alert(val1 + 'val1');
var amtHidden = val1;
alert(amtHidden + 'amtHidden');
//otherAmtHidden.innerHTML = amtHidden;
$('input [name="otherAmtHidden"]').val(amtHidden);
alert('finished');
};
Edit: I'm dumb, Solved it by changing the $('input etc').val(amtHidden); to $('#otherAmtHidden).val(amtHidden);
I'm dumb, I Solved it by changing the $('input etc').val(amtHidden); to $('#otherAmtHidden).val(amtHidden);
Fixed Javascript
var otherAmt = document.getElementById("otherAmt");
var otherAmtHidden = document.getElementById("otherAmtHidden");
otherAmt.oninput = function(){
var val1 = parseInt(otherAmt.value, 10);
var amtHidden = val1;
$('#otherAmtHidden').val(amtHidden);
};
I was wondering if there is a way to append to values that are arrays.. for example
<input type="text" id="someID" name="text[]"/>
How do you append to that in javascript?
Normally, I would just get the contents of value then append to it but it's an array here so I'm not sure how to do it
Code for appending for a non-array
var newvalue = 50;
var value = document.getElementById('someID').value;
document.getElementById('someID').value = value+newvalue;
Now, what I need is for PHP to get that array with the value 50 in it
How do I do that?
You can append hidden input with desired value and same name to the form.
HTML:
<form action="" name="numbers-form">
<input type="text" name="numbers[]" value="30" />
<input type="text" name="numbers[]" value="40" />
</form>
JavaScript:
var formArray = (function() {
var form = document.forms['numbers-form'],
inputName = 'numbers[]';
return {
getNumbers: function() {
// NodeList to Array
var nodesArray = Array.prototype.slice.call(form[inputName]);
return nodesArray.map(function(input) {
return input.value;
});
},
addNumber: function(number) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = inputName;
input.value = number;
form.appendChild(input);
},
printNumbers: function() {
console.log(this.getNumbers());
}
};
})();
formArray.printNumbers();
formArray.addNumber(50);
formArray.printNumbers();
formArray.addNumber(60);
formArray.printNumbers();
DEMO
So as I click the button, the javascript adds new fields. Currently it adds the new text box to the side.. is there a way to make it add below? I guess as if there were a .
Here is the code. Thanks!
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
Insert a <br/> tag infront of the inserted input or better yet, put the input into a div and control the look of it with CSS.
Add this to the end of your function:
document.body.insertBefore(document.createElement("br"), element);
Full code:
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
document.body.insertBefore(document.createElement("br"), element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>
Just create a <br> element the same way and put it between.
var newBr = document.createElement("BR");
document.body.insertBefore(newBr, element);
Or use CSS. The display:block may be of value.
You could either, insert br element after the new input, or wrap it inside a div element:
function newTextBox(element) {
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
var div = document.createElement('div');
div.appendChild(newInput);
document.body.insertBefore(div, element);
}
Check the above example here.