cannot append element

[jimfog]

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.

[dsonesuk]

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>");

[jimfog]

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.

[dsonesuk]

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;

[jimfog]

I do not understand, where I am going to use remove? Now I am in the process of making code that adds services.

[dsonesuk]

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">';

[jimfog]

Yes you are right, that fixed it,thanks. I was confused in the beginning, my mind somehow went on thinking about the remove method.

[jimfog]

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.

[dsonesuk]

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);

[jimfog]

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

[dsonesuk]

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

[jimfog]

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