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

Question

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.

You can't put a span into an input...

tymeJV
– tymeJV

2013-07-23 13:02:09 +00:00
Commented Jul 23, 2013 at 13:02 — tymeJV
– tymeJV, Commented Jul 23, 2013 at 13:02
What is the value of 'field'?

reggaemahn
– reggaemahn

2013-07-23 13:02:44 +00:00
Commented Jul 23, 2013 at 13:02 — reggaemahn
– reggaemahn, Commented Jul 23, 2013 at 13:02
But he can put text into an input :D

Sergio
– Sergio

2013-07-23 13:03:09 +00:00
Commented Jul 23, 2013 at 13:03 — Sergio
– Sergio, Commented Jul 23, 2013 at 13:03
I want to put this span next to input field.

Himanshu Yadav
– Himanshu Yadav

2013-07-23 13:03:12 +00:00
Commented Jul 23, 2013 at 13:03 — Himanshu Yadav
– Himanshu Yadav, Commented Jul 23, 2013 at 13:03
@JeevanJose field is the input, see his html

Huangism
– Huangism

2013-07-23 13:03:16 +00:00
Commented Jul 23, 2013 at 13:03 — Huangism
– Huangism, Commented Jul 23, 2013 at 13:03

tymeJV · Accepted Answer · 2013-07-23 13:03:44Z

4

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

$(field).after(result);

answered Jul 23, 2013 at 13:03

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Sergio · Accepted Answer · 2013-07-23 13:02:33Z

3

Try this:

$(field).val(result);

If you want to append span after input use this:

$(field).after(result)

answered Jul 23, 2013 at 13:02

Sergio

6,9485 gold badges33 silver badges55 bronze badges

2 Comments

Rup Over a year ago

That'll obliterate the user entered value with HTML, not show the error message alongside it

Pat Lillis Over a year ago

@Rup +1 for "obliterate". HTML is so much more fun with war-metaphors.

Richard Dalton · Accepted Answer · 2013-07-23 13:04:08Z

2

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.

answered Jul 23, 2013 at 13:04

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

2 Comments

Yury Tarabanko Over a year ago

.insertAfter will insert field after result.

Himanshu Yadav Over a year ago

Input field disappeared when I used insertAfter.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Related