Get textbox HTML and value with Jquery

Question

I have a text box in a div:

<div id="divTest">
    <input type="text" id="txtText">
</div>

Suppose the user types a word into the text box, I want a jquery method of getting the textbox HTML with the value that the user typed in. I have tried the below code:

$('#btnTest').click(function(){
    alert($('#divTest').html());
    e.preventDefault();
});

But this only gives me the HTML of the textbox, not the HTML + the value of the text within the textbox.

Here is a jsFiddle of the problem.

Do you want the html of the input too?

Selvakumar Arumugam
– Selvakumar Arumugam

2012-04-26 19:37:26 +00:00
Commented Apr 26, 2012 at 19:37 — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Apr 26, 2012 at 19:37
Yes, I want the HTML of the input with the embedded value

Coltech
– Coltech

2012-04-26 19:38:40 +00:00
Commented Apr 26, 2012 at 19:38 — Coltech
– Coltech, Commented Apr 26, 2012 at 19:38
you mean something like (only IE) .outerHTML

Saic Siquot
– Saic Siquot

2012-04-26 19:55:18 +00:00
Commented Apr 26, 2012 at 19:55 — Saic Siquot
– Saic Siquot, Commented Apr 26, 2012 at 19:55

Stefan · Accepted Answer · 2012-04-26 19:45:53Z

1

var html_input = $("#divTest").html();
var val = $("#txtText").val();
var input = html_input.slice(0,-1) + " value='" + val + "'>";
alert(input);

answered Apr 26, 2012 at 19:45

Stefan

3,8993 gold badges28 silver badges39 bronze badges

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

3 Comments

Coltech Over a year ago

Ok, that does work for this one example. But it doesn't scale to other input elements or if there are multiple input elements in the div.

Stefan Over a year ago

@Coltech: Ok, you didn't say multiple inputs. Just use .each() and get the val and html and input for each case.

Stefan Over a year ago

@Coltech: You can use split() to split the html_input for the '>' separator in the string returned by $("#divTest").html() into an array, and retrieve html_input for each case using the index of $("#divTest :input").each(function(index) {etc.})

Machinegon · Accepted Answer · 2012-04-26 19:38:24Z

0

var html = $('#divTest').html();
var value = $('#divTest').val();
var message = html + value;

answered Apr 26, 2012 at 19:38

Machinegon

1,8852 gold badges29 silver badges45 bronze badges

3 Comments

gcochard Over a year ago

That won't work, you would be appending the value to the HTML, which would look something like <input type="text" name="name" />value He is looking for <input type="text" name="name" value="value" />

Coltech Over a year ago

Sorry that wont work, that just concatenates the input value onto the end of the HTML. I want the HTML with the embedded value so it will render properly.

Machinegon Over a year ago

I don't think there is a function to extract both values and html at the same time. I would get the html, declare and array, loop through each character of the html until you get the '>' , then you add "Value =" value and concatenates what's left of the characters.

Collectives™ on Stack Overflow

Get textbox HTML and value with Jquery

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related