how can putting link add after last new input when click on remove no after last input that clicked on remove. how is it?
when you clicked on remove(no last remove) you see that link add append after input. Namely we have tow or several add link after clicked on remove. you in anywhere clicked on remove append link add on input, i want only once append in last new input no in anywhere.
I hope you understand
EXAMPLE: http://jsfiddle.net/zgWr3/12/
$('a.remove_input').live('click', function (event) {
event.preventDefault();
var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
$(this).closest($class).prev().find('.adda .mediumCell').append('')
$(this).closest($class).remove();
});
With respect
For my HTML I would use something like:
<div id="inputs">
<div id="input_container_0">
<input type="text" name="price" placeholder="hello" />
</div>
</div>
<div>
add
</div>
For my JavaScript I would use something like:
var number_of_inputs = 0;
$(function() {
$(".action-add").click(function() {
number_of_inputs++;
$("#inputs").append('<div id="input_container_'+number_of_inputs.toString()+'"><input type="text" name="price" placeholder="hello" /> remove</div>');
});
$(".action-remove").live('click', function() {
$("#input_container_"+$(this).attr("rel")).remove();
});
});
Hope that helps.
EDIT
Updated, so the remove link is not present for the first text box.
Here. Try this:
$(function () {
$('a.add_input').live('click', function (event) {
var $column = $(this).closest('div.add_units');
// clone the top input row
var newDiv = $($column.find('div.mediumCell').get(0)).clone(true);
// clear field values
newDiv.find('input').val(''); // clear the field
// add Remove link to new row
newDiv.append('remove');
$column.find('div.adda').before(newDiv);
event.preventDefault();
return false;
});
$('a.remove_input').live('click', function (event) {
event.preventDefault();
// find row
$row = $(this).closest('.mediumCell').remove();
});
});
Related
I have a dynamic form in which users can add inputs by clicking a button. This works fine. However when clicking to remove the input the first click does not remove an input. Every click after removes inputs as expected. I can see that it runs the function on first click to remove but nothing is updated in the DOM so the field stays. Here is my HTML:
<button onclick="AddFileField()">Add File</button>
<br />
<br />
<form action="" method="post" enctype="multipart/form-data">
<div id="fileFields"></div>
<br />
<input type="submit" value="Upload" />
</form>
And the associated javascript:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
var FieldCount = 1; //to keep track of text box added
function AddFileField() {
var MaxInputs = 10; //maximum input boxes allowed
var InputsWrapper = $("#fileFields"); //Input boxes wrapper ID
var x = $("#fileFields > div").length + 1; //current text box count
if (x <= MaxInputs) //max input box allowed
{
$(InputsWrapper).append('<div class="fileInp"><label for="file' + FieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + FieldCount + '" />×</div>');
FieldCount++;
}
return false;
}
A fiddle showing issue. To duplicate add a couple fields then click an x. The first click does nothing, then proceeding clicks removes fields. How can I get the first click to remove the field as well?
It's because you are registering your event handler inside of another event handler.
http://jsfiddle.net/3e1ajtvo/11/
I removed your event handler and now, you pass the clicked element as elem into the function itself.
As a matter of fact you don't even really need the function, as long as jquery is exposed (it is in your case).
http://jsfiddle.net/3e1ajtvo/12/
A working fiddle is here
The issue lies in the function:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
When you click the X, this function is called, which adds a click event handler to the X to remove it; however, this event handler is not called until the next time you click it. (This is why clicking X twice works).
In the updated fiddle, you simply pass this to removeField as such:
//HTML
×</div>
//JS
function removeField(me) {
$(me).parent().remove();
return false;
}
The reason for this is because you are using onclick="removeField()".
Lets take a look at your function. When you click on the remove button the following script will run. This script then creates a click handler, that will activate on next click, because when you first clicked on remove the handler was not created
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
So you will need to replace this is another function. Since you are using jQuery you can learn to use .on() for dynamically generated elements.
$(document).on('click', '.removeclass', function () {
$(this).parent().remove();
});
http://jsfiddle.net/Spokey/3e1ajtvo/16/
I made your code a bit more modular and changed it to use jQuery more than you were. This is just another way to do it, the other answers are also valid.
http://jsfiddle.net/3e1ajtvo/19/
var fields = {
btnAdd: $('#addField'),
inputWrapper: $('#fileFields'),
maxInputs: 10,
fieldCount: 1,
init: function(){
this.inputWrapper.on('click', '.removeclass', this.removeInput);
this.btnAdd.on('click', this.appendField);
},
removeInput: function(){
//this will refer to the html element you clicked on
$(this).parent().remove();
},
appendField: function(){
//this will refer to the html element you clicked on
if ( fields.inputWrapper.children('div').length <= fields.maxInputs ){
fields.inputWrapper.append('<div class="fileInp"><label for="file' + fields.fieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + fields.fieldCount + '" />×</div>');
fields.fieldCount++;
}
}
};
fields.init();
You're not executing the code to remove the row on the first click, you're just adding the click handler to the link. It works after that because the $('.removeclass').click(... then fires as expected.
I have a requirement where I print all the email addresses in <input type="text" value="emailaddress"> on the jsp page. I should be able to edit the field, so I have a button at the end of it. But the email addresses can be of any number. How to select the button ending with any number
$('#button_1').on("click", function() {
//enter code here
});
$('#button_2').on("click", function() {
//enter code here
});
I am trying to do something like
$('#button_'[]).on("click", function() {
});
Can someone help me with this solution?
CSS wildcard:
$("button[id^='button_']").click(function() {
// button elements with id starting with "button_"
// return($(this).attr('id'));
});
$("button[id*='button_']").click(function() {
// button elements with id containing "button_"
// return($(this).attr('id'));
});
There is a starts-with attribute selector.
You can do the following:
$('[id^="button_"]').on('click', function () {
// your code here
});
The $('[id^="button_"]') selects all the elements that have an id beginning with button_. Then you are able to bind a single handler to cater for all button events.
Also instead of giving an Id you can put a class on these buttons since class can be duplicated:
<button class='email' id="#button_1"/>
<button class='email' id="#button_2"/>
Then its easier to select only these:
$('.email').on("click", function() {
// get access to the current button via this:
$(this).attr("value","delete");
});
I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});
I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the state of the button.. Would this be the best way to grab it? I am posting the form also.
Here is what I have.. When I click the button, it adds the example text, but I need it to go away when I click again..
$(document).ready(function () {
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85")
$('.buttons_secondary').append("<input type='hidden'>");
});
});
$(document).ready(function () {
$('.visibilitybutton').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('span').removeClass('icon84').addClass('icon85');
$('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('span').removeClass('icon85').addClass('icon84');
// OR Remove by id
$('.buttons_secondary').find('#visibility_setting').remove();
});
});
You can remove the html you append by id or class like so:
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
Based off of your previous question, I think you should try this:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85 icon84');
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84 icon85');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
});
});
I write a simple function to clone a field:
Online Demo: http://jsfiddle.net/5yVPg/
HTML:
<div id="main">
<a id="add-input" href="#">+ add</a>
<p class="child">
<input type="text" name="user[]" />
delete
</p>
</div>
JS:
$(document).ready(function () {
$('#add-input').click(function () {
var newField = $('.child').clone()
newField.toggle().attr('class', '')
registerRemoveHandlers(newField, '.icon-delete')
$(this).parent().append(newField)
return false
})
function registerRemoveHandlers(el, class) {
$(el).find(class).click(function () {
$(this).parents('p:first').remove()
return false
})
}
})
I want to remove the delete icon from the first input, I tried :
$('p.child .icon-delete:first').css('display','none')
But the delete icon being not displayed for all input.
PS: If I could optimize the codes above I'll be happy :)
Have a look at this instead:
// Keep a single clone of the original
var clonedField = $('.child').clone(),
main = $('#main');
// Add in the delete <a> to the cloned field
$('<a>', {
text: 'delete',
class: 'icon-delete',
href: '#',
click: function(){
$(this).parent().remove();
return false;
}
}).appendTo(clonedField);
// Clone the cloned original and append it back to the list
$('#add-input').click(function() {
main.append(clonedField.clone());
return false;
});
The code is simpler and easier to understand then what you have there, and should work as you expect it.
See it on jsfiddle: http://jsfiddle.net/5ZFh6/
DEMO: http://aseptik.net/demo/remove-first-class-with-jquery-while-cloning
$(function() {
$('#add-input').click(function() {
$('<p><input type="text" name="user[]" /> ' +
'delete</p>').appendTo('#main');
});
// just for sake...
$('.icon-delete').live('click',
function() {
$(this).parent().fadeOut(500,
function() {
$(this).remove();
});
});
});
gotchas:
why you are cloning?
why you are placing the delete button in the first place?
i think this will do the trick.......$('p.child .icon-delete:first').css('display','none') is hiding all .icon-delete which is child of p.child. and in your case all p.child is a child of .icon-delete
$('p.child:first .icon-delete').css('display','none')
$('#add-input').bind('click',function ()
{
var newField = $('.child').clone();
newField.toggle().attr('class', '');
registerRemoveHandlers(newField, '.icon-delete');
$('p.child:last').after(newField); //append after not cloned child
newField.parent().children('p').find('a').show(); //show all 'delete' label
newField.prev().find('a').hide(); //hide label from the first child which is right the one before our clone
return false;
});
http://jsfiddle.net/K7F5K/