CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc-3
raberana
raberana

Reputation: 11816

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

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?

Upvotes: 374

Views: 1158691

Answers (7)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

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>

Upvotes: 0

user4920718
user4920718

Reputation: 1456

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

Upvotes: 4

Bicycle Dave
Bicycle Dave

Reputation: 484

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

Upvotes: 0

Aditya P Bhatt
Aditya P Bhatt

Reputation: 22071

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

Upvotes: 77

Aniket Thakur
Aniket Thakur

Reputation: 68915

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.

Upvotes: 5

Thulasiram
Thulasiram

Reputation: 8552

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

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

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

Upvotes: 12

Michael Berkowski
Michael Berkowski

Reputation: 270609

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.

Upvotes: 563

Related Questions