How do you get html and value output to string

Question

given this input html element, <input id = "input1" type = "text" />

if the user enters the value "test", is there a way in jQuery to serialize this value to a string?

The conclusion I would be looking for is & lt; input id = "input1" type = "text" value = "test" />

I do not copy this to another element in the DOM, I need the actual line, so I can send it to EVOPdf. I have already tried the clone (true), but it does not give me any values ​​entered by the user in the input.

I put up with the need to parse the html () line and insert a value for each input if someone does not know a better way.

Answer 1

In my testing, it turns out that the attribute value has nothing to do with the value value - at least in my testing with Safari 5.1 and FF 6.

So, if I change the contents of the text box (I typed ueoau) and select it

> var text = $('input[type=text]').first() 

and get its value using .val()

 > text.val() "ueoau" 

but getting its markup gets the value displayed as empty (this snippet of response from james)

 > $('<div>').append(text.clone()).remove().html() "<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="" style="width: 200px; max-width: 200px; ">" 

getting the attribute value also doesn't work (using the DOM getAttribute here to avoid jQuery magic in attr() )

 > text[0].getAttribute('value') "" 

So, the attribute value does not match the value value. So one workaround you can use is to set its attribute to

 > text[0].setAttribute('value', text.val()) > $('<div>').append(text.clone()).remove().html() "<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="ueoau" style="width: 200px; max-width: 200px; ">" 

Who worked for me. I suppose my explanation is that the attribute value means only the initial value of the field and does not synchronize with its true value afterwards.

Answer 2

jQuery has a .val() method that returns an input value:

 var value = $("#input1").val(); 

For the html of the element itself (including the value), try to encapsulate the clone inside the new element, get the html and delete it:

 var html = $('<div>').append($('#input1').clone()).remove().html(); 

Answer 3

UPDATED:

HTML:

 <input id="test" type="text"> <input type="button" id="foo" value="press me"> 

JQuery

 // fullHTML plugin-function $.fn.fullHTML = function(){ var $this = $(this); return $('<div>') .append($this.clone()) .remove() .html() .replace('<input ','<input value="'+ $this.val() +'" '); }; $(function(){ $("#foo").click(function(){ alert ( $("#test").fullHTML() ); }); }); 

Working example: http://jsfiddle.net/n6Phu/

PS This code works only for inputs, and it catches only the value attribute specified by the user. Other attributes will not be displayed.

Answer 4

What about:

 var fragment = $("#input1").attr("value", "test").get(0).outerHTML; 

Note that, like .html (), this returns interpreted markup; For example, IE will use node names and delimit quotation marks.

Answer 5

You must use outerHTML () http://darlesson.com/jquery/outerhtml/