Hi i have the following code..where we can add text input dynamically
what i would like to do is add text input and option to remove text input except the default first one
the add text input is working but not the remove text input
https://jsfiddle.net/ob8n48cg/20/
<script>
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function removeInput(divName){
var newdiv = document.removeElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).removeChild(newdiv);
}
</script>
<form method="POST">
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
<button onclick="removeInput('dynamicInput');">Remove Input</button>
</form>
Try this
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter === limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function removeInput(event,divName){
event.preventDefault()
var parent = document.getElementById(divName)
parent.removeChild(parent.lastElementChild)
counter--
}
<form>
<div id="dynamicInput">
<div>
Entry 1<br><input type="text" name="myInputs[]">
</div>
</div>
<input type="button" value="Add another text input" onclick="addInput('dynamicInput');">
<button onclick="removeInput(event,'dynamicInput');">Remove Input</button>
</form>
When you run your code, make sure to check the console window in the browser, checking that shows you have an error in your removeInput function:
(index):75 Uncaught ReferenceError: newdiv is not defined
at removeInput ((index):75)
at HTMLButtonElement.onclick ((index):87)
removeInput # (index):75
onclick # (index):87
Make sure to define newdiv in the remove function as well as the add function!
Related
let table = 6;
let i = 1;
$(function() {
let $newOperatorButton = $('button');
$newOperatorButton.on('click', function math(){
let msgOperator = '';
let expression;
let operator = $(this).attr("value");
if(operator === '+'){
msgOperator = ' + ';
expression = (table + i);
while(i < 11){
msg += table + msgOperator + i + ' = ' + (table + i) + '<br />';
i++;
}
} else if (operator === '-') {
msgOperator = ' - ';
expression = (table - i);
while(i < 11){
msg += table + msgOperator + i + ' = ' + (table - i) + '<br />';
i++;
}
some code missing but it adds multiplication and division
let el = document.getElementById('blackboard');
el.innerHTML = msg;
}
);
});
This code is inside the body tag in my index.html
<section id="page">
<section id="blackboard"></section>
</section>
<form id="operator">
<button name="add" type="button" value="+">+</button>
<button name="subtract" type="button" value="-">-</button>
<button name="multiply" type="button" value="x">x</button>
<button name="division" type="button" value="/">/</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/index.js"></script>
I have it so it prints out a table with 10 numbers depending on the button clicked. For ex. table = 6 and i = 1 is 6+1=7.... 6+10=16
You need an if statement at the end that reset your equations and variables.
after you've run your equation "i" is still equal to 11 so it never passes into the while loops again, you also need to empty your message so it doesn't keep adding addition text to your existing text.
$("#blackboard").html(msg)
if (i == 11) {
i = 1
msg = ""
}
i have a page in my website that has a form that conatains inputs fields, i also have a button that creates more input fields incase the user needs to inputs more things. the problem now is that if the user makes a mistake and creates inputs feilds that he/she doe not need he can remove them but this creates a problem when inserting the value of the input fields in the database. i am using a for loop to get all the value of the input fields by id eg. id1, id2, id3 etc, but if the user removes one of the inputs field for example id2, i cant get id3 becuase the for loop will still run normally from 1 too the end and will not skip 2.
here is the code to create more input feilds:
let counter = 1;
document.getElementById("shownew").addEventListener("click", (e) => {
e.preventDefault();
// new_section.style.display = "flex";
new_section.insertAdjacentHTML('beforeend',
` <div class="lowerlayer2" id="close${counter}">
<button id="delete" onclick="deleteme(${counter})"><i class="fa fa-minus"></i></button>
<input type="text" placeholder="Word Type" id="wtype${counter}" />
<input type="text" placeholder="Synonym" id="syn${counter}" />
<input type="text" placeholder="Antonyms" id="anty${counter}" />
<textarea
cols="30"
rows="10"
placeholder="History & Etymology"
id="history${counter}"
></textarea>
<textarea
cols="30"
rows="10"
placeholder="Examples"
id="example${counter}"
></textarea>
<textarea
cols="30"
rows="10"
placeholder="Definition 1"
id="def1${counter}"
></textarea>
</div>`
);
counter++;
});
here is the code to delete the input feilds:
function deleteme(id) {
document.getElementById(`close${id}`).style.display="none";
document.getElementById(`close${id}`).innerHTML="";
counter--
}
here is the code to get the values from the values of input fields:
document.getElementById("wan").addEventListener("click", (e) => {
e.preventDefault();
type = "";
syn = "";
anty = "";
history = "";
example = "";
def1 = "";
for (let i = 0; i < counter; i++) {
type += document.getElementById(`wtype${i}`).value + "^";
syn += document.getElementById(`syn${i}`).value + "^";
anty += document.getElementById(`anty${i}`).value + "^";
history += document.getElementById(`history${i}`).value + "^";
example += document.getElementById(`example${i}`).value + "^";
def1 += document.getElementById(`def1${i}`).value + "^";
}
console.log(
type +
" . " +
syn +
" . " +
anty +
" . " +
history +
" . " +
example +
" . " +
def1
);
});
I have a button that adds two input field onclick. Below is the code:
<button type="button" class="btn btn-warning btn-xs" id="additem">
Click here to add Items</button>
<form>
<div id="inputboxes"></div>
<input type="submit">
</form>
and JQuery is
var i = 1,
j = 1,
k = 1,
l = 1;
$("#additem").click(function () {
$("#inputboxes").append("<div class='form-group'><input type='text' id='iname" +
(j++) +
"' name='iname" +
(i++) +
"' class='form-control' placeholder='Enter Item Name' required='required'/></div> " +
"<div class='form-group'><input type='text' id='iprice" +
(k++) +
"' name='iprice" +
(l++) +
"' class='form-control' placeholder='Enter Item Price' required='required'/></div>");
})
How can i validate these dynamically added input boxes for empty and correct values on submitting the form?
You can do something like:
$('.form-group').each(function(){
var input = $(this).children('input');
if(input.val() == '' || input.val() == undefined){
// the errors you will give
}else{
if(input.attr('id').substring(0, 5) == 'iname'){
//function to validate your iname
}else if(input.attr('id').substring(0, 6) == 'iprice'){
//function to validate your iprice
}
}
});
I'm working on a form which has this add button, if the button is clicked a text box is foing to generate and i have a minus button to cancel it.
my problem is i have to work on client side validations in this page
the code i used to generate new text boxes is
i = 0;
var counter = 2;
$("#addButton").click(function () {
optionCount++;
i++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv'+i);
newTextBoxDiv.after().html('<label>Option : </label>' +
'<input type="text" class="add_input" name="textbox' + counter + '" id="textbox' + counter + '" > <input type="button" class="rem_img minusclick" id="removeButton'+i+'" alt="Remove" title="Remove" onclick="RemoveButton(\''+i+'\',\''+counter+'\')">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
optionIds.push(counter);
counter++;
The validation is to be done after clicking the submit button. and i need to display an error message beside each empty text box(that is generated by clicking add button)
im confused where to start and what exactly i have to do for this
Please help..
I add onchange method textbox;
i = 0;
var counter = 2;
$("#addButton").click(function () {
optionCount++;
i++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv'+i);
newTextBoxDiv.after().html('<label>Option : </label>' +
'<input type="text" onchange="Validate(this,\"ValueControl\")" class="add_input" name="textbox' + counter + '" id="textbox' + counter + '" > <input type="button" class="rem_img minusclick" id="removeButton'+i+'" alt="Remove" title="Remove" onclick="RemoveButton(\''+i+'\',\''+counter+'\')">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
optionIds.push(counter);
counter++;
Create This function;
function Validate(elementObject,validType){
if(validType=="ValueControl"){
if($(elementObject).val()==''){
$(elementObject).css("background-color","#000000");
}
}
}
I'm creating file(images) upload form.
I want to add input elements by clicking on button.
This is my input:
<input type="file" name="file"/>
I've alerady write some code:
<script language="javascript">
fields = 0;
function addInput() {
if (fields < 10) {
document.getElementById('text').innerHTML += "<input type="file" name="file"/><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
But it's ugly and not works...
I have prototype library and want to use it to add inputs.
So i need a button to add given inputs and on more button near every input to remove it - like when you attaching files to your mail.
[See it in action]
HTML
<div id="text"></div>
<div id="warning"></div>
Javascript
fields = 0;
function addInput() {
if (fields < 10) {
var id = "file" + fields;
document.getElementById('text').innerHTML +=
"<div><input type='file' name='"+id+"' />" +
" <a href='#' onclick='removeInput(this.parentNode)' />remove</div>";
fields += 1;
} else {
document.getElementById('warning').innerHTML =
"Only 10 upload fields allowed.";
document.form.add.disabled = true;
}
}
function removeInput( el ) {
if (fields > 0) {
document.getElementById('warning').innerHTML = "";
var parent = document.getElementById('text');
parent.removeChild(el);
fields -= 1;
}
}
I think problem with use of "
document.getElementById('text').innerHTML += "<input type="file" name="file"/><br />";
should be
document.getElementById('text').innerHTML += "<input type='file' name='file'/><br />";
To remove field
document.getElementById('text').innerHTML += "<div id='div_"+fields+"'><input type='file' name='file'/><br /><a onclick='removeDiv(/""+fields+"/")' href='javascript:void(0)'>Remove</a></div>";
and add javasript function
function removeDiv(val)
{
var d = document.getElementById('text');
var olddiv = document.getElementById("div_"+id);
d.removeChild(olddiv);
fields-=1; //this should be done to decrement count
}