Javascript 如何使用jQuery设置输入文本的值

How to set value of input text using jQuery

提问by raberana

I have an input text which is this:

我有一个输入文本是这样的：

<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>

Which produce following html

哪个产生以下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>

I want to set the value of this input text using jquery so i did this:

我想使用 jquery 设置此输入文​​本的值，所以我这样做了：

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

however, it is not working... what is the error in my syntax?

但是，它不起作用……我的语法有什么错误？

回答by Michael Berkowski

Your selector is retrieving the text box's surrounding <div class='textBoxEmployeeNumber'>instead of the input inside it.

您的选择器正在检索文本框的周围<div class='textBoxEmployeeNumber'>而不是其中的输入。

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

Update after seeing output HTML

看到输出 HTML 后更新

If the ASP.NET code reliably outputs the HTML <input>with an id attribute id='EmployeeId', you can more simply just use:

如果 ASP.NET 代码可靠地输出<input>带有 id 属性的 HTML id='EmployeeId'，您可以更简单地使用：

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

Failing this, you will need to verify in your browser's error console that you don't have other script errors causing this to fail. The first example above works correctly in this demonstration.

如果失败，您将需要在浏览器的错误控制台中验证您没有其他导致此失败的脚本错误。上面的第一个示例在本演示中正常工作。

回答by Aditya P Bhatt

Using jQuery, we can use the following code:

使用jQuery，我们可以使用以下代码：

Select by input name:

按输入名称选择：

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

Select by input class:

按输入类选择：

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

Select by input id:

按输入 ID 选择：

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

回答by Thulasiram

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

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

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

回答by Aniket Thakur

For element with id

对于带有 id 的元素

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

You can set the value as

您可以将值设置为

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

Documentation here.

文档在这里。

回答by user4920718

this is for classes

这是上课用的

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

for ids

对于 ID

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

now if u have an iput in a form u can use

现在如果你有一个你可以使用的形式的输入

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

回答by Kamil Kie?czewski

In pure js it will be simpler

在纯js中会更简单

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>

回答by Bicycle Dave

Here is another variation for a file upload that has a nicer looking bootstrap button than the default file upload browse button. This is the html:

这是文件上传的另一种变体，它具有比默认文件上传浏览按钮更好看的引导程序按钮。这是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>

Here is the script:

这是脚本：

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