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

@Html.LabelFor(model => model.Auditor, htmlAttributes: new { @class = "col-md-4 col-form-label text-md-right" })

Select People and Groups All Users0 Active Directory0 Organization0 Details Display Name E-mail Address Title Department Presence Work Phone Location

$(document).ready(function () {
    // ... (your existing code)

    // 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');
        
        // Clear the selected class from the table rows
        $('#userTable tbody tr').removeClass('selected');
    });
});

In this updated code:

var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text(); retrieves the display name of the selected user from the first column of the selected table row.
$('#auditor').val(selectedUserDisplayName); sets the value of the #auditor text field with the selected user's display name.
$('#userTable tbody tr').removeClass('selected'); removes the 'selected' class from all table rows, ensuring that the next time the modal is opened, there are no previously selected rows.

Make sure to include these changes in your existing JavaScript code.

$(document).ready(function () { // Function to handle OK button click event $('#okButton').on('click', function () { // Retrieve the selected user's display name var selectedUserDisplayName = getSelectedUserDisplayName(); // Set the selected user's display name in the Auditor text field $('#auditor').val(selectedUserDisplayName); // Close the modal $('#checkDetailsModal').modal('hide'); // Clear the selected class from the table rows $('#userTable tbody tr').removeClass('selected'); }); // Function to retrieve the selected user's display name function getSelectedUserDisplayName() { var selectedUserDisplayName = ''; // Check if any user is selected var selectedRow = $('#userTable tbody tr.selected'); if (selectedRow.length > 0) { // Retrieve the display name from the first column of the selected row selectedUserDisplayName = selectedRow.find('td:eq(0)').text(); } else { // Handle case when no user is selected console.error('No user selected.'); } return selectedUserDisplayName; } });

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jithu Thomas2y ago
Accepted answer
```
$(document).ready(function () {
    // ... (your existing code)

    // 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');
        
        // Clear the selected class from the table rows
        $('#userTable tbody tr').removeClass('selected');
    });
});
```
In this updated code:
1. var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text(); retrieves the display name of the selected user from the first column of the selected table row.
2. $('#auditor').val(selectedUserDisplayName); sets the value of the #auditor text field with the selected user's display name.
3. $('#userTable tbody tr').removeClass('selected'); removes the 'selected' class from all table rows, ensuring that the next time the modal is opened, there are no previously selected rows.
Make sure to include these changes in your existing JavaScript code.
+2

Tuhin Paul2y ago

Instead of selecting the first column of the selected table row using $('#userTable tbody tr.selected td:first'), you can optimize it by directly targeting the first column with $('#userTable tbody tr.selected td:eq(0)').