Himanshu Yadav
Himanshu Yadav

Reputation: 13585

jQuery: $.append and $.html are not working

This should straightforward but I have no idea what is wrong. I am making an ajax call when there is onblur event on a text field. Ajax request goes to backend and gets the response. Then I have to append that response next to the text field. But it's not working.
HTML

<input type="text" required="" id="123456" onblur="validateWithDB(this)"></input>

Javascript

function validateWithDB(field)
            {
                $.ajax({
                    type:"POST",
                    url:"validate",
                    data: "fieldValue="+field.value,
                    success: function(response) {
                        alert(response);// this is correct
                        alert($(field).val());// this is correct
                        var result = '<span class="help-inline">'+response+'</span>'
                        alert(result) // this is correct
                        $(field).html(result);// Does not show up.
                    },
                    error:function (xhRequest, ErrorText, thrownError) {
                        alert('Error: '  + '  ' + xhRequest);
                    }
                });
            }

I tried both $(field).html(result); and $(field).append(result); but no luck.

Upvotes: 2

Views: 692

Answers (3)

Richard Dalton
Richard Dalton

Reputation: 35793

As tymeJV asid in the comment, you can't put HTML inside the input tag.

You can either set it as the value using $(field).val(result) but this doesn't make much sense.

Or you can insert it after using .after:

$(field).after(result);

This will display the HTML in result directly after the input.

Upvotes: 2

tymeJV
tymeJV

Reputation: 104785

If you want the span NEXT to the input, use .after()

$(field).after(result);

Upvotes: 4

Sergio
Sergio

Reputation: 6948

Try this:

$(field).val(result);

If you want to append span after input use this:

$(field).after(result)

Upvotes: 3

Related Questions