-2

I have a website with a form. The form is filled by user with data for example i show to user:

 <input type='text' value="" name="dsa" />

And he fills it with value of "3";

And he clicks button "save". Now i want to have the whole HTML of the website including values of fields. So i use:

document.documentElement.innerHTML

But i get:

 <input type='text' value="" name="dsa" />

But i want to get this:

 <input type='text' value="3" name="dsa" />

NOTICE I want to take the whole HTML of the website, not only one field. I dont know what fields will be on the website so i need a general solution.

Tom Smykowski
  • 25,487
  • 54
  • 159
  • 236
  • 1
    Can you explain what you are trying to accomplish? – asawyer Jul 24 '12 at 13:48
  • possible duplicate of [reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags](http://stackoverflow.com/questions/7601851/reading-innerhtml-of-html-form-with-value-attribute-its-value-of-input-tags) – epascarello Jul 24 '12 at 13:49
  • @asawyer Well.. i dont know what you want me to explain. Pls explain what is not understandable in this question. – Tom Smykowski Jul 24 '12 at 13:52
  • I believe epascarello answer (link) is exactly what you are looking for. – Lefteris Jul 24 '12 at 13:55
  • +Lefteris Partly it is. But only partly. The question there is about INPUT TAGS, and i ask about ALL FORM TAGS (input, select etc.)... – Tom Smykowski Jul 24 '12 at 13:56

3 Answers3

2

AFAIK you can't get this from the HTML code, as the HTML code does not change when the user inputs something in a Input text field.

What you could do is get all input fields on the page and get their values with something like this:

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

The code is from this post: https://stackoverflow.com/a/2214077/312312 I was too lazy to write it down my self :P

Community
  • 1
  • 1
Lefteris
  • 14,550
  • 2
  • 56
  • 95
  • I dont want to get values of the fields. As i wrote i want to grab whole HTML with this values in place. Any ideas? – Tom Smykowski Jul 24 '12 at 13:51
  • why would you want to do that? you cannot, HTML ain't gonna change if you fill in fields. – Carlo Moretti Jul 24 '12 at 13:53
  • 2
    If the page has only input text fields, grab the HTML as it is (without the entered values), grab the values with the code I provided and replace in the grabbed HTML code the value="" with value="X" where X is the value you got from the above code – Lefteris Jul 24 '12 at 13:53
  • +Onheiron Because i want to have the whole HTML with values. Well... i still think it can be possible. – Tom Smykowski Jul 24 '12 at 13:55
  • +Lefteris Looks like a good direction for me, but still it's not whole solution. What about selects and other form fields? – Tom Smykowski Jul 24 '12 at 13:55
1

In jQuery I do 

$(function() {
    $('input').keyup(function() {
       $(this).attr('value', $(this).val());
    }); 

});​

Because the value attribute isn't set after key up

Ron van der Heijden
  • 14,803
  • 7
  • 58
  • 82
  • 2
    I was about to post this. Here's a jsfiddle: http://jsfiddle.net/cpbX6/ I used .change() instead of .keyup() – George Jul 24 '12 at 13:54
  • 1
    @tomaszs Start doing it. There is noting you want to do with javascript that jQuery not can do. – Ron van der Heijden Jul 24 '12 at 13:58
  • 1
    Then bind your event handlers manually to the fields and build a wrapper that manipulates the value from input.attributes :P – Doug Jul 24 '12 at 13:59
  • My question is about JavaScript. Look at the title and tag pls. – Tom Smykowski Jul 24 '12 at 14:00
  • @tomaszs Here is a version without jQuery: http://jsfiddle.net/cpbX6/3/ Browser compatibility is up to you. If you need more form tags to be handled, you'll also have to add them manually - the same basic procedure can be used. – George Jul 24 '12 at 14:03
  • @tomaszs What errors does it have? If you want us to write all your code for you, you've come to the wrong place. If you don't want to deal with cross browser issues, use jQuery. Otherwise, don't complain when you have to accommodate old browsers. – George Jul 24 '12 at 14:09
  • +George P No i don't want anyone to write code for me. I wrote i dont want solution requiring jQuery, how hard it is to understand? I need to do it in JS right way and i have a problem with making it so i came here to ask. What is your problem George? It's Q&A website. I have a question. If you have ANSWER than answer. If you don't have why you discuss? I dont need this ideological bullshit about JQuery. lol – Tom Smykowski Jul 24 '12 at 14:13
  • @tomaszs I gave you a working solution without jQuery. You complained that it was error prone and didn't give any more details. I assumed you were referring to the cross browser issues, which are best solved with either a library or a lot of your own browser checks (which I'm not keen on writing). – George Jul 24 '12 at 14:20
  • +George P oh i get it now. you don't know how to do this in JS. ok. Well... hm... anyways thanks for trying... – Tom Smykowski Jul 24 '12 at 14:22
-1

You could try to set a live event on a whole document that will set attribustes to html with values user set in or set them on your submit.

First way for example

$("body").on("change", "select,input,textarea", function(){
  $(this).attr("value", $(this).val());
});

But this should not be done so blindly, and you'll get problems with reset. And you should solve problem with selected radio, checkbox and other attributes, not only values.

Second way is to serialize whole page when it really needed.

var serialize = function(el){
   $("select, input, textarea").each(function(){
     $(this).attr("value", $(this).val()); //the same way as upper
   });
}
$(".serialize").click(function(){
  var inner = $("body"),
      html;
  serialize(inner);
  html = inner.html(); //here you will get whole html with setted attributes
});

This way seems to be better because there wont be delegation of unnecessary event.

http://jsfiddle.net/CeAXL/2/ - test example.

But in both ways it's not good idea to set permanent values to DOM itself.

Flops
  • 1,410
  • 15
  • 18