How to get text from a textbox using javascript

Question

i have developed a web application using mvc4.

in this case i need to get a text box value(actually the text entered in the text box) using javascript.

here is the code i am using

    @model PortalModels.WholeSaleModelUser
    @using (Html.BeginForm("uploadFile", "WholeSaleTrade", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true)

    <fieldset>
        <legend>WholeSaleModelUser</legend>
        <table>
            <tr>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Name)
                    </div>
                </td>
                <td>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Name)
                        @Html.ValidationMessageFor(model => model.Name)
                    </div>
                </td>
            </tr>
</table>
        <div id="partial">
            <table>
                <tr>
                    <td>
                        <img id="blah" src="../../Images/no_image.jpg" alt="your image" height="200px" width="170px" />
                    </td>
                </tr>
</table>

    <script type="text/javascript">
        function loadUserImage() {
            var userImg = document.getElementById("blah");
            var imgNm = $("#Name").value;
            userImg.src = "D:/FEISPortal/FortalApplication/Img/" + imgNm + ".png";
            alert(imgNm);
            alert(userImg.src);
        }
    </script>

in that case alert gives the value as "undefined" and if do the following modification alert gives nothing.

var imgNm = document.getElementById("Name").value;

for

var imgNm = $("#Name").value;

how to get the text entered in the text box?

First, give specific id like, @Html.TextBox("Name", Model.Name, new { id = "UserName" }). Second get value using jquery like, $('#UserName').val()... — sathish, Jun 27 '13 at 06:50
Possible duplicate http://stackoverflow.com/questions/463506/how-do-i-get-the-value-of-a-textbox-using-jquery — Vignesh Subramanian, Jun 27 '13 at 07:16
i can already have the value but how to handle the onchange event for any elements in **PARTIAL VIEW**.. that is the main problem i have.. — sanzy, Jun 27 '13 at 08:56

score 5 · Accepted Answer · answered Jun 27 '13 at 06:46

5

You should use val() function for that:

var imgNm = $("#Name").val();

answered Jun 27 '13 at 06:46

Ufuk Hacıoğulları

37,978
12
114
156

but the case how to get the value after page loads or textbox textchange even fires?? really need a answer.. – sanzy Jun 27 '13 at 07:05
yeah i think so.. but sir i'm using this script in my partial view page so how can i handle the change event using id or name of the name text box of my partial view? please help – sanzy Jun 27 '13 at 08:45
i can already have the value but how to handle the onchange event for any elements in **PARTIAL VIEW**.. that is the main problem i have.. – sanzy Jun 27 '13 at 08:55
@sanzy You can [select all inputs inside the form](http://stackoverflow.com/a/4847777/205859) and bind an event handler. – Ufuk Hacıoğulları Jun 27 '13 at 10:16

Anton · Answer 2 · 2013-06-27T07:59:30.487

2

If you're using native javascript you should use this:

var userImgNameElement = document.getElementById("userImgNameId");
var userImgNameValue = userImgNameElement.getAttribute("value");

With "onChanged" event:

addEvent(document.getElementById('userImgNameId'), 'change', function(event) {
    var userImgNameValue = event.target.getAttribute("value");
});

edited Jun 27 '13 at 07:59

answered Jun 27 '13 at 07:13

Anton

1,583
12
17

yeah i think so.. but sir i'm using this script in my partial view page so how can i handle the change event using id or name of the name text box of my partial view? please help and refer the code my partial view – sanzy Jun 27 '13 at 08:48
i can already have the value but how to handle the onchange event for any elements in **PARTIAL VIEW**.. that is the main problem i have.. – sanzy Jun 27 '13 at 08:57

score 1 · Answer 3 · answered Jun 27 '13 at 07:04

1

In an input element, the value of can be found in a value property of that element. It can therefore be retrieved via document.getElementById('idOfElement').value.

In an textarea element has it's value between the starting and the closing tag. Therefore, the value property is empty. In raw javascript, you would be able to retrieve the contents with document.getElementById('idOfElement').innerText.

If you are however using jQuery, Ufuk's solution with .val() is much easier to use.

answered Jun 27 '13 at 07:04

Sumurai8

20,333
11
66
100

yeah i think so.. but sir i'm using this script in my partial view page so how can i handle the change event using id or name of the name text box of my partial view? please help and refer the code my partial view – sanzy Jun 27 '13 at 08:49
i can already have the value but how to handle the onchange event for any elements in **PARTIAL VIEW**.. that is the main problem i have.. – sanzy Jun 27 '13 at 08:55
I have no idea what you mean with 'partial view'. You can find more information about [the method `.on()` you need to use in the documentation](http://api.jquery.com/on/). As far as I am aware you didn't mention anything about event handlers or 'onchange' handlers in your question, so I would suggest making a new question where you explain very clearly what the exact problem is if you've read the documentation and googled some more, and still can't figure out what you need to do. – Sumurai8 Jun 27 '13 at 09:32

How to get text from a textbox using javascript

3 Answers3