Reputation: 13585
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
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
Reputation: 104785
If you want the span NEXT to the input, use .after()
$(field).after(result);
Upvotes: 4
Reputation: 6948
Try this:
$(field).val(result);
If you want to append span after input use this:
$(field).after(result)
Upvotes: 3