Question

need a little help. My jQuery was going smooth today until I hit a wall. I am trying to have multiple forms (individual line items) editable on the fly via AJAX, with a text submission link or some kind of submit button. Problem is, I can get it to submit the form via the AJAX, but without any of the data from the form… i.e. hit submit, it sends the request, but no querystring. Can someone please help me identify what’s missing?

Here is my jquery:

        $('.submitLineChanges').click(function() {
            var formID = $(this).closest('form').attr('ID')
            datastring = $(formID).serialize();
            $.ajax({
                    type:'POST', 
                    url: 'update_ajax.asp', 
                    data: datastring,
                    success: function(response) {
                        alert("Success " + id)
                    //$('#ContactForm').find('.form_result').html(response);
                }//end ajax options
            });//end ajax
            return false;
        });//end of click function

And my form:

    <form id="line-item-<%= intRecID %>-form" class="submitLineForm">
        <input type="hidden" name="UpdateLineItem" value="true" />
        <span class="edit" id="edit-line-<%= intRecID %>" style="display: none;">
            <span class="quantity"><input name="part_qty" id="part_qty_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_qty"),0)%>"></span>
            <span class="partno"><input name="part_no" id="part_no_<%= intRecID %>" type="text" value="<%=rs("quote_part_id")%>"></span>
            <span class="descrip"><Textarea name="part_descrip" type="text" id="descrip<%= intRecID %>" rows="3"><%=rs("quote_part_descrip")%></Textarea></span>
            <span class="sellprice">$<input name="part_sale" id="part_sale_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_sale"),2)%>"></span>
            <span class="margin" id="emargin_<%= intRecID %>"><%=margin%></span>
            <span class="cost"><strong>Cost: </strong>$<input name="part_cost" id="part_cost_<%= intRecID %>" type="text" value="<%=FormatNumber(cost,2)%>"></span>
            <span class="wt"><strong>Weight: </strong><input name="part_wt" id="part_wt_<%= intRecID %>" type="text" value="<%=FormatNumber(rs("quote_part_wt"),2)%>"></span>
            <span class="update"><input type="button"  value="Save Changes" class="submitLineChanges" /></span>
        </span>
    </form>

As you should be able to tell, I’m running this in ASP. The form is for each line item in a cart basically. Because of the nature of the page, I don’t want to have a separate page to edit all the info. It seems this should work, but its likely I’m missing something through the tunnel vision I’m in now.

I should note, the form is for each line, I don’t need it to submit all the forms, just the one.

Thanks

Answer 1

Change

datastring = $(formID).serialize();

to

var datastring = $('#' + formID).serialize();

You need to use a # prefix using the ID selector. Also – without the var keyword you polluting the global namespace for no reason.

Or even better … you could replace

var formID = $(this).closest('form').attr('ID');
var datastring = $('#' + formID).serialize();

with

var datastring = $(this).closest('form').serialize(); 

Which finds the form and serialises it all in one go !!

Thanks to @MikeBrant for that suggestion.