Getting Dynamic Input Value and Post to the AJAX function

Introduction

A web application, managing vehicle data efficiently is essential for many businesses, from logistics companies to car rental services. This article explores how to implement a feature for updating vehicle details using a straightforward form and AJAX.

Overview

The process involves creating a user-friendly interface where users can update vehicle types and numbers. This interface communicates with the server to save the updated information. Below, we detail the key components of the implementation.

HTML Structure

The HTML layout includes a card for a clean presentation of the form. Here’s an excerpt.

<div class="card w-100" style="margin-top:20px;">
    <div class="card-header">
        <h5 class="card-title mb-0">Update Vehicle Details</h5>
    </div>
    <div class="card-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-12" style="margin:auto; background:#f3f3f3; border-radius:10px; padding:20px;">
                    <h3 class="text-center">Update Vehicle Details</h3>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Vehicle Type</th>
                                    <th>Vehicle Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Dynamic rows will be populated here -->
                            </tbody>
                        </table>
                    </div>
                    <div class="form-group text-center" style="margin-top:15px;">
                        <button type="button" class="btn btn-primary btn-lg" id="updatevehicles" onclick="Updatevehicle()">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript Functionality

The core of the update process lies in the Updatevehicle() function. This function collects data from the form and sends it to the server via an AJAX call.

function Updatevehicle() {
    const vehicleTypeIDs = [];
    const vehicleNumbers = [];
    const passIssuanceIds = [];

    $(".txtVehicleTypeID").each(function () {
        vehicleTypeIDs.push($(this).val());
    });

    $(".new-unique-class1").each(function () {
        vehicleNumbers.push($(this).val());
    });

    $(".pasissue").each(function () {
        passIssuanceIds.push($(this).val());
    });

    let companyInfo = "";

    for (let i = 0; i < vehicleTypeIDs.length; i++) {
        if (!vehicleTypeIDs[i]) {
            displayError("Please enter valid vehicle type.");
            return;
        }
        companyInfo += `${vehicleTypeIDs[i]}~${vehicleNumbers[i]}~${passIssuanceIds[i]}|`;
    }

    $.ajax({
        url: '@Url.Action("Updatepassdetails")',
        type: 'POST',
        dataType: 'json',
        data: { CompanyInfo: companyInfo },
        success: function (data) {
            if (data.Status === "0") {
                showSuccess(data.StatusDesc);
            } else {
                showError(data.StatusDesc);
            }
        },
        error: function (xhr, status, error) {
            showError("An error occurred: " + error);
        }
    });
}

Key Features

1. Dynamic Data Collection: The function collects values from input fields and constructs a data string for submission.
2. AJAX Communication: It sends the data to the server without requiring a page reload, providing a smoother user experience.
3. User Feedback: The function includes methods to display success and error messages, enhancing user interaction.

Conclusion

By implementing this vehicle details update feature, businesses can streamline their data management processes effectively. The use of AJAX allows for a seamless experience, while the HTML structure ensures clarity and ease of use. This approach can be extended to include additional validations and features as needed.