How do i get HTML string with input values using jquery?

Question

I need to create the HTML into a pdf on the server and need the HTML from the browser that has a form and other stuff in it. Doing $el.html() just gives an HTML string without input values in the form. How do i get the HTMl string with all the input values included?.

I do not want to append the clone on the browser, i am just interested in the HTML string with all input values to pass to the server.

Thanks!

So you're trying to produce a PDF that is essentially a picture of the current state of the web page (including input values)? Or do you want to produce a PDF that actually has html code on it? — nnnnnn
– nnnnnn, Commented Apr 11, 2013 at 13:33
yes, i am trying to create a PDF that is the current state of the web page. — user1323136
– user1323136, Commented Apr 11, 2013 at 13:34

James Montagne · Accepted Answer · 2013-04-11 13:47:00Z

4

I think this should work. Simply run this before you call .html():

$("input[type='text']").each(function () {
    var $this = $(this);

    $this.attr("value", $this.val());
});

http://jsfiddle.net/GyrWY/1/

Note: If you need to do this for other input types, they will need to be handled differently. For textarea you would set .text($this.val()), for checkboxes and radio buttons, you would need to set the checked attribute. select elements, you would have to set the selected attribute of the appropriate option.

edited Apr 11, 2013 at 13:47

answered Apr 11, 2013 at 13:35

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

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

3 Comments

Barmar Over a year ago

You should use the :input selector to get all types of input, such as text areas, select menus, and checkboxes.

James Montagne Over a year ago

@Barmar But <select value="abc"> isn't really valid. And works even less for checkboxes. Textarea would need to be handled differently as well.

Zachary Kniebel Over a year ago

You just beat me to it! :)

Barmar · Accepted Answer · 2013-04-11 13:48:44Z

4

Maybe this will do it:

$("input").each(function() {
    $(this).attr("value", $(this).val());
});
$("textarea").each(function() {
    $(this).text($(this).val());
});
$("select option").each(function() {
    if ($(this).is(":selected")) {
        $(this).attr("selected", "selected");
    } else {
        $(this).removeAttr("selected");
    }
});
$("checkbox").each(function() {
    if ($(this).is(":checked")) {
        $(this).attr("checked", "checked");
    } else {
        $(this).removeAttr("checked");
    }
});

This sets the appropriate DOM attributes for all types of inputs to match their current state. I hope I didn't miss any.

You might want to make a clone of the entire DOM and operate on it. The above code will affect what happens if the user presses the Reset button of the forms, the current state will be considered the default.

edited Apr 11, 2013 at 13:48

answered Apr 11, 2013 at 13:36

Barmar

789k57 gold badges555 silver badges669 bronze badges

4 Comments

Barmar Over a year ago

Edited my answer to handle types of input that don't use the value attribute.

surendher Over a year ago

@Barmar - Hi, it is not working for ion-checkbox, how to do the same for it

Barmar Over a year ago

@surendher I don't know what ion-checkbox is.

surendher Over a year ago

@Barmar - Thats ok, i have found a solution for it. Thanks

Collectives™ on Stack Overflow

How do i get HTML string with input values using jquery?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related