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.
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)
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
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 found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.
I have a product page wherein if the user clicks on edit, an overlay form window is populated to make it editable.
After the edit is completed and the user clicks submit I want to update the text() of each field of the product which was changed.
So instead of getting value of each input field and updating is there a way I can use $(this).serialize() as an array
Current solution I think of is:
var name = $("#input_name").val();
$("#name_id").innerhtml(name);
But the problem is that there are a lot of fields, and I wanted to use the power of jQuery, instead of grabbing each input field's value manually.
Check out the serializeArray method.
var array = $('#someForm').serializeArray();
Well, there's got to be some way of relating the input elements to the plain text elements (spans? divs?) you want to update. That could be by some naming convention, or by some explicit hook in the input field class names. Once you've got that convention established, it should be a pretty easy matter to iterate over the form fields and update the text.
So for example if the text areas are <span> tags whose "id" value is the name of the input field plus the suffix "_text", then you could do something like this:
$('#theFormId input:text').each(function() {
$('span#' + $(this).attr('name') + '_text').text($(this).val());
});
There are approximately one billion possible variations of course.