Question

I admit its not very clear title. But I did not know how else to name what I am trying to do.

I have index.htm. this page pulls data from index.asp?Process=ViewRequests with the following code.

    $(function Requests() {
        $.ajax({
            type: 'GET',
            url: 'content/requests/index.cs.asp?Process=ViewRequests',
            success: function(data) {
                $("#requests").html(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#requests").html('.');
            }
        });
    });

Then, in this new pulled data set, I have a few forms. All forms have REQUESTFORM as ID and submit buttons’ name is respond. What I need it needs to perform; once user clicks on either of these forms, clicked form should send its data to index.asp?Process=RespondRequests and print its response.

    $("[name='respond']").click(function() { 
            $.ajax({
                type: "POST",
                data: $("#REQUESTFORM").serialize(),
                url: "content/requests/index.cs.asp?Process=RespondRequests", 
                success: function(output) { 
                $('#REQUESTFORM').html(output)
                },
                error: function(output) {
                $('#REQUESTFORM').html(output);
                }
            }); 
    }); 

Is this even possible?

Answer 1

You cannot have more than one element with the same ID, or at least you won’t be able to use the ID for anything useful if you do. But since the submit button is below the form tag, you can use the closest function to select the closest form. And since this within a click event refers to the element being clicked you can easily get a hold of the form for the button clicked:

   $(function Requests() {
     $.ajax({
       type: 'GET',
       url: 'content/requests/index.cs.asp?Process=ViewRequests',
       success: function(data) {
         var that = this;
         $("#requests").html(data);
         $("[name='respond']").click(function() { 
           $.ajax({
             type: "POST",
             data: $(that).closest("form").serialize(),
             url: "content/requests/index.cs.asp?Process=RespondRequests", 
             success: function(output) { 
               $(that).closest("form").html(output)
             },
             error: function(output) {
               $(that).closest("form").html(output);
             }
           });
         });
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
         $("#requests").html('.');
       }
     });
   });