jQuery .html() returning null

Question

I have an input field with the the id "id_email". A user will enter his email into this field on my form. I am trying to run some validation code on the email that the user inputs. I would like to pass the inputted value to the server to compare it to the database, but jQuery keeps returning a blank string.

HTML:

<div class="fieldWrapper">
                <label for="email">Email</label>
                <input type="text" placeholder="Email" id="id_email" name="email" maxlength="75">
           </div>

Javascript:

function CheckDuplicateEmail(invalidForm)
{
  $("#id_email").focusout(function()
  {
    $.ajax({ type: "POST",
             url: "/CheckDuplicateEmail/",
             dataType: "json",
             data: {"email" : $("#id_email").html()},
             success: function(jsonObject) 
             { 
                if (jsonObject === "exists")
                {
                    $("this").append("<ul class=\"errorlist\"><li>This email already exists<li></ul>")
                    invalidForm = true;
                }
                else
                {
                    invalidForm = false;
                }
             }
    });
  });
}

When I look at the AJAX post that is being sent to the server, I can see that email is blank. The line $("#id_email").html() is failing. I know that the selector is working correctly because the AJAX request is sent to the server. This implies that $("#id_email").focusout is working correctly. Since this statement uses the same selector as the $("#id_email").html() statement, I have to assume the html() function is wrong. Note that I tried the text() function with the same results.

Does anyone have any idea what is wrong?

don't use .html() on an input field, to get the value of the input field use $("#id_email").val() instead — OJay
– OJay, Commented Sep 17, 2012 at 2:49

Ashwin · Accepted Answer · 2012-09-17 02:50:42Z

3

Use $("#id_email").val()

function CheckDuplicateEmail(invalidForm)
{
  $("#id_email").focusout(function()
  {
    $.ajax({ type: "POST",
             url: "/CheckDuplicateEmail/",
             dataType: "json",
             data: {"email" : $("#id_email").val()},
             success: function(jsonObject) 
             { 
                if (jsonObject === "exists")
                {
                    $("this").append("<ul class=\"errorlist\"><li>This email already exists<li></ul>")
                    invalidForm = true;
                }
                else
                {
                    invalidForm = false;
                }
             }
    });
  });
}

You may check out this post to know more when to use getters like .html(), .val() and .text()

answered Sep 17, 2012 at 2:50

Ashwin

1,9705 gold badges32 silver badges59 bronze badges

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

Comments

Muthu Kumaran · Accepted Answer · 2012-09-17 02:50:29Z

3

change this line data: {"email" : $("#id_email").html()},

to

data: {"email" : $("#id_email").val()},

.html() will not works for input elements. You need to use .val() to get input values.

answered Sep 17, 2012 at 2:50

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

jQuery .html() returning null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related