locked
How to get value of table RRS feed

  • Question

  • User490317677 posted

    I have table, where each <tr> contains different value and im confused how should i Get value from each <tr> or get value of all <td> which is in <tr> and send to my Controller, when i submit button. Can anyone please help me or point me in the right direction!

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $(function() {
    
      $('#ResultProduct').on("click", ".SubmitRMA", function() {
    
        $.ajax({
          type: 'post',
          url: '@Url.Action("AnmodOmRMA", "User")',
          dataType: 'json',
          data: //data ,
          success: function(res) {
            console.log(res);
          }
        });
      });
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <tbody id="ResultProduct">
    
      <tr class="RMAJS">
        <td id="varnummer" name="varnummer">SH2800</td>
        <td id="Beskrivelse" name="Beskrivelse">some text</td>
        <td id="AntalVarer" name="AntalVarer">1</td>
        <td id="PrisPrStk" name="PrisPrStk">50</td>
        <td id="PostingDate" name="PostingDate">2018-12-06</td>
      </tr>
    
      <tr class="section">
        <td>
          <select>
            <option value="">- Vælg årsag -</option>
            <option value="1">Forkert vare bestilt (fejlbestilling)</option>
            <option value="2">Forkert vare modtaget (fejllevering)</option>
          </select>
        </td>
        <td>
          <select>
            <option value="">- Jeg forventer -</option>
            <option value="1">Kreditnota</option>
            <option value="2">Reparation</option>
          </select>
        </td>
        <td><input name="Telefonnummer">2233018</td>
        <td><button id="btnSubmitRMA" type="submit" class="SubmitRMA">Send</button>
        </td>
      </tr>
    
      <tr class="RMAJS">
        <td id="varnummer" name="varnummer">61A9MAT1</td>
        <td id="Beskrivelse" name="Beskrivelse">some text two</td>
        <td id="AntalVarer" name="AntalVarer">10</td>
        <td id="PrisPrStk" name="PrisPrStk">500</td>
        <td id="PostingDate" name="PostingDate">2017-11-06</td>
      </tr>
    
      <tr class="section">
        <td>
          <select>
            <option value="">- Vælg årsag -</option>
            <option value="1">fejlbestilling</option>
            <option value="2">fejllevering</option>
          </select>
        </td>
        <td>
          <select>
            <option value="">- Jeg forventer -</option>
            <option value="1">Reparation</option>
            <option value="2">Kredit</option>
          </select>
        </td>
        <td><input name="Telefonnummer">1122015</td>
        <td><button id="btnSubmitRMA" type="submit" class="SubmitRMA">Send</button>
        </td>
      </tr>
    </tbody>

    Controller:

    public JsonResult AnmodOmRMA(RMAHistory model) {
    
                var Insert = new RMA_History
                {
                   //property
                };
    
                db.RMA_History.Add(Insert);
                db.SaveChanges();
    
                return Json(model,JsonRequestBehavior.AllowGet);
    
    
    }

    Tuesday, January 8, 2019 2:08 PM

All replies

  • User475983607 posted

    See your previous thread(s) for proper HTML formatting.

    https://forums.asp.net/p/2150484/6242627.aspx?Re+Dynamically+Add+Remove+input+fields+in+MVC+Save+data+into+Database+with+Jquery+Ajax

    Then simply serialize the table if you want to submit the form via JavaScript code.  

    https://api.jquery.com/serialize/

    Otherwise, properly format the input and place then inputs within a form element and click the submit button.

    Tuesday, January 8, 2019 3:19 PM
  • User1520731567 posted

    Hi ManDown,

    According to your code,If only <td> is available, both serialize() in ajax and submit form with model bind are not working and cannot get its value.

    So,I suggest you could add input in your <td>,and don't forget to add name to each tag.

    I make a simply demo,you could refer to it:

    View:

    @model List<xxx.Controllers.HomeController.RMAHistory>
    
    @{
        ViewBag.Title = "AnmodOmRMA_Index";
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    @using (Html.BeginForm("AnmodOmRMA", "Home", FormMethod.Post, new { id = "Form" }))
    {
    
    
        <table>
    
            <tbody id="ResultProduct">
    
                <tr class="RMAJS">
                    <td><input id="varnummer" name="model[0].varnummer" value="SH2800" /></td>
                    <td>
                        <select name="model[0].Beskrivelse">
                            <option value="">- Vælg årsag -</option>
                            <option value="1">Forkert vare bestilt (fejlbestilling)</option>
                            <option value="2">Forkert vare modtaget (fejllevering)</option>
                        </select>
                    </td>
    
                </tr>
    
                <tr class="RMAJS">
                    <td><input id="varnummer" name="model[1].varnummer" value="SH2800" /></td>
                    <td>
                        <select name="model[1].Beskrivelse">
                            <option value="">- Jeg forventer -</option>
                            <option value="1">Kreditnota</option>
                            <option value="2">Reparation</option>
                        </select>
                    </td>
    
                </tr>
    
    
            </tbody>
        </table>
        <button id="btnSubmitRMA" type="button" class="SubmitRMA">Send</button>
    }
    @section scripts{
        <script>
                $(function() {
    
                    $(".SubmitRMA").click(function () {
                        $.ajax({
                            type: 'post',
                            url: '@Url.Action("AnmodOmRMA", "Home")',
                            dataType: 'json',
                            data: $("#Form").serialize(),
                            success: function (res) {
                                console.log(res);
                            }
                        });
                    });
                });
    
        </script>
    }

    Controller:

     public class RMAHistory
            {
                public string varnummer { get; set; }
                public string Beskrivelse { get; set; }
                public int AntalVarer { get; set; }
                public int PrisPrStk { get; set; }
                public string PostingDate { get; set; }
            }
    
            public ActionResult AnmodOmRMA_Index()
            {
                return View();
            }
            [HttpPost]
            public JsonResult AnmodOmRMA(List<RMAHistory> model)
            {
    
               ...
                return Json(model, JsonRequestBehavior.AllowGet);
    
    
            }

    How it works:

    Best Regards.

    Yuki Tao

    Wednesday, January 9, 2019 5:23 AM