CODEWITHSUNDEEP
jquery
Efe
Efe

Reputation: 289

submit inside submit

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?

Upvotes: 0

Views: 175

Answers (2)

Svante Svenson
Svante Svenson

Reputation: 12478

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

Upvotes: 0

Alex Rodrigues
Alex Rodrigues

Reputation: 2707

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.

Upvotes: 1

Related Questions