Clearing Html textbox value permanently using Jquery

Question

I have a <%: Html.TextBoxFor(model=>model.UserName)%>. Here I'm checking wheather user name is available or not. If it's not available then I need to clear the TextBox. I used the query $("#UserName").val("");. But after the event completion again the text box getting the value. Can anyone help me?

UPDATE: Additional Javascript code from comments:

function CheckAvailability() {
    $.post("/WebTeamReleaseDB/CheckAvailability", {
        Username: $("#UserName").val()
    }, function(data) {
        var myObject = eval('(' + data + ')');
        var newid = myObject;
        if (newid == 1) {
            $("#usernamelookupresult").html("<font color='green'>Available :-D</font>")
        } else {
            $("#UserName").val("");
            $("#usernamelookupresult").html("<font color='red'>Taken :-(</font>")
        }
    });
}

I'm using Html.TextBoxFor(). Here how can I use the element id? — S.Siva
– S.Siva, Commented Jun 8, 2011 at 14:02
function CheckAvailability() { $.post("/WebTeamReleaseDB/CheckAvailability", {Username: $("#UserName").val()},function (data) { var myObject = eval('(' + data + ')');var newid = myObject;if (newid == 1) { $("#usernamelookupresult").html("<font color='green'>Available :-D</font>")} else {$("#UserName").val(""); $("#usernamelookupresult").html("<font color='red'>Taken :-(</font>")}});} — S.Siva
– S.Siva, Commented Jun 8, 2011 at 14:04

Ian Davis · Accepted Answer · 2011-06-08 14:53:26Z

1

When you use <%: Html.TextBoxFor(model=>model.UserName)%>, it may be rendering to the page as <input name="UserName">, so $("#UserName").val(""); is not finding it, as there is no id="UserName".

One possible solution: use <%: Html.TextBoxFor(model=>model.UserName, new { id = "UserName" })%>, which should render to the page as <input name="UserName" id="UserName">. After that, $("#UserName").val(""); should work, since the textbox now has that id attribute.

answered Jun 8, 2011 at 14:53

Ian Davis

19.5k30 gold badges91 silver badges136 bronze badges

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

2 Comments

S.Siva Over a year ago

I have tried ur code also. But its its clearing the textbox until the java script event completes its execution. After execution completes, textbox getting the value.

S.Siva Over a year ago

@Davis: I got it Davis. I have written like this: <%: Html.TextBoxFor(model=>model.UserName, new { @onchange=CheckAvailability()}

DarthJDG · Accepted Answer · 2011-06-09 15:32:20Z

I got the answer for my problem.

HTML code:

<%: Html.TextBoxFor(model=>model.UserName,new { @onchange="CheckAvailability()" }) %>

Javascript Code:

function CheckAvailability() {
        var value;
        if (document.getElementById("UserName").value == "") {
            $("#usernamelookupresult").html("");
            alert("Please Enter User Name");
        }
        else {
            $.post("/WebTeamReleaseDB/CheckAvailability",
            {
                Username: $("#UserName").val()
            },
                function (data) {
                    var myObject = eval('(' + data + ')');
                    var newid = myObject;
                    value = myObject;
                    if (newid == 1) {
                        $("#usernamelookupresult").html("<font color='green'>Available :-D</font>")
                    }
                    else if (newid == 2) {
                        $("#usernamelookupresult").html("<font color='red'>UserName Invalid! :-(</font>")
                    }
                    else {
                        $("#usernamelookupresult").html("<font color='red'>Taken :-(</font>")
                        $("#UserName").val("");
                    }
                });
            }
        }

Collectives™ on Stack Overflow

Clearing Html textbox value permanently using Jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related