How to set value of input text using jQuery

Question

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

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

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

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

i used the input text inside a form.... – raberana May 16 '12 at 02:22 — raberana, May 16 '12 at 02:22

Michael Berkowski · Accepted Answer · 2012-05-16T02:35:03.660

561

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:

$(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.

edited May 16 '12 at 02:35

answered May 16 '12 at 02:22

Michael Berkowski

267,341
46
444
390

tried that, not working.... tried also .textBoxEmployeeNumber input=[type="text"]... not working also – raberana May 16 '12 at 02:24
@using (Html.BeginForm()) { @Html.ValidationSummary(true)
Reservation .........
@Html.LabelFor(model => model.EmployeeId, "Employee Number")

@Html.EditorFor(model => model.EmployeeId) @Html.ValidationMessageFor(model => model.EmployeeId)
..........
– raberana May 16 '12 at 02:27
Employee Number

– raberana May 16 '12 at 02:33
@RojBeraña Does the browser read code inside your $(document).ready function? place alert there: – karaxuna May 16 '12 at 13:08
Have similar problem, value is visible in browser, but when I check code with F12, there is `value=""` and empty filed in DB after saving. – Sebastian Xawery Wiśniowiecki Jan 30 '15 at 12:02
.val doesn't work for me. The text doesn't appear in the input box – Inês Barata Feio Borges Nov 04 '20 at 16:11

score 74 · Answer 2 · edited Jan 10 '16 at 18:49

74

Using jQuery, we can use the following code:

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:

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

edited Jan 10 '16 at 18:49

Kaspar Lee

5,446
4
31
54

answered Aug 13 '13 at 13:52

Aditya P Bhatt

21,431
18
85
104

score 12 · Answer 3 · edited Sep 19 '13 at 12:25

12

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

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

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

edited Sep 19 '13 at 12:25

Nikhil Agrawal

26,128
21
90
126

answered May 16 '12 at 07:20

Thulasiram

8,432
8
46
54

Aniket Thakur · Answer 4 · 2014-06-04T09:05:44.237

5

For element with 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.

edited Jun 04 '14 at 09:05

answered Jun 04 '14 at 08:56

Aniket Thakur

66,731
38
279
289

score 4 · Answer 5 · answered Jan 18 '18 at 16:35

4

this is for classes

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

for ids

$('#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');

answered Jan 18 '18 at 16:35

user4920718

1,196
1
10
13

score 0 · Answer 6 · answered Apr 16 '16 at 01:27

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:

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

Kamil Kiełczewski · Answer 7 · 2019-08-15T08:34:06.117

In pure js it will be simpler

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>

How to set value of input text using jQuery

7 Answers7

Update after seeing output HTML

Linked

Related