Styjun

Why does dd not make working bootable USB sticks for Microsoft?

Why is the UK still pressing on with Brexit?

Why does an orbit become hyperbolic when total orbital energy is positive?

How to convert Mn2O3 to Mn3O4?

Is my sink P-trap too low?

Test to know when to use GLM over Linear Regression?

How do certain apps show new notifications when internet access is restricted to them?

What is this WWII four-engine plane on skis?

What is the word for a person who destroys monuments?

Who are the people reviewing far more papers than they're submitting for review?

Exam design: give maximum score per question or not?

How clean are pets?

Is there a theorem in Real analysis similar to Cauchy's theorem in Complex analysis?

Very lazy puppy

In what state are satellites left in when they are left in a graveyard orbit?

Writing a system of Linear Equations

how to determine architecture core detail of ARM11 processor

What is the origin of the "being immortal sucks" trope?

Output Distinct Factor Cuboids

What's the benefit of prohibiting the use of techniques/language constructs that have not been taught?

Are there any “Third Order” acronyms used in space exploration?

How to make classical firearms effective on space habitats despite the coriolis effect?

What does the "capacitor into resistance" symbol mean?

In what sequence should an advanced civilization teach technology to medieval society to maximize rate of adoption?

Deleting the row of HTML table using tr.remove(), submit button is sending back only rows above it and not below it

jQuery delete all table rows except firstHow is the default submit button on an HTML form determined?HTML button to NOT submit formGenerating new html Row and Appending to table in JQueryAdd or delete a row of a table then put all the data in a JSON filejQuery click anything but link with classHow to position button within column next to input file in Bootstrap tableHow to pass parameters to the jquery alert functionjQuery responds with html table containing a (form in each row plus jquery code to edit each row) newly created forms ignore submit()

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I have a HTML table for which i have delete button for each row.
Clicking on the delete button, it goes to javascript and I remove the row using below code . When I try to submit the table content back to the controller using the submit (Ajax.beginform), it is sending back the data only above the deleted row, and nothing below the deleted row. Even though in the UI, it is still showing all the rows above and below the deleted row.

Example: Lets say if I upload 3 documents, and delete the middle one, it will remove the row from the table but when I click on the Upload button, I get only the first row.

But if I delete the last row, 3rd document, then I am getting back above 2 documents properly in my Upload button action.

Thanks in advance for your help

javascript code:

function removeDocument(selector) 
 $(selector).closest('tr').remove();

HTML code:

 @using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" ))
 

 <table class="table table-bordered" id="DocumentTable">
 <thead>
 <tr>
 <th><span class="reqAsterisk">* </span>Document Title</th> 
 <th></th>
 </tr>
 </thead>
 <tbody>
 @for (int i = 0; i < Model.Count(); i++)
 
 <tr>
 <td style="width: 50%; display:none" class="nr" > 
 @Html.TextAreaFor(m => Model.FileName, htmlAttributes: new @class = "form-control dmm-autoresize", @rows = "1" ) 
 </td>
 <td>
 <a style="color:red; cursor:pointer" onclick="removeDocument(this)">
 <i class="far fa-trash-alt"></i>
 </a>
 </td>
 </tr>
 
 </tbody>
 </table>
 <input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/> 
 

This is after deleting the row

This is before deleting the row

javascript jquery html5 model-view-controller

share|improve this question

edited Mar 28 at 13:13

Riya

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please include all relevant code(Html), without, its hard to pinpoint the problem
  
  – Carsten Løvbo Andersen
  Mar 28 at 12:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sure. I will edit the question
  
  – Riya
  Mar 28 at 12:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Updated the question
  
  – Riya
  Mar 28 at 12:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you post the data without deleting a row, can you see everything?
  
  – Carsten Løvbo Andersen
  Mar 28 at 13:01
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I am getting everything back if I am not deleting any thing.
  
  – Riya
  Mar 28 at 13:01
  

  
  
  
  

 | 
show 3 more comments

2

I have a HTML table for which i have delete button for each row.
Clicking on the delete button, it goes to javascript and I remove the row using below code . When I try to submit the table content back to the controller using the submit (Ajax.beginform), it is sending back the data only above the deleted row, and nothing below the deleted row. Even though in the UI, it is still showing all the rows above and below the deleted row.

Example: Lets say if I upload 3 documents, and delete the middle one, it will remove the row from the table but when I click on the Upload button, I get only the first row.

But if I delete the last row, 3rd document, then I am getting back above 2 documents properly in my Upload button action.

Thanks in advance for your help

javascript code:

function removeDocument(selector) 
 $(selector).closest('tr').remove();

