HTML Form not passing inputs added dynamically from jQuery

Question

I'll keep it short and simple, I've browsed and browsed around here and other sites but am unable to find a solution for my issue: I've got an HTML form that works fine. An update I'm doing allows the end user to add a new TR dynamically into a Table that will contain 4 input fields. Each input field has the name, id, and class set. (This was one of the solutions from another posting.) There's a span the user clicks which creates the new TR with the inputs. The functionality of this works perfectly, and the new TR gets created and the inputs are there and do what I need them to. However, when I submit the form, it doesn't recognize the dynamically created inputs.

I've debugged in both Chrome and FF, I can see all the other form elements being passed through, except for my dynamically created elements. The way I'm trying to reference the data on the receiving page is not the issue (Another solution for another user having the same issue,) since the data isn't being passed in the first place.

If I serialize the form and alert it before submitting it, it does not pick up on the dynamically created elements.

Below is my jQuery code, any help would be greatly appreciated, and thanks in advance!

var kit_rows = 0;
var btn_add_rows_i = 1;
var btn_add_rows_x = '';

$('#text_add_rows').click(function() {

kit_rows += 1;

btn_add_rows_x = '';
btn_add_rows_x += "<tr>";
    btn_add_rows_x += "<td class='main'> Model #: ";
    btn_add_rows_x += "<input type='text' name='kit_model" + btn_add_rows_i + "' id='kit_model" + btn_add_rows_i + "' class='kit_model'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Qty: ";
    btn_add_rows_x += "<input type='text' name='kit_qty" + btn_add_rows_i + "' id='kit_qty" + btn_add_rows_i + "' class='kit_info kit_qty'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Price: ";
    btn_add_rows_x += "<input type='text' name='kit_price" + btn_add_rows_i + "' id='kit_price" + btn_add_rows_i + "' class='kit_info kit_price' value='0.00'> &nbsp; </td>";

    btn_add_rows_x += "<td class='main'> Wholesale: ";
    btn_add_rows_x += "<input type='text' name='kit_wholesale" + btn_add_rows_i + "' id='kit_wholesale" + btn_add_rows_i + "' class='kit_info kit_wholesale' value='0.00'> &nbsp; </td>";
btn_add_rows_x += "</tr>";

$('#tr_last').before(btn_add_rows_x);

btn_add_rows_i++;

alert($('#cat').serialize());

});

My questions are:

Once I $('#tr_last').before(btn_add_rows_x); the content, shouldn't the HTML form pick up on the content automatically?

Does jQuery's "before" function do the job or is there something different I should be using that will allow the form to pick up on the new content?

user3468621 · Accepted Answer · 2015-06-18 17:07:10Z

0

have a look on this jsfiddle. whether it satisfies your requirement

enter code herehttp://jsfiddle.net/gurunathana/8eeqwhyf/

Regret if i mistakenly understand your query.

Thanks,

answered Jun 18, 2015 at 17:07

user3468621

3571 gold badge3 silver badges10 bronze badges

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

1 Comment

David Reger Over a year ago

Although I wasn't able to get it working the way I was initially trying to, I did come up with an alternative method that worked for my application. Your Fiddle code seemed to work when I pull up the jsfiddle site, so I'm not quite sure what still is going on with my original method...

Collectives™ on Stack Overflow

HTML Form not passing inputs added dynamically from jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related