So I Have Looked Through The Site Only To Not Find The Answer For My Particular Problem. I Am Pretty New To Writing Code And Am Trying To Figure Out How To Remove A Form Field After Its Been Added with Javascript. Here is the code. I would Greatly Appreciate Feedback/Solutions.
var counter = 1;
var limit = 1000;
function addInput(Favorites){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
document.getElementById(Favorites).appendChild(newdiv);
counter++;
}
function removeInput(newdiv){
document.getElementById('Favorites').removeChild(newdiv);
counter - 1;
}
}
<form>
<div id="Favorites">
Favorite 1<input type="text" name="Favorites[]">
</div>
<input type="button" value="Add New Favorite" onClick="addInput('Favorites');">
<input type = "button" value = "Save Changes">
</form>
there are various issues in your code so I have modified it a bit. So use following js code
var counter = 1;
var limit = 1000;
function addInput(){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = " <div class='inputElement'>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove' onClick='removeInput(this)'></div>";
document.getElementById("Favorites").appendChild(newdiv);
counter++;
}
}
function removeInput(removeLink){
var inputElement = removeLink.parentNode;
inputElement.remove();
counter= counter - 1;
}
In html you can modify your code a bit
<form>
<div id="Favorites">
<div class='inputElement'>
Favorite 1<input type="text" name="Favorites[]">
</div>
</div>
<input type="button" value="Add New Favorite" onClick="addInput();">
<input type = "button" value = "Save Changes">
</form>
Check out above code here
https://jsbin.com/hizimateri/1/edit?html,js,console,output
If you have any issues with it . Let me know.
Maybe this help? Check the link here link
var counter = 1;
var limit = 2;
function addInput(Favorites) {
if (counter == limit) {
removeInput();
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
document.getElementById(Favorites).appendChild(newdiv);
counter++;
}
function removeInput() {
var x = document.querySelector('#Favorites div:last-child');
x.remove();
--counter;
}
}
Related
I'm having a problem I'm using a numeric keypad that I found in codepen this one
https://codepen.io/matthewfortier/pen/ENJjqR
my objective is to store the generated pin in a database but it's a little difficult to do that because I'm taking the generated pin to an input but it looks like this
<input hidden="" id="pin" value="" name="pin">9345</input>
how do i get this generated pin and save it in database
the code is the same as the link
In your html you have this:
<input type="hidden" id="pin" value="9345" name="pin" />
In your Javascript you have this:
let value = document.getElementById('pin').value;
console.log(value);
$(function() {
var container = $(".numpad");
var inputCount = 6;
// Generate the input boxes
// Generates the input container
container.append("<div class='inputBoxes' id='in'></div>");
var inputBoxes = $(".inputBoxes");
inputBoxes.append("<form class='led' class='form-group' action='cadastro.php' method='post'></form>");
var led = $(".led");
// Generates the boxes
for(var i = 1; i < inputCount + 1; i++){
led.append("<input type='password' maxlength=1 class='inp' id='" + i + "' />");
}
led.append("<input type='password' maxlength=12 name='numero' value='93445566' id='numero' />");
led.append("<input type='text' name='te' id='te' placeholder='' />");
led.append("<button id='btn1' type='submit' onclick=''>enviar</button>");
container.append("<div class='numbers' id='inb'><p id='textoo'><span class='bolded'>PIN</span> do serviço MULTICAIXA</p></div>")
var numbers = $(".numbers");
// Generate the numbers
for(var i = 1; i <= 9; i++){
numbers.append("<button class='number' type='button' name='" + i + "' onclick='addNumber(this)'><span class='pin_font'>" + i + "</span></button>");
}
addNumber = function take(field,vall) {
if (!$("#1").val())
{
$("#1").val(field.name).addClass("dot");
}
else if (!$("#2").val())
{
$("#2").val(field.name).addClass("dot");
}
else if (!$("#3").val())
{
$("#3").val(field.name).addClass("dot");
}
else if (!$("#4").val())
{
$("#4").val(field.name).addClass("dot");
}
else if (!$("#5").val())
{
$("#5").val(field.name).addClass("dot");
}
else if (!$("#6").val())
{
$("#6").val(field.name).addClass("dot");
vall = $("#1").val() + $("#2").val() + $("#3").val() + $("#4").val()+ $("#5").val()+ $("#6").val();
document.getElementById("pini").innerHTML = vall;
}
}
I'd like to know why whenever I switch the <input> tag to a <p> tag, my character counter doesn't appear at all. I want the Characters remaining: part to not be inside an <input> tag. I've tried a lot of ways to solve this but hit a wall, I just need another pair of eyes to see this.
What am I doing wrong and how can I solve this? JSFiddle provided for reference.
https://jsfiddle.net/2b38k9zt/
var txtBoxRef = document.querySelector("#txtBox");
var counterRef = document.querySelector("#counterBox");
txtBoxRef.addEventListener("keydown",function(){
var remLength = 0;
remLength = 0 + parseInt(txtBoxRef.value.length);
if(remLength < 0) {
txtBoxRef.value = txtBoxRef.value.substring(0, 200);
return false;
} else if(remLength > 200) {
counterRef.style.color = "red";
}
counterRef.value = "Characters remaining: " + remLength + "/200";
},true);
<textarea style="width: 600px;" id="txtBox"></textarea>
<input type="text" id="counterBox"/>
Set your input to a p element and change this line
counterRef.value = "Characters remaining: " + remLength + "/200";
to
counterRef.innerHTML = "Characters remaining: " + remLength + "/200";
input tag has a value attribute, while for p tag textContent should be used:
var txtBoxRef = document.querySelector("#txtBox");
var counterRef = document.querySelector("#counterBox");
var pRef = document.querySelector("#pBox");
txtBoxRef.addEventListener("keydown",function(){
var remLength = 0;
remLength = 0 + parseInt(txtBoxRef.value.length);
if(remLength < 0) {
txtBoxRef.value = txtBoxRef.value.substring(0, 200);
return false;
} else if(remLength > 200) {
counterRef.style.color = "red";
}
pRef.textContent = "Characters remaining: " + remLength + "/200";
},true);
<textarea style="width: 600px;" id="txtBox"></textarea>
<input type="text" id="counterBox"/>
<p id='pBox'></p>
I'm trying to add all the values from the class "q-total" But I can't get it to work. Here's the code:
$(document).on("change", ".row-inputs", function(){
var total = 0;
var price = 0;
var multi = 0;
$('.q-quantity', this).each(function(){
multi = $(this).val();
})
$(".q-price", this).each(function(){
price += +$(this).val() * multi;
})
$(".q-total", this).val(price);
for (var i = 0; i < $(".q-total").length; i++) {
// total = 0;
// console.log($(".q-total", this).val() )
total += parseInt($(".q-total", this).val());
}
console.log("Total " + total)
})
Below is the class code I use to add new rows to the html. In case this might help to figure out why the above code is not working.
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + "
inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className = "row-inputs";
newdiv.innerHTML = "<input type='text' name=''
placeholder='product name' class='q-product-name'> " +
"<input type='number' name='' placeholder='0' class='q-quantity'
value=1> " +
"<input type='text' name='' placeholder='price' class='q-price'> "
+
"<input type='text' name='' placeholder='price' class='q-total'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
Thank you
Your loop is incorrect:
Change
for (var i = 0; i < $(".q-total").length; i++) {
// total = 0;
// console.log($(".q-total", this).val() )
total += parseInt($(".q-total", this).val());
}
To
$(".q-total").each(function(){
total += +$(this).val();
})
In the original for loop you never iterate over the values, you always take $(this).val(). Not sure why you varied from your .each() approach you've used everywhere else, but that is your fix.
To explain further, using your example of add rows with prices of 3,4,5. The first time through (1st row), you have one element in the jQuery collection, so total=0 becomes total += 3; Second row added and you have two elements, but only look at the value of the current row, so total=0 becomes total += 4 && total += 4 hence total=8; On third row change, there are three elements, to total = 15 ( 3 * 5);
I have a problem, i searched for the solution all over the internet, but i couldn't find it out :S
The problem is:
I'm creating file inputs on button click, but i can't handle these javascript made inputs because they aren't in my $_FILES array after i click on submit..
My code is:
HTML:
<form name = "galleryupload_form" method = "post" action = "#" enctype="multipart/form-data">
<ul id = "formul">
</ul>
<input type="button" value="Még egy kép feltöltése" onClick="addInput('formul');">
<input name = "galleryupload_submit" type = "submit" value = "Küldés"/>
</form>
javascript:
var counter = 0;
var limit = 5;
function addInput(ulName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newli = document.createElement('div');
newli.innerHTML = "<label for = ''>Fájl " + (counter + 1) + "</label><input type='file' name='files[]'>";
document.getElementById(ulName).appendChild(newli);
counter++;
}
}
If you now the solution, please let me know. Thank you.
Referring to the question before editing:
File inputs appear in $_FILES not $_POST.
After editing, I cannot reproduce the problem.
check this code .
<?php
if(isset($_POST['galleryupload_submit'])){
print_r($_FILES);
}
?>
<form name = "galleryupload_form" method = "post" action = "" enctype="multipart/form-data">
<ul id = "formul">
</ul>
<input type="button" value="My textbox goes" onClick="addInput('formul');">
<input name ="galleryupload_submit" type ="submit" value ="Click Add"/>
</form>
<script>
var counter = 0;
var limit = 5;
function addInput(ulName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}else {
var newli = document.createElement('div');
newli.innerHTML = "<label for = ''>New TexBOx " + (counter + 1) +"</label><input type='file' name='files[]'>";
document.getElementById(ulName).appendChild(newli);
counter++;
}
}
</script>
Got the following JS code:
<script language="javascript">
fields = 0;
pNR = 0;
err = 0;
function addInput() {
if (fields != 40) {
document.getElementById('text').innerHTML += "<input type='text' name='first" + pNR + "' value='' /><input type='text' name='second" + pNR + "' value='' /><br />";
fields += 1;
pNR += 1;
} else {
if (err == 0) {
document.getElementById('text').innerHTML += "<br />Adaugati maxim 40 ingrediente.";
err = 1;
}
document.form.add.disabled = true;
}
}
</script>
and the following HTML:
<input name="name" style="color:#ffffff;" class="name required" type="button" onclick="addInput()" value="Add" />
<div id="text">
</div>
By default, there are no fields. When I press the Add button (fields are added two by two with different names), fill in the fields and click again the Add button, the filled fields are emptied. What did I do wrong?
You aren't simply adding new inputs.
You are:
converting the existing ones to HTML (the value attribute is unchanged, it will still have the default value, not the current value)
adding the HTML for the new inputs to it
generating new DOM elements from that HTML.
Don't use innerHTML. Use createElement, appendChild and friends.
This:
document.getElementById('text').innerHTML += "<input type='text' name='first" + pNR + "' value='' /><input type='text' name='second" + pNR + "' value='' /><br />";
Becomes this:
var firstInput = document.createElement("input");
var secondInput = document.createElement("input");
firstInput.type = secondInput.type = "text";
firstInput.name = "first" + pNR;
secondInput.name = "second" + pNR;
var text = document.getElementById("text");
text.appendChild(firstInput);
text.appendChild(secondInput);
text.appendChild(document.createElement("br"));
And, for the else case:
var text = document.getElementById("text");
text.appendChild(document.createElement("br"))
text.appendChild(document.createTextNode("Adaugati maxim 40 ingrediente."));
Working example: http://jsbin.com/OqIWeMum/2/edit