Javascript ajax post textbox text to ActionResult asp.net mvc

Question

Html

<input type="password" id="LoginPasswordText" title="Password" style="width: 150px" />


<input type="button" id="LoginButton1" value="Save" class="LoginButton1Class" onclick="LoginButton1OnClick" />

Json

var TextBoxData = {
Text: LoginPasswordText.GetValue(),
};


   function LoginButton1OnClick() {
        $.ajax({
            url: "/Home/MyActionResult",
            type: "POST",
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(TextBoxData),

            success: function (mydata) {
               alert("Success");
            }
        });
        return true;
    }

MyActionResult

public ActionResult MyActionResult(string Text)
{
 return view();
}

Above codes(Html,Json,MyActionResult) works very well but it is json data.

I want to send above codes as ajax data.And i tried below code. However below code does not work , if i click to button , i can not send any data and there is nothing.Where i miss ?

<script>
    function LoginButton1OnClick() {

         var TextBoxData = {
    Text: LoginPasswordText.GetValue(),
    };


        $.ajax({
            type: "POST",
            url: "Home/MyActionResult",
            data: TextBoxData,
            success: function () {
                alert('success');
            }
        });

    }
</script>

Darin Dimitrov · Accepted Answer · 2014-01-21 13:37:21Z

2

You don't need to wrap in an additional object. Also you have invalid javascript. There's a trailing comma after the LoginPasswordText.GetValue() call resulting in a javascript error. Also in order to retrieve the value of the input field you could use the .val() function.

So simply send the value as-is:

<script>
    function LoginButton1OnClick() {
        var text = $('#LoginPasswordText').val();

        $.ajax({
            type: "POST",
            url: "Home/MyActionResult",
            data: text,
            success: function () {
                alert('success');
            }
        });
    }
</script>

This will send the string value to the following controller action:

[HttpPost]
public ActionResult MyActionResult(string text)
{
    return View();
}

edited Jan 21, 2014 at 13:37

answered Jan 21, 2014 at 13:23

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

3 Comments

user3219315 Over a year ago

hi, i get exception " Uncaught TypeError: Object #<HTMLInputElement> has no method 'GetValue' "

user3219315 Over a year ago

data: { text: $("#LoginPasswordText").val() }, solved problem

Darin Dimitrov Over a year ago

That's because such method doesn't exist in jQuery. I thought that it was some custom function you have written but apparently I am mistaken. See my updated answer.

Collectives™ on Stack Overflow

Javascript ajax post textbox text to ActionResult asp.net mvc

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related