HTML code:

 @using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" ))
 

 <table class="table table-bordered" id="DocumentTable">
 <thead>
 <tr>
 <th><span class="reqAsterisk">* </span>Document Title</th> 
 <th></th>
 </tr>
 </thead>
 <tbody>
 @for (int i = 0; i < Model.Count(); i++)
 
 <tr>
 <td style="width: 50%; display:none" class="nr" > 
 @Html.TextAreaFor(m => Model.FileName, htmlAttributes: new @class = "form-control dmm-autoresize", @rows = "1" ) 
 </td>
 <td>
 <a style="color:red; cursor:pointer" onclick="removeDocument(this)">
 <i class="far fa-trash-alt"></i>
 </a>
 </td>
 </tr>
 
 </tbody>
 </table>
 <input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/> 
 

This is after deleting the row

This is before deleting the row

javascript jquery html5 model-view-controller

share|improve this question

edited Mar 28 at 13:13

Riya

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please include all relevant code(Html), without, its hard to pinpoint the problem
  
  – Carsten Løvbo Andersen
  Mar 28 at 12:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  sure. I will edit the question
  
  – Riya
  Mar 28 at 12:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Updated the question
  
  – Riya
  Mar 28 at 12:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you post the data without deleting a row, can you see everything?
  
  – Carsten Løvbo Andersen
  Mar 28 at 13:01
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I am getting everything back if I am not deleting any thing.
  
  – Riya
  Mar 28 at 13:01
  

  
  
  
  

 | 
show 3 more comments

I have a HTML table for which i have delete button for each row.
Clicking on the delete button, it goes to javascript and I remove the row using below code . When I try to submit the table content back to the controller using the submit (Ajax.beginform), it is sending back the data only above the deleted row, and nothing below the deleted row. Even though in the UI, it is still showing all the rows above and below the deleted row.

Example: Lets say if I upload 3 documents, and delete the middle one, it will remove the row from the table but when I click on the Upload button, I get only the first row.

But if I delete the last row, 3rd document, then I am getting back above 2 documents properly in my Upload button action.

Thanks in advance for your help

javascript code:

function removeDocument(selector) 
 $(selector).closest('tr').remove();

HTML code:

 @using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" ))
 

 <table class="table table-bordered" id="DocumentTable">
 <thead>
 <tr>
 <th><span class="reqAsterisk">* </span>Document Title</th> 
 <th></th>
 </tr>
 </thead>
 <tbody>
 @for (int i = 0; i < Model.Count(); i++)
 
 <tr>
 <td style="width: 50%; display:none" class="nr" > 
 @Html.TextAreaFor(m => Model.FileName, htmlAttributes: new @class = "form-control dmm-autoresize", @rows = "1" ) 
 </td>
 <td>
 <a style="color:red; cursor:pointer" onclick="removeDocument(this)">
 <i class="far fa-trash-alt"></i>
 </a>
 </td>
 </tr>
 
 </tbody>
 </table>
 <input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/> 
 

This is after deleting the row

This is before deleting the row

javascript jquery html5 model-view-controller

share|improve this question

edited Mar 28 at 13:13

Riya

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

function removeDocument(selector) 
 $(selector).closest('tr').remove();

 @using (Ajax.BeginForm("Upload", "MatterFiling", new AjaxOptions HttpMethod = "POST", OnSuccess = "SuccessUploadDocument", OnFailure = "OnUploadFailure" ))
 

 <table class="table table-bordered" id="DocumentTable">
 <thead>
 <tr>
 <th><span class="reqAsterisk">* </span>Document Title</th> 
 <th></th>
 </tr>
 </thead>
 <tbody>
 @for (int i = 0; i < Model.Count(); i++)
 
 <tr>
 <td style="width: 50%; display:none" class="nr" > 
 @Html.TextAreaFor(m => Model.FileName, htmlAttributes: new @class = "form-control dmm-autoresize", @rows = "1" ) 
 </td>
 <td>
 <a style="color:red; cursor:pointer" onclick="removeDocument(this)">
 <i class="far fa-trash-alt"></i>
 </a>
 </td>
 </tr>
 
 </tbody>
 </table>
 <input type="submit" name="UploadButton" value="Upload" id="UploadDocsButton" class="btn btn-primary"/> 
 

share|improve this question

edited Mar 28 at 13:13

Riya

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

share|improve this question

edited Mar 28 at 13:13

Riya

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

asked Mar 28 at 12:49

RiyaRiya

2355 bronze badges

1 Answer
1

active

oldest

votes

0

if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].

share|improve this answer

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55398089%2fdeleting-the-row-of-html-table-using-tr-remove-submit-button-is-sending-back%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].

share|improve this answer

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

add a comment
 | 

0

if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].

share|improve this answer

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

add a comment
 | 

if you are using form then you have refresh your form, you can also try to name the input types name with array like username[].

share|improve this answer

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

share|improve this answer

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges

answered Mar 28 at 12:55

gaurav krishnagaurav krishna

2644 bronze badges