How to use jQuery to set value of an input element generated by ASP.NET MVC?

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

2012-05-16 02:22:17 +00:00
Commented May 16, 2012 at 2:22 — raberana
– raberana, Commented May 16, 2012 at 2:22

Michael Berkowski · Accepted Answer · 2012-05-16 02:35:03Z

563

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, 2012 at 2:35

answered May 16, 2012 at 2:22

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

raberana Over a year ago

tried that, not working.... tried also .textBoxEmployeeNumber input=[type="text"]... not working also

raberana Over a year ago

@using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>Reservation</legend> ......... <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>..........

raberana Over a year ago

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

karaxuna Over a year ago

@RojBeraña Does the browser read code inside your $(document).ready function? place alert there: <script type="text/javascript" language="javascript"> alert('entered'); $(function () {$('#EmployeeId').val("fgg"); }); </script>

XWiśniowiecki Over a year ago

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.

|

Kaspar Lee · Accepted Answer · 2016-01-10 18:49:28Z

77

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, 2016 at 18:49

Kaspar Lee

5,6465 gold badges33 silver badges55 bronze badges

answered Aug 13, 2013 at 13:52

Aditya P Bhatt

22.2k20 gold badges88 silver badges104 bronze badges

Comments

Nikhil Agrawal · Accepted Answer · 2013-09-19 12:25:33Z

12

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

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

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

edited Sep 19, 2013 at 12:25

Nikhil Agrawal

26.7k21 gold badges93 silver badges127 bronze badges

answered May 16, 2012 at 7:20

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

Comments

Aniket Thakur · Accepted Answer · 2014-06-04 09:05:44Z

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 4, 2014 at 9:05

answered Jun 4, 2014 at 8:56

Aniket Thakur

69.4k43 gold badges290 silver badges299 bronze badges

Comments

Achu EL Somto · Accepted Answer · 2018-01-18 16:35:09Z

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, 2018 at 16:35

Achu EL Somto

1,4481 gold badge12 silver badges13 bronze badges

Comments

Bicycle Dave · Accepted Answer · 2016-04-16 01:27:32Z

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 · Accepted Answer · 2019-08-15 08:34:06Z

0

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>

edited Aug 15, 2019 at 8:34

answered Apr 8, 2019 at 6:46

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

How to use jQuery to set value of an input element generated by ASP.NET MVC?

7 Answers 7

Update after seeing output HTML

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Update after seeing output HTML

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related