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

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>

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?

然而，它不起作用……我的语法有什么错误?

6 个解决方案

#1

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

您的选择器正在检索文本框的周围

，而不是它的输入。

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

Update after seeing output 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代码可靠地输出HTML <输入> ，id属性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.

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

#2

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

#3

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

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

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

#4

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.

这里的文档。

#5

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());

#6

this is for classes

这是类

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

for ids

为ids

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

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

现在如果你有一个u可以用的形式。

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