Help with appendTo() jquery function on form

Question

I am a beginner, so keep that in mind.

so what I currently have working is my form successfully adds another input to the form, however it appears out of the form div. Basically I want it to appear within the div and above the submit button.

how do I do this?

here is main appendTo in my javascript:

var i = $('input').size() + 1; 
$('a#add').click(function() { 
    $('<input type="text" value="user' + i + '" />').appendTo('form'); 
    i++; 
});

here is the form html as on request.

<div id="stylized" class="myform">
<form name="addstudents" method="post" action="add_students.php">
<div id="formHeader">
    <h1>Add student(s)</h1>
    <p>Please enter student's HEMIS number</p>
</div>
<label>Student: <span class="small">Enter HEMIS number</span> </label>
<input type='text' name="user_1">
<input type="submit" class="Mybutton" id="mybutton" name="submit" value='Submit Student(s)'>
<div class="spacer"></div>
</form>
<a href="#" id="add">Add</a><a href="#" id="remove">Remove</a></div>

Any help would be greatly appreciated.

thanks

NEW PROBLEM: REMOVING!

here is my current remove JS, it simply removes the submit button first :(

$('a#remove').click(function() { 
if(i > 3) { 
    $('input:last').remove(); 
    i--; 
}
});
$('a.reset').click(function() {
while(i > 2) { 
    $('input:last').remove(); 
    i--;
}
});

Thanks again

How does the markup look? (I.e., does it make sense to append to the <form> element or is there a <div> or something within?) — jensgram
– jensgram, Commented Mar 24, 2011 at 13:17
Another thing: If you're using PHP, you don't need to keep track of i. Instead, you can name all the <input /> field user[] and then access the $_REQUEST['user'] as an array. — jensgram
– jensgram, Commented Mar 24, 2011 at 13:19
Does the form element need to be specified with a class name or id to make it work? — ckaufman
– ckaufman, Commented Mar 24, 2011 at 13:20

Oscar · Accepted Answer · 2011-03-24 15:25:27Z

1

You can use this snippet to insert the input before the button:

$('form #idofsubmitbutton').before($('<input type="text" value="user' + i + '" />'))

EDIT:

I played around with jsfiddle.com after your last edit and came upp with this:

var i = $('input').size() + 1;
$('a#add').click(function() {
    $('div#stylized form input:submit').before($('<input type="text" value="user' + i + '" />'))
    i++;
});

With the example html you posted this works. When I press the add link new inputs appear before the submit button.

If you still got problems you might have elements with duplicate ids.

edited Mar 24, 2011 at 15:25

answered Mar 24, 2011 at 13:23

Oscar

7661 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dapperwaterbuffalo Over a year ago

@jjross im still struggling to get it to even appear within the form div, i tried .appenTo('#stylized') with the html being <div id="stylized" class="myform"> but no luck.

Oscar Over a year ago

@buymypies could you paste the form html into the question so we can have a go at it? :)

Oscar Over a year ago

@buymypies I have edited my response to reflect your latest edit

dapperwaterbuffalo Over a year ago

ok i did get it working a different way (i created a new div n separated the submit button from that div). However my new problem is, removing, now when I remove it simply removes the submit button first. :(

dapperwaterbuffalo Over a year ago

note it is the same situation after implementing your code. I have added remove code to inital post

|

Gaurav · Accepted Answer · 2011-03-24 13:18:42Z

1

var i = $('input').size() + 1; 
$('a#add').click(function() { 
    $('<input type="text" value="user' + i + '" />').appendTo('div#divId'); 
    i++; 
});

answered Mar 24, 2011 at 13:18

Gaurav

28.8k9 gold badges54 silver badges81 bronze badges

4 Comments

dapperwaterbuffalo Over a year ago

do u specify it within the div or class? so mine is like this: <div id="stylized" class="myform"> ?

amp343 Over a year ago

Not sure what exactly you're asking here, but this is the correct way to do what you want. Assuming that you have a <div> with id "divID" that contains your form fields but NOT your submit button, this should work. Change the ID to match the actual ID of your div.

dapperwaterbuffalo Over a year ago

ye but my submit is within my form div and I want the input to be inserted above the submit.

dapperwaterbuffalo Over a year ago

basically, following this guys code ive now got .appendTo('div#stylized'); and it still does exactly the same as before

Diodeus - James MacFarlane · Accepted Answer · 2011-03-24 13:18:59Z

0

This is not a "PHP form", once it's on the client, it's just HTML/CSS/Javascript. PHP is on the server.

.appendTo('form'); appends to the form TAG, not a "form div". If you have a DIV named "form" you need to use .appendTo('#form');

answered Mar 24, 2011 at 13:18

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

dapperwaterbuffalo Over a year ago

dno why i called it a php form my bad.

dapperwaterbuffalo Over a year ago

but how to insert it above the submit button?

Collectives™ on Stack Overflow

Help with appendTo() jquery function on form

3 Answers 3

6 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related