how to set id to Html.TextBox item on MVC

Question

Im trying to catch the textbox element by javascript, in order to put text into it. so how to set id to the textbox ??

        <tr>
                    // Id to this textbox
            <td>@Html.TextBoxFor(item => item.OperationNo)</td>
        </tr>

and then to put text into it by JS

                            // 
   document.getElementById("Textbox id").Text= " Some text " ;

score 80 · Accepted Answer · answered Jun 06 '13 at 18:24

80

You can set ID of a textbox like this.

@Html.TextBoxFor(item => item.OperationNo, new { id = "MyId" })

OR

@Html.TextBoxFor(item => item.OperationNo, htmlAttributes: new { id = "MyId" })

Output:

<input ... id="MyId" name="OperationNo" type="text" />

answered Jun 06 '13 at 18:24

Win

61,100
13
102
181

8

This is overriding the default id which will match the name of the property. – Matt Houser Jun 06 '13 at 18:40

score 8 · Answer 2 · edited Sep 19 '13 at 10:15

8

You can use below code for resolve that problem:

function steVal() {
        document.getElementById('txtPlace').value = "Set The Text";
    }

 @Html.TextBoxFor(m => m.OperationNo,new { @id = "txtPlace",@name="txtPlace" })

edited Sep 19 '13 at 10:15

answered Sep 19 '13 at 10:12

Jay Shukla

782
1
13
24

5

You don't need the "@" signs in front of the property names in your anonymous class. The only time you need to do it is when the property name happens to be a reserved word, such as "class". – Gary McGill Sep 09 '15 at 11:09
I gave this one a thumbs up because it showed how to do more than one attribute, which is what I was looking for. :o) – Kenny Jan 10 '17 at 14:59

score 5 · Answer 3 · answered Jun 06 '13 at 18:19

5

It should be the property name, which is OperationNo.

So your JS will be

document.getElementById("OperationNo").html = " Some text " ;

You can use the web inspector in Chrome or JS to view the html on your page to see the element attributes.

answered Jun 06 '13 at 18:19

JeffB

1,887
15
13

score 0 · Answer 4 · edited Oct 04 '18 at 08:25

This is happens in a scenario of using same input fields with same properties in web form. Like the case of Login and Signup forms in single view/page. Previously it was like this

input one >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control",placeholder = "Username", @required = "required", autofocus = "" })
    @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

input two>

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

then i added a unique id # for the username input

the new input one >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", id = "loginUsername", placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

the new input two >

<div class="field-wrap">
  @Html.TextBoxFor(model => model.Username, new { @class = "form-control", id = "SignupUsername" , placeholder = "Username", @required = "required", autofocus = "" })
  @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
</div>

how to set id to Html.TextBox item on MVC

4 Answers4

Output: