how do you get the html and value output to a string

Question

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

if the user enters a value of 'test', is there a way in jQuery to serialize that to a string?

The output I would be looking for is, <input id="input1" type="text" value="test" />

I am not copying this to another element in DOM, I need the actual string so I can send it to EVOPdf. I've already tried the clone(true), but it doesn't give me any values the user has entered into the inputs.

I'm resigned to having to parse the html() string and insert a value for each input unless someone knows a better way.

Do you mean the output you would be looking for is `` or just `test`? — Curtis, Nov 11 '11 at 16:25
Probable duplicate of http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html — Jim H., Nov 11 '11 at 16:26
its not a duplicate, outerHTML still doesn't have the values input by end user — edepperson, Nov 11 '11 at 16:35

airportyh · Accepted Answer · 2011-11-11T16:48:58.297

I 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 modified the contents of a text field (I typed ueoau) and select it

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

and get its value using .val()

> text.val()
"ueoau"

but getting it's markup gets the value rendered as empty(this snippet from james' answer)

> $('<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's magic in attr())

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

So again, the attribute value is not the same as the value value. So, one workaround you could use is setting its attribute to its value

> 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; ">"

Which worked for me. I guess my explanation for this is that the attribute value only stands for the initial value of the field, and is not synced with its true value afterwards.

Only `firebug` (don't know how this utility is called in Safari) returns html with all attributes (like in your code) but in real code - it will return html without attributes that weren't pointed in html mark-up — Larry Foobar, Nov 11 '11 at 17:01
it took me a while, but I got this to work. below is my code with comments where needed. — edepperson, Nov 11 '11 at 18:19
I'll try again, here's my code var tempobj = $(getSelectedTab()).clone(); var inputarr = tempobj.find('input[type=text]').get(); $.each(inputarr, function (i) { var iid = $(inputarr[i]).attr('id'); var v = $(inputarr[i]).val(); tempobj.find('#'+iid).attr('value', v); }); var s = tempobj.html(); — edepperson, Nov 11 '11 at 18:26
Does not work with textareas, selects, etc., all the other elements that $(x).val('...') automatically handles. =\ — HoldOffHunger, Nov 15 '17 at 19:49

score 0 · Answer 2 · answered Nov 11 '11 at 16:23

0

jQuery has the .val() method which returns the value of an input:

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

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

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

answered Nov 11 '11 at 16:23

CassOnMars

6,153
2
32
47

I know that, what I need is this: – edepperson Nov 11 '11 at 16:25

Larry Foobar · Answer 3 · 2011-11-11T16:49:48.620

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/

P.S. This code works only for inputs and it catches only value attribute pointed by user. Other attributes won't be displayed.

score 0 · Answer 4 · answered Nov 11 '11 at 16:32

0

How about;

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

Note than like .html() this will return interpreted markup; IE for example will capitalize node names & strip the quotes

answered Nov 11 '11 at 16:32

Alex K.

171,639
30
264
288

The markup in that output also does not give the current value in the text field. – airportyh Nov 11 '11 at 16:42
This doesn't actually work... I can't get this to return anything other than `undefined`. – John Gietzen Nov 11 '11 at 16:44
Wow, jquery has spoiled me, I had forgotten outerHTML was a no-no in Firefox, I only checked chrome+IE – Alex K. Nov 11 '11 at 16:54

score 0 · Answer 5 · answered Nov 11 '11 at 16:34

0

Need to use outerHTML() http://darlesson.com/jquery/outerhtml/

answered Nov 11 '11 at 16:34

kuradac

486
4
9

That solves absolutely nothing. The problem is not MISSING ELEMENTS, the problem is MISSING ATTRIBUTES. – HoldOffHunger Nov 15 '17 at 19:52

how do you get the html and value output to a string

5 Answers5