CODEWITHSUNDEEP
javascriptjqueryhtml
guitarlass
guitarlass

Reputation: 1617

How to get html content of a input tag?

I have an input tag:

<input type="text" value="04/09/2013" class="date-time-date width-100 hasDatepicker" name="booking_info[to_time_24_date]" id="to_time_24_date" readonly="readonly">

i need to get all the content in input tag (all content shown above) but when i use

$('#to_time_24_date').html();

it returns nothing. How can i get this content?

Upvotes: 2

Views: 1933

Answers (7)

Robert
Robert

Reputation: 386

<input type="text" value="04/09/2013" class="date-time-date width-100 hasDatepicker" name="booking_info[to_time_24_date]" id="to_time_24_date" readonly="readonly">

This does not have any "Content" or "HTML" it does have attributes, and you can get the attributes with the attr method from jQuery.. $('input[type="text"]').attr('id'); would return the id attribute.

If you are just looking for the entered value of the input tag (what is typed in) then use $('input[type="text"]').val(); to get the value.

I hope this helps

here's a jsfiddle example

http://jsfiddle.net/LUep8/

Upvotes: 0

Hassan Sardar
Hassan Sardar

Reputation: 4523

Use this simple method in order to get all of your input field HTML:

$('#to_time_24_date').get(0).outerHTML;

I have made a JsFiddle Test Demo for you, Please follow this link. It will give the same thing you are looking for, in alert.

http://jsfiddle.net/jpaYK/

Upvotes: 2

gp.
gp.

Reputation: 8225

var html = "<input";
$.each($("#"+to_time_24_date)[0].attributes, function(i, attr){
    html += ' '+attr.name+'="'+attr.value+'"';
});
html += " />";
alert(html);

jsfiddle

Upvotes: 0

Meligy
Meligy

Reputation: 36594

html() gets the inner HTML, HTML of the elements inside this element.

Check the answer here:

Get selected element's outer HTML

The accepted answer uses a nice trick in the answer to this question. It creates another element (but doesn't add it to the page), clones the element it wants inside the created element, and then gets the inner HTML of the created element, which is the HTML of the clone, which is the same HTML of the element we want.

$("<div>").append($('#to_time_24_date').eq(0).clone()).html();
// or
$("<div>").append(document.getElementById('#to_time_24_date').clone()).html();

However, see other answers as well, turns out there is a simpler way you can try too, there's a property outerHTML you can use as:

$('#to_time_24_date')[0].outerHTML

Which has decent browser support as per:
https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.outerHTML

Upvotes: 0

Tom
Tom

Reputation: 4592

Try this:

document.getElementById('to_time_24_date').outerHTML;

Upvotes: 2

xdazz
xdazz

Reputation: 160833

You may try the outerHTML property.

$('#to_time_24_date').get(0).outerHTML

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

you can use outerHTML

$('#to_time_24_date').get(0).outerHTML; // $('#to_time_24_date')[0].outerHTML;

Demo: Fiddle

without jQuery

document.getElementById('to_time_24_date').outerHTML

Upvotes: 0

Related Questions