locked
How to get value of one input field and sending value of that input field with each products to database RRS feed

  • Question

  • User490317677 posted

    I have page, where i add one or many products (Dynamically via javascript) and it will add products including (Product Name, Serial number, Qty) to database. 

    But, i have single input field  Customer Name which i want get value of Customer Name input field and sending with each products to database as you see in screen shots

    Screeshots

    I tried to move Customer Name input field inside form tag and it will serialize input just for first row and than when i add more row it will be no more customer input field and than i should add customer name input into my Javascript (i add more row or inputs dynamically via javaScript) so it will add customer input field everytime i add more input fields and its not wat i looking for . the thing i looking for just one customer name input field and than send value of customer name field each time i add more products.

    Example when data inserted into database:

    Customer Name | Product Name | Serial number | Qty 

    Test                                         A                                   1234                        1

    Test                                         B                                   4567                        2


    But, right now look like this in my database when its inserting data : 

    Customer Name | Product Name | Serial number | Qty 

    null                                 A                                   1234                        1

    null                                 B                                   4567                        2

    Controller:

    [HttpPost]
    public JsonResult ProcessCreateRMA(CreateRMAVM vm)
    {
        using (var namespace = new namespace())
        {
            if (vm.vares == null)
            {
                vm.vares = new List<CreateRMAVM.vare>();
            }
    
            foreach (var item in vm.vares)
            {
                var rmainsert = new RMA_History
                {
                    //CustomerName = item.CustomerName,
                    ProductName = item.ProductName,
                    Serialnumber = item.Serialnumber,
                    Qty = item.Qty,
    
                };
    
                db.RMA_History.Add(rmainsert);
            }
                db.SaveChanges();
            }
    
            return Json(vm, JsonRequestBehavior.AllowGet);
    
        }

    JavaScript:

    <script>
        $(document).ready(function () {
            //Add input field 
            var i = 0;
            $("#add").click(function (e) {
                i++;
                e.preventDefault();
                $("#tbhold").append('<tr id="row' + i + '"><td><div><input type="text" name="vares[' + i + '].ProductName" id=' + i + ' /></div></td><td><div><input type="text" name="vares[' + i + '].SerialNumber" id=' + i + '/></div></td><td><div style="padding:0" class="col-md-12"><input id="Qty" name="vares[' + i + '].Qty"/></div></td><td><button type="button" class="btn btn-danger btn_remove" id="' + i + '" name="remove"><i class="fa fa-minus-circle" aria-hidden="true"></i>Remove</button></td></tr>');
            });
    
            //Remove input field 
            $(document).on('click', '.btn_remove', function () {
                var button_id = $(this).attr("id");
                $("#row" + button_id + '').remove();
            });
    
        //Save to db by click
        $("#submit").click(function (e) {
            e.preventDefault();
    
            $.ajax({
                type: 'POST',
                url: '@Url.Action("ProcessCreateRMA", "User")',
                dataType: 'json',
                data: ($('#add_rma').serialize()),
                success: function (result) {
                    console.log(result);
                },
                error: function () {
                console.log('something went wrong - debug it!');
                }
            });
        });
    
     });
    </script>

    View:

    <label>Customer Name</label>
    <input type="text" name="CustomerName" id="CustomerName">
    
    <form name="add_rma" id="add_rma">
        <table id='tbhold' class="table">
            <thead>
                <tr>
                    <th>Product Name </th>
                    <th>Serial number</th>
                    <th>Qty</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <input type="text" name="vares[0].ProductName" id="ProductName" />
                        </div>
    
                    </td>
                    <td>
                        <div>
                            <input type="text" name="vares[0].Serialnumber" id="Serialnumber" />
                        </div>
                    </td>
                    <td>
                        <div>
                            <input name="vares[0].Qty" id="Qty"/>
                        </div>
                    </td>
    
                    <td>
                        <button type="button" name="add" id="add">Add more</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="submit" name="submit" id="submit" value="Submit" />
    </form>

    ViewModel:

    public class CreateRMAVM
    {
       public List<vare> vares { get; set; }
    
        public class vare
        {
    
            public vare()
            {
    
            }
    
            public vare(/*string CustomerName*/ string ProductName, string SerialNumber, string Qty)
            {
            }
    
            //public string CustomerName { get; set; }
            public string ProductName { get; set; }
            public string SerialNumber { get; set; }
            public string Qty { get; set; }
        }
     }
    Friday, December 21, 2018 11:20 AM

All replies

  • User475983607 posted

    The customer name is outside the add-rma form so the input  is not serialized.  Move the input inside the form or add a hidden field to the form.  Be sure to update the CreateRMAVM type to include the name.

    public class CreateRMAVM
    {
    	public string CustomerName { get; set; }
    	public List<RmaDetail> RamDetails {get; set;}
     }
     
     public class RmaDetail{
    	public string ProductName { get; set; }
    	public string SerialNumber { get; set; }
    	public string Qty { get; set; }
     }

    Friday, December 21, 2018 1:12 PM
  • User490317677 posted

    i also said in my question , when i add customer name input field inside form it will be send value of customer input only with first row which is defined in my html and when i add more row it will be generate new input fields dynamically via Java Script and here i will get problem which i cant send value of customer input field 

    Friday, December 21, 2018 2:44 PM
  • User475983607 posted

    i also said in my question , when i add customer name input field inside form it will be send value of customer input only with first row which is defined in my html and when i add more row it will be generate new input fields dynamically via Java Script and here i will get problem which i cant send value of customer input field 

    Right, and I recommended fixing the model structure to match HTML form.  Please see my previous post.

    Friday, December 21, 2018 2:48 PM
  • User-271186128 posted

    Hi ManDown,

    How about using JQuery to get the textbox value (contain the customer name and product information), instead of using the serialize method. Then, transfer these data to asp.net MVC controller. 

    here are some related articles about passing data from view to controller using JQuery, you could refer to them:

    https://www.aspsnippets.com/Articles/Pass-Send-List-of-objects-from-View-to-Controller-using-jQuery-AJAX-in-ASPNet-MVC.aspx

    https://forums.asp.net/t/1694922.aspx?how+i+can+pass+complex+json+object+view+to+controller+in+ASP+net+MVC

    Best regards,
    Dillion

    Tuesday, January 1, 2019 8:43 AM