Dynamically adding elements to a form and inserting
Hello all,
I am currently working on a site as part of a student work term. One of the features of this site is the ability to upload a resume. The resume can have a arbitrary number of "work experiences". I have set up a form and want the user to be able to add new input elements with a click of a button.
Here is a very pared down(for simplicity) version of the form:
<form action = 'resume.php' method = 'post' id = 'resume_form'>
<div id = 'work'>
</div>
<input type = "button" id = "button" value = "Add field" / >
</form>
I am using jQuery to add new work experience fields to the form with the click of a button. Here is a pared down version of the jQuery function:
$(document).ready(function() {
$
("#button").click(function(){
//Html to create a new field
var newField = "<div class = 'work_experiance'>\
<p> \
<label for = 'employer'>Employer: </label><input type = 'text' class = 'employer' name = 'employer' />\
</p>\
<p> \
<label for = 'job_title'>Job Title: </label><input type = 'text' class = 'job_title' name = 'job_title' />\
</p>\
</div>"
;
$
("#work").append(newField);
});
});
I just started learning jQuery yesterday so only know how to do the basic stuff with it so far. My thought was to loop through each work_experience div,then through the children of that div(input boxes) assigning a variable to the value of them. I am thinking that the individual input elements can be accessed through their class or name, so look for a child of the current div with a specific name/class and take the value of that. Then I would do a $.ajax POST to a php page that would insert the data correctly. Could anyone tell me if this is possible? And if so how I could go about doing this? As I said I am still very new to this so I could be going about this all wrong. Any advice or point in the right direction would be very much appreciated, thanks much!