This here JSFiddle: http://jsfiddle.net/3pLqa5n0/
The result contains an input element and a textarea element.
Each time you click on the first input element, it appends another input element and textarea element.
However, I want this to only happen when one clicks on the last input element (not the first).
In the code, I have done:
$('#deleteandadd input[name="inputName[]"]:last')
But the ':last' is obviously not working. How may I make this work?
Aside: when we use square brackets in element names, to send data to PHP, are these technically arrays?
Try to use event delegation at this context, since the last input element may differ every time when you append a new set of elements.
$("#deleteandadd").on("click",'input[name="inputName[]"]:last',function() {
DEMO
Related
Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)
I'm trying to loop through all visible inputs within a form and set their value to be empty. What I have doesn't seem to work for text inputs, it returns undefined. Any ideas how to do this?
jQuery has a :visible selector as well as an :input selector. In addition, most jQuery methods operate on the entire set. val() can be used directly rather than looping through the set.
currentForm.find(':input:visible').val('');
Textbox inputs would have a tagName of "textarea". Not sure why the other text types aren't working. Have you tried:
childs[i].values = '';
?
I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})
I need to live update a text field in html using javascript, that is as the user is typing text in one field, the contents are being displayed in another as they type. i need just a short code snippet to do that. eg as a person is typing their name, the name is being typed one letter at a time at another position on the screen.
Give the two fields an id each, then use something like this:
document.getElementById("field1").onkeyup = function() {
document.getElementById("field2").value = this.value;
}
All it does is bind an event listener to the onkeyup event, which fires every time a key is released. In the event listener, it simply copies the value of the field which received the event to another field, specified by id.
Here's a working example.
What I'm thinking about is when I remove or add a child element from the DOM, I will change other elements' names through JavaScript or jQuery. For example, I'm going to remove the second text box from a form which have 3 text boxes. They have the names "input-1", "input-2" and "input-3." After removing "input-2," I'm going to rename "input-3" as "input-2". Then, when I'm going to add a new text box, it will be named "input-3." Is this efficient?
what is your html markup?... and why would you do that?...
$('input:text').attr('name',function(index,name){
return 'input-' + (index+1);
// this will rename input's of type text based on their indices..
});
I just change the elements' names before the form is submitted to the server. No need for dynamic changing, i.e., when an element is removed and and a new one is added. It's more convenient.