Jquery get text box and dropdown values inside div in array

Question

0.00/5 (No votes)

See more:

Hello,

Basically in jQuery, I clone a div multiple time and inside it I have 3 textboxes and a dropdown. Now, I want to get 3 text box and my one dropdown value inside every div in array and want to pass that in controller.
Ex:

<div class="col-md-12 m-t-5 NewVehicle">
                                            
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                                <div class="form-group">
                                                    <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                                                    <div style="display:flex;">
                                                        <input class="form-control m-r-5" id="txtVehicleYear" type="text" />
                                                        <input class="form-control" id="txtVehicleMake" type="text">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                                                    <input class="form-control" id="txtVehicleModel" type="text">
                                                </div>
                                                <div class="form-group">
                                                    <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                                                    @Html.DropDownListFor(Model => Model.lstVehicleType, new SelectList(Model.lstVehicleType, "Value", "Text"), new { @class = "form-control", @id = "ddlNewVehicleType" })
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                            </div>
                                        </div>

What I have tried:

I have tried with jquery but all values in inside comes in a single array.
var inputArray = [];
$('#dvNewVehicle').find("select, text, input").each(function () {
var cntrlId = $(this).attr('id');
inputArray.push($("#" + cntrlId + "").val().trim());
});

above returns me value1, value2, value3, value4, value5, value6 but I want it as [{value1, value2, value3},{value4, value5, value6}].
one div values in one list.

Posted 19-Jul-17 23:39pm

kkakadiya

Updated 20-Jul-17 0:06am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2017-07-20T00:06:00

A few issues, first of all http and forms worked fine long before js was invented, you don't need js to do basic http like submit form data to an action. Next you are duplicating ids and ids need to be unique; duplicating them can lead to unexpected behaviours. Also ids are only used for js, css etc, they are not submitted with a form, you need a "name" for that.

Simplest solution to your problem is to change your ids to names and amend the target action

<div class="col-md-12 m-t-5 NewVehicle">
                                            
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <div class="form-group">
            <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
            <div style="display:flex;">
                <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                <input class="form-control" name="txtVehicleMake" type="text">
            </div>
        </div>
        <div class="form-group">
            <label for="VehicleModel">Model</label><span class="text-danger">*</span>
            <input class="form-control" name="txtVehicleModel" type="text">
        </div>
        <div class="form-group">
            <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
            <select name="ddlNewVehicleType">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    </div>
</div>

[HttpPost]
public ActionResult Index(string[] txtVehicleYear, string[] txtVehicleMake, string[] txtVehicleModel, string[] ddlNewVehicleType)
{
    // you'll probably want some validation that all arrays are the same length

    for (int i = 0; i < txtVehicleYear.Length; i++)
    {
        string year = txtVehicleYear[i];
        string make = txtVehicleMake[i];
        string model = txtVehicleModel[i];
        string type = ddlNewVehicleType[i];
    }

    return View();
}

Update

Below are two divs (I've hard-coded them for simplicity) inside a form that is then submitted via ajax and serialisation

<form id="myForm">
    <div class="col-md-12 m-t-5 NewVehicle">

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="form-group">
                <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                <div style="display:flex;">
                    <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                    <input class="form-control" name="txtVehicleMake" type="text">
                </div>
            </div>
            <div class="form-group">
                <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                <input class="form-control" name="txtVehicleModel" type="text">
            </div>
            <div class="form-group">
                <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                <select name="ddlNewVehicleType">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
    </div>

    <div class="col-md-12 m-t-5 NewVehicle">

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="form-group">
                <label for="VehicleYear">Year/Make</label><span class="text-danger">*</span>
                <div style="display:flex;">
                    <input class="form-control m-r-5" name="txtVehicleYear" type="text" />
                    <input class="form-control" name="txtVehicleMake" type="text">
                </div>
            </div>
            <div class="form-group">
                <label for="VehicleModel">Model</label><span class="text-danger">*</span>
                <input class="form-control" name="txtVehicleModel" type="text">
            </div>
            <div class="form-group">
                <label for="VehicleType">Vehicle Type</label><span class="text-danger">*</span>
                <select name="ddlNewVehicleType">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
    </div>
</form>

<input value="Click" type="button" onclick="submit()"/>

<script>
    function submit() {
        $.ajax({
            method: 'POST',
            url: '@Url.Action("Index", "Home")',
            data: $("#myForm").serialize()
        });
    }

</script>

The controller method is the same as above