Cách đặt giá trị của văn bản đầu vào bằng jQuery

Tôi có một văn bản đầu vào là:

<div class="editor-label">
    @Html.LabelFor(model => model.EmployeeId, "Employee Number")
</div>

<div class="editor-field textBoxEmployeeNumber">
    @Html.EditorFor(model => model.EmployeeId) 
    @Html.ValidationMessageFor(model => model.EmployeeId)
</div>

Sản xuất nào sau html

<div class="editor-label">
  <label for="EmployeeId">Employee Number</label>
</div>

<div class="editor-field textBoxEmployeeNumber">
  <input class="text-box single-line" data-val="true" data-val-number="The field EmployeeId must be a number." data-val-required="The EmployeeId field is required." id="EmployeeId" name="EmployeeId" type="text" value="" />

  <span class="field-validation-valid" data-valmsg-for="EmployeeId" data-valmsg-replace="true"></span>
</div>

Tôi muốn đặt giá trị của văn bản đầu vào này bằng jquery vì vậy tôi đã làm điều này:

<script type="text/javascript" language="javascript">
    $(function() {
        $('.textBoxEmployeeNumber').val("fgg");
    });
</script> 

tuy nhiên, nó không hoạt động ... lỗi trong cú pháp của tôi là gì?

Bộ chọn của bạn đang truy xuất hộp văn bản xung quanh <div class='textBoxEmployeeNumber'>thay vì đầu vào bên trong nó.

// Access the input inside the div with this selector:
$(function () {
  $('.textBoxEmployeeNumber input').val("fgg");
});

Cập nhật sau khi thấy HTML đầu ra

Nếu mã ASP.NET đáng tin cậy xuất HTML <input>với thuộc tính id id='EmployeeId', bạn có thể chỉ cần sử dụng:

$(function () {
  $('#EmployeeId').val("fgg");
});

Không thực hiện được điều này, bạn sẽ cần xác minh trong bảng điều khiển lỗi của trình duyệt rằng bạn không có các lỗi tập lệnh khác khiến điều này không thành công. Ví dụ đầu tiên ở trên hoạt động chính xác trong trình diễn này.

Sử dụng jQuery, chúng ta có thể sử dụng đoạn mã sau:

Chọn theo tên đầu vào:

$('input[name="textboxname"]').val('some value')

Chọn theo lớp đầu vào:

$('input[type=text].textboxclass').val('some value')

Chọn theo id đầu vào:

$('#textboxid').val('some value')

$(document).ready(function () {
    $('#EmployeeId').val("fgg");

    //Or
    $('.textBoxEmployeeNumber > input').val("fgg");

    //Or
    $('.textBoxEmployeeNumber').find('input').val("fgg");
});

Đối với phần tử có id

<input id="id_input_text16" type="text" placeholder="Ender Data"></input>

Bạn có thể đặt giá trị là

$("#id_input_text16").val("testValue");

Tài liệu ở đây .

cái này dành cho lớp

$('.nameofdiv').val('we are developers');

cho id

$('#nameofdiv').val('we are developers');

Bây giờ nếu bạn có một iput ở dạng bạn có thể sử dụng

$("#form li.name input.name_val").val('we are awsome developers');

Đây là một biến thể khác cho một tệp tải lên có nút bootstrap trông đẹp hơn nút duyệt tìm tệp tải lên mặc định. Đây là html:

<div class="form-group">
        @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "col-md-2  control-label" })
        <div class="col-md-1 btn btn-sn btn-primary" id="browseButton" onclick="$(this).parent().find('input[type=file]').click();">browse</div>
        <div class="col-md-7">
            <input id="fileSpace" name="uploaded_file"  type="file" style="display: none;">   @*style="display: none;"*@
            @Html.EditorFor(model => model.FileName, new { htmlAttributes = new { @class = "form-control", @id = "modelField"} })
            @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
        </div>
    </div>

Đây là kịch bản:

        $('#fileSpace').on("change", function () {
        $("#modelField").val($('input[name="uploaded_file"]').val());

Trong js thuần sẽ đơn giản hơn

EmployeeId.value = 'fgg';

EmployeeId.value = 'fgg';

<div class="editor-label">
  <label for="EmployeeId">Employee Number</label>
</div>

<div class="editor-field textBoxEmployeeNumber">
  <input class="text-box single-line" data-val="true" data-val-number="The field EmployeeId must be a number." data-val-required="The EmployeeId field is required." id="EmployeeId" name="EmployeeId" type="text" value="" />
  
  <span class="field-validation-valid" data-valmsg-for="EmployeeId" data-valmsg-replace="true"></span>
</div>