I am using jquery .clone() and it is working fine. However my problem is that when I clone my input field it also clones the value of the previous field. I don't want to clone the value. How can I overcome this issue?
Here is my code
function addrow(){
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
$('#input' + num).after(newElem);
jQuery('.clonedInput').each(function(){
jQuery('#total', jQuery(this)).unbind('blur');
});
var ci = jQuery('.clonedInput:last');
jQuery('#total', ci).blur(function() {
addrow();
});
}
Regards,
Faizan
try this:
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).val('');
I might be late with this, but it's not clear whether your "#input" is actually an input field. Only then you can set it's value.
After you place your cloned element, try:
newElem.find('input:first').val(null);
add this line after the clone
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.removeAttr('value');
or
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum).removeAttr('value');
Works fine with me:
<div id="con">
<input id="input1" value="some text" />
</div>
$("#input1").clone().val("").attr("id", "input2").appendTo("#con");
http://jsfiddle.net/sXL2b/
or by using insertAfter:
http://jsfiddle.net/sXL2b/1/
Try this instead of cloning:
http://jsfiddle.net/sXL2b/4/
Do you really need to clone?
You can clean all the inputs with .val(""):
<div class="">
<div id="references">
<div class="">
<div class="">
<div class="">
<input type="text" name="name-reference" class="" placeholder="Name" >
</div>
<div class="">
<input type="text" name="relationship-reference" class="" placeholder="Relationship" >
</div>
</div>
</div>
<div class="">
<div class="">
<div class="">
<input type="text" name="employer-reference" class="" placeholder="Employer" >
</div>
<div class="">
<input type="tel" name="phone-reference" class="" placeholder="Phone Number" >
</div>
</div>
</div>
<div class="">
<button id="add" class="">Add</button>
<button id="remove" style="display:none;">Remove</button>
</div>
</div>
The script:
var reference_form_index = 0;
$("#add").on('click', function(){
reference_form_index ++;
$(this).parent().parent().after($("#references").clone().attr("id","references" + reference_form_index));
$("#references" + reference_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + reference_form_index);
$(this).attr("id",$(this).attr("id") + reference_form_index);
$(this).val('');
});
$("#remove" + reference_form_index).css('display', 'inline');
$(document).on( 'click', "#remove" + reference_form_index, function(event){
$(this).parent('div').parent('div').remove();
} );
$("#add" + reference_form_index).remove();
});
You can see it in action on:
http://jsfiddle.net/pnovales/yF2zE/5/
Related
let's say I enter something into an input field, whatever is typed gets appended to a ul along with another input field.
I can't figure out a way to append the input field. I mean, what I tried added an input at the beginning of the li and adds it over and over again.
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>");
$("ul li").append(time);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<input type="text" id="task" name="todo" placeholder="Your task">
<button id="add">Add It</button>
</div>
<div id="after"></div>
<ul>
<li><span>X</span> Code ToDo</li>
<li><span>X</span> Read two books</li>
<li><span>X</span> Run</li>
</ul>
You can use .append(li + input) to avoid append() to all li on each click
about direction maybe you are using css direction:rtl; witch will make input in left side or you are using float:left; with inputs.
$("#add").on("click", function() {
var i = $("#task").val();
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + " <input type='text' /></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
<input type="text" id="task" name="todo" placeholder="Your task">
<button id="add">Add It</button>
</div>
<div id="after"></div>
<ul>
<li><span>X</span> Code ToDo</li>
<li><span>X</span> Read two books</li>
<li><span>X</span> Run</li>
</ul>
You want the input only in the value you added? If so:
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>").append(time); // just moved ".append(time)" to this line
})
If you want the input only in the last li:
$("#add").on("click", function() {
var i = $("#task").val();
var time = document.createElement("input");
time.setAttribute("type", "text");
$("#task").val("");
$("ul").append("<li><span>X</span> " + i + " " + "</li>");
$("ul li:last").append(time);
})
I am adding textboxes through jquery and for one text box it is removing perfeclty but when I add two textboxes then it does now remove both.
this is jquery
<script>
$(document).ready(function($){
$('.product-form .add-product').click(function(){
var n = $('.text-product').length + 1;
var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" />Remove</p>');
product_html.hide();
$('.product-form p.text-product:last').after(product_html);
product_html.fadeIn('slow');
return false;
});
$('.product-form').on('click', '.remove-category', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.product-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
and this is my html
<div>
<form>
<div class="product-form">
<p class="text-product">
<label for="product1">Name <span class="product-number">1</span></label>
<input required type="text" name="productnames[]" value="" id="product1" />
<label for="product1">Price <span class="product-number">1</span></label>
<input required type="text" name="productprices[]" value="" id="product1" />
<div>
<a class="add-product" href="#">Add More</a>
</div>
</p>
</div>
<div>
<input type="submit" name="submitDetails" value="Finish"/>
</div>
</form>
</div>
If only one textbox for instance productnames is added then it removal function works but when I add botch productnames and productprices textbox removal function does not remove both
Your code should read $('.product-form').on('click', '.remove-product', function() rather than 'click', '.remove-category'. Also, don't place the Add More div element inside the paragraph element. The numbering also breaks a bit, but you can figure that out.
I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
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++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
Auto scroll to the focused input field form division.
I'm cloning the form to add more users to add at once.
So it must scroll down to the input field when I click the add buttion
HTML:
$(document).ready(function() {
$('#id_i_fa_add').click(function duplicate() {
$('#id_i_fa_add').off('click');
$('.fa.fa-trash').off('click');
var original = document.getElementById('id_div_add' + i);
var clone = original.cloneNode(true);
$('#' + clone.id + " a i").attr('class', 'fa fa-trash');
$('#' + clone.id + " a i").attr('id', 'id_i_fa_del' + i);
clone.id = "id_div_add" + ++i;
clone.querySelectorAll("[id = 'id_span_error_email" + (i - 1) + "']")[0].id = 'id_span_error_email' + i;
$(clone).find('input').val("");
$(clone).find('span').text("");
document.getElementById('id_form_append').appendChild(clone);
$('#id_form_append input').focus();
$('#id_i_fa_add').on('click', duplicate);
$('.fa.fa-trash').on('click', duplicate_trash);
});
});
function duplicate_trash() {
var trash_id = this.id;
var parent_trash_id = $('#' + trash_id).parents().eq(1).attr('id');
$('#' + parent_trash_id).remove()
}
<form id='id_form_append' action="#">
<div id='id_div_append'>
<div id='id_div_add0' class="panel_box">
<div class="form_group">
<label>Email Address</label>
<div class="form-group form-inline">
<div class="input-group" style="width: 100%;">
<input name="email" type="text" class="form-control" placeholder="e-mail" autofocus>
<div class="input-group-addon">domains</div>
</div>
</div>
<span id='id_span_error_email0' class='class_span0'></span>
</div>
<a class="action" href="#">
<i id='id_i_fa_add' class="fa fa-plus"></i>
</a>
</div>
</div>
</form>
you can scroll to a position using:
$(window).scrollTop(/* pixel count */)
to retrieve the position of any element, use:
$(/* selector */).position()
you then have a simple object containing the position of the selected element. To retrieve the pixel to the top, use:
$(/* selector */).position().top
Note: This will only work correctly if your selector selects exactly one element.
Using the jQuery code from here, but I am trying to have multiple text inputs in each div. It displays correctly and increments and saves the name and id for the first element, but for the second age input, it only stores the first input.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled','');
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
</head>
<body>
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Name: <input type="text" name="name1" id="name1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
</form>
</body>
</html>
Here is what my new form and jQuery code looks like.
<form id="myForm">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Name: <input type="text" name="name1" id="name1" />
Age: <input type="text" name="age1" id="age1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
newElem.children(':first')
.attr('id', 'age' + newNum)
.attr('name', 'age' + newNum);
Your script only updates the first input, you need to loop through and update all inputs in the cloned div
$('#btnAdd').click(function () {
var num = $('.clonedInput').length;
var newNum = num + 1;
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.find(':input').each(function () {
$(this).attr('id', $(this).attr('id').replace(/\d+/, newNum));
$(this).attr('name', $(this).attr('name').replace(/\d+/, newNum));
});
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled', '');
if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});