jimfog Posted October 22, 2012 Share Posted October 22, 2012 I am trying to append text to an input element but I cannot, here is the code: HTML: <div id="form"> <input size="40" placeholder="Address" type="text" name="Address"><br> <input size="40" placeholder="Phone" type="text" name="Phone"><br> <input size="40" placeholder="Service" type="text" name="Service"> <input display="block" size="3" placeholder="Price" type="text" name="Price"> <div id="addsrvice"><img align="center" src="Images/add_service.png"></div> </div> and the js code: $("#addsrvice").live('click',function(){ $(":input").last().append("<strong>test</strong>");}) The goal is to add an input element address the service input field.The above js code even if it was correct would not do that-I am only using it for testing. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2012 Share Posted October 22, 2012 You append into an element, you cannot append into a input as it not a container, like body, div or paragraph, use after() instead. $(this).parent().children("input:last").after("<strong>test</strong>"); Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2012 Author Share Posted October 23, 2012 Ok this works...I have 1 last question though. What I want to insert after the last input element are 2 other input elements.I have assigned these 2 input elements in one variable. var input= $('<input id="servc"size="40" placeholder="Service" type="text" name="Services"><input display="block" size="3" placeholder="Price" type="text" name="price">'); Suppose I assign the second input element(the price) in a different variable,for code organisation purposes.Let as say the price variable.The services input field is assigned to a different variable var services;var price;var field=services+price; In essence I tried doing this: (this).parent().children("input:last").after(field); But I could not-is there a way to concatenate variables in the manner described above?So far, I have not managed to do it. I have tried several things. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 remove $(), its treating as an object to target var services='<input id="servc"size="40" placeholder="Service" type="text" name="Services">';var price='<input display="block" size="3" placeholder="Price" type="text" name="price">';var field=services+price; Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2012 Author Share Posted October 23, 2012 I do not understand, where I am going to use remove? Now I am in the process of making code that adds services. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 remove '$(' and ')' $('<input id="servc"size="40" placeholder="Service" type="text" name="Services"><input display="block" size="3" placeholder="Price" type="text" name="price">' ) ;tovar input= '<input id="servc"size="40" placeholder="Service" type="text" name="Services"><input display="block" size="3" placeholder="Price" type="text" name="price">';for your question as in post#4var services='<input id="servc"size="40" placeholder="Service" type="text" name="Services">';var price='<input display="block" size="3" placeholder="Price" type="text" name="price">'; Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2012 Author Share Posted October 23, 2012 Yes you are right, that fixed it,thanks. I was confused in the beginning, my mind somehow went on thinking about the remove method. Link to comment Share on other sites More sharing options...
jimfog Posted October 23, 2012 Author Share Posted October 23, 2012 well...I have another problem now, I added an input type submit button, and now, the newly created inputs go belowthe button. Cause now, the last input element is the button. Now, we have to take into consideration and this. I am going to search a solution to this myself too. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 By type $(this).parent().children("input[type='text']").after(field); find length, and subtract by amount which you wish to add new inputs, using eq(n) var total_inputs = ($(this).parent().children("input").length)-2; $(this).parent().children("input").eq(total_inputs).after(field); target by specific attribute and value $(this).parent().children('input[name="Price"]').after(field); Link to comment Share on other sites More sharing options...
jimfog Posted October 24, 2012 Author Share Posted October 24, 2012 (edited) I finally used this: $(this).parent().children("input:nth-child(7)").after(field); It was targeting the correct input element i wanted.In the beginning I tried negative indexes(-3) to start from the end, but it did not work. So, I used positive indexes. It is still strange though, cause the element I want to target(input element) in the form has an index of 5 and not 7.So, logically an index of 5 would do the trick. But instead I have to use an index of 7. Corrected code: $(this).parent().children("input").eq('5').after(field); Edited October 24, 2012 by jimfog Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2012 Share Posted October 24, 2012 (edited) You are targettng child inputs yes, BUT the index() does not relate to the inputs only, it relates to ALL child elements, therefore it will include the two BR tags before it, so the input index will be 7. I think i might getting wires crossed, are we talking about .index()? $(this).parent().children("input:nth-child(7)").after(field); I think you have amended code from original as i don't see where 7, would come from? in above that is what is confusing me, so i thought you were talking about index() cause that would make more sense. Edited October 24, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
jimfog Posted October 24, 2012 Author Share Posted October 24, 2012 Yes I have amended code. The code I finally used is with the eq method: $(this).parent().children("input").eq('5').after(field);In the above code, with the eq method, it seems only inputs are targeted and that is why and index of 5 will do the job-and not 7 in theother case Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now