submit inside submit

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

Hello,

I'm not very sure of what are you trying to do but you can use the submit event for the form and handle the request by AJAX. In the handler function you should return false to prevent the form to be submited in the browser (because you will submit it by AJAX).

I hope it helps.

Answer 2

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('.');
       }
     });
   });