Gcobani Mkontwana

Gcobani Mkontwana

  • 567
  • 1.9k
  • 402.9k

How to pass value to the text field using ajax call in the form?

Mar 1 2024 6:36 PM

Hi Team

The coding is working, now the problem is to find a way when and after filter search. Want to take the result to pass it to the text field from the form using ajax. Below is my current logic.

// ajax call

<script>
        $(document).ready(function () {
        // Function to handle search button click event
         $('#searchButton').on('click', function () {
         var searchTerm = $('#searchInput').val().trim();
        if (searchTerm !== '') {
         // Send an AJAX request to the controller action to search for users
        $.ajax({
        url: '@Url.Action("SearchUsers", "Home")',
        type: 'POST',
         dataType: 'json',
          data: { searchTerm: searchTerm },
           success: function (data) {
            // Clear previous search results
            $('#userTable tbody').empty();
        // Iterate through the retrieved user details and append them to the table
            $.each(data, function (index, user) {
             var row = '<tr>' +
             '<td>' + user.DisplayName + '</td>' +
            '<td>' + user.Email + '</td>' +
                '<td>' + user.Title + '</td>' +
                 '<td>' + user.Department + '</td>' +
                 '<td>' + user.Presence + '</td>' +
                '<td>' + user.WorkPhone + '</td>' +
                '<td>' + user.Location + '</td>' +
                '</tr>';
                $('#userTable tbody').append(row);
                });
        // Show the modal with search results
             $('#checkDetailsModal').modal('show');
            },
        error: function (jqXHR, textStatus, errorThrown) {
         // Handle error if any
        console.error('Error:', textStatus, errorThrown);
             }
            });
            }
            });

            // Function to handle OK button click event
            $('#okButton').on('click', function () {
             // Get the selected user's display name and set it in the Auditor text field
            var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text();
                 $('#auditor').val(selectedUserDisplayName);
                 // Close the modal
             $('#checkDetailsModal').modal('hide');
                });
});
</script>


            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="okButton">OK</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button>
            </div>
        </div>
    </div>
</div>

// form

<!--Auditor names and address-->
<div class="form-group row">
    @Html.LabelFor(model => model.Auditor, htmlAttributes: new { @class = "col-md-4 col-form-label text-md-right" })
    <div class="col-md-8">
        <div class="input-group">
            <input type="text" class="form-control" id="auditor">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="check-details">
                    <img src="@Url.Content("~/Images/Person-fill.svg")" alt="Check Names" style="height: 20px; width: 20px;" />
                </button>
                <button class="btn btn-outline-secondary" type="button" id="browse-directory">
                    <img src="@Url.Content("~/Images/sov-address-book.png")" alt="Check Names" style="height:20px; width:20px;" />
                </button>
            </div>
        </div>
    </div>
</div>


<style>
    .table-responsive {
        overflow-x: auto;
    }

</style>
<!--Modal form popup for user checks details-->
<div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 border-right">
                            <!-- Left Border: Search -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="input-group">
                                    <input type="text" id="searchInput" class="form-control" placeholder="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" id="searchButton" type="button">
                                            <i class="fas fa-search"></i> Search
                                        </button>
                                    </div>
                                </div>

                            </div>

                            <!-- Style background for the container -->
                            <style>
                                .light-grey-list li {
                                    background-color: #808080; /* Dark Grey color */
                                    padding: 5px;
                                }
                            </style>

                            <!-- List of available users shown -->
                            <div class="border p-3">
                                <!-- Ordered List Content Here -->
                                <ol class="light-grey-list">
                                    <li>
                                        <!-- Users list -->
                                        <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">All Users<span id="usersCount" style="display: none;">0</span>
                                    </li>
                                    <li>
                                        <!-- Active directory users -->
                                        <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">Active Directory<span id="activeCount" style="display: none;">0</span>
                                    </li>
                                    <li>
                                        <!-- Organisation users -->
                                        <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">Organization<span id="orgCount" style="display: none;">0</span>
                                    </li>
                                </ol>
                            </div>



                        </div>
                        <div class="col-md-6">
                            <!-- Right Border: Table -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">Details</h5>
                            </div>
                            <div class="border p-3 table-container table-responsive">
                                <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location -->
                                <table class="table table-bordered" id="userTable">
                                    <thead>
                                        <tr>
                                            <th>Display Name</th>
                                            <th>E-mail Address</th>
                                            <th>Title</th>
                                            <th>Department</th>
                                            <th>Presence</th>
                                            <th>Work Phone</th>
                                            <th>Location</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Table Body Content Here -->
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <!-- Add more rows as needed -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

 


Answers (2)