Question

I have a form that is populated with dynamic form elements based on a “SecID” variable which identifies which section of the site the user is in.

I’m using classic ASP, with JQuery & AJAX to save the form changes. It’s working great so far with this code:

<form name="sampleForm" ID="sampleForm">
            <input type="hidden" name="SecID" id="SecID" value=<%=SecID%>>

            <input type="text" value="<%=rs.fields("Title")%>" name="Title" class="formJD">

            <input type="text" value="<%=rs.fields("JobCode")%>" name="JobCode" class="formJD">
            <select name="<%=TypeID%>-<%=RowID%>" class="<%=FormClass%>">
                        <option value="">Select</option>
                        <option value="1">Example 1</option>
                        <option value="2">Example 2</option>
            </select>
<%'***more form elements taken out to be short****%>
</form>

<script>


function showValues() {
  var str = $("#sampleForm").serialize();
                $.ajax({
                     type: "POST",
                     url: "updateFormAJAX.asp",
                     data: str,
                     success: function(msg) {
                        // $('#autosavenotify').text(msg);
                     }
                });

}

$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
$("input").change(showValues);
showValues();
</script>

I’ll leave out the ASP page that is called by AJAX. This is all working fine to update the entire form on each change. The problem I’m having is that since I’m using serialize() to pass the elements to AJAX it’s saving the ENTIRE form with each change of a form element. This is ok for smaller pages, but some pages the form can be huge and saving the form 20+ times is going to slow things down.

What I’d like to do is just save individual form elements when they are changed instead of the entire form. I’ve tried to do that with a function like this:

<script>
    $(document).ready(function(){
    $('select').live('change',function () {
            var statusVal = $(this).val();
            //alert(statusVal);
            $.ajax({
                     type: "POST",
                     url: "saveStatus.asp",
                     data: "statusType=statusVal",
                     success: function(msg) {
                        // $('#autosavenotify').text(msg);
                     }
          })
      });
    });
    </script>

I had that working too, but I’m not sure how I can pass other variables to my AJAX update page that will be needed to save to the database. For example in the version I posted above I’m able to pass the “SecID” variable and since I’m using serialize() it will send everything. But if I only want to send a change to a single form element at a time, but also include the “SecID” variable or additional variables, how would I change this to accomplish it?

Thanks for any help!

Answer 1

You could try:

...
data: 'statusType=' + statusVal + '&otherKey=<%=otherVal%>',
...