How to append input type submit elements on table using Jquery and bind it?

Question

I am trying to append a table row which has a form and input type submit. Typically, this is what my loop looks like:

@foreach (var item in Model)
   {
     using (Html.BeginForm("Edit", "User"))
          {
              
                  
                  
                    @Html.DisplayFor(modelItem => item.Email)
                    @Html.HiddenFor(modelItem => item.Email, new { name = "Email" })
                  
                  
                     Edit
                      
                  
             
          }
    }

Now on my AJAX call, I need to add additional user here on this table row, here's how I usually do it:

 $.ajax({
        type: "POST",
        url: 'URL',
        dataType: 'json'
       }).done(function (data) {
        if (data.status == 'True') {
            var usrObj = data.uobj;

            $(function () {
            var table = $('#tblUsers tbody');

            for (var i = 0; i < usrObj.length; i++) {
                $('#tblUsers').find('tbody')
                    .append('' +
                     '' +
                     '' + usrObj[i].Email + '' +
                     "Edit" + 
                     `` +
                        '');
                }
            }                
    });

Now what is happening is that, the appended link is working fine since everything the link that is needed to function is already set on it's attributes:

Edit

This is I am having a hard time submitting the form:

I tried adding the following code below but still, nothing is happening, the confirm dialog box is popping up, but upon clicking Ok button, nothing is happening. The form is not submitting. But the other rows are working fine after the append.

Here's what I tried, but all of these are not working fine.

  $(function () {
      $(document).on('submit', 'form', function (event) {
             $(this).submit();
          });
   });

I guess the way I appended my table row is the problem but I am not clearly sure.

user_10606400 · Answer

Problem in your current jquery code was that when you were appending new rows inside table it was going outside tr tag that's the reason form submit was not working . Instead you can put form tag inside td tag and the input field as well which you need to pass to backend so that form gets trigger using button inside it .

Demo Code :

//this is for demo :)
var usrObj = [{
  "Email": "cdcdc",
  "Id": 11
}, {
  "Email": "cdcdc2",
  "Id": 12
}]
for (var i = 0; i < usrObj.length; i++) {
  $('#tblUsers').find('tbody').append('' + usrObj[i].Email + '' + "Edit" + `` + '' + "");
}

user_14905594 · Answer

Please update your ajax code with

for (var i = 0; i < usrObj.length; i++) {    
    $('#tblUsers').find('tbody').append('' +
    '' +
    '' + usrObj[i].Email + '' +
    'Edit' + 
    '' +
    '');
}

Also, $(document).on has much lower performance than $('form.remember').on('submit'). It now has to listen for all submit events in the document. It's much better to restrict the scope a little than listen on document, if possible

How to append input type submit elements on table using Jquery and bind it?

2 Answers