Getting updated Form HTML in Javascript

Question

I have following problem:

In my code, I dynamically create forms as strings and insert them into the DOM using JQuery. Specifically, there are elements that you can right click to "customize" them using the forms mentioned. After the user inputs his customization options, I serialize and store his inputs as well as the whole string of the element's form. Now, if the user wants to "customize" the element again, I want the form to show the inputs that the user already saved, e.g. text fields should already hold the value that the user typed in. Is there an easy way to do this? For example, is there a way to store the whole html (with "value" attributes set to what the user typed in, a radio button having the "checked" attribute etc) of a form?

So far I tried to get this done by using string.replace() , but as I create the forms dynamically, I don't know in advance how many radio buttons etc there's gonna be so it's hard to get this right.

Have you tried using jQuery clone. ie var saved = $(element).clone() — sheavens
– sheavens, Commented Aug 1, 2014 at 12:00
So TL:DR: You have a database of values that you want auto populated into the page's input fields when loaded? — pattmorter
– pattmorter, Commented Aug 1, 2014 at 12:01
@pattmorter yes kind of, I'm storing the values that the user put in using JQuery's .data() function on the element that has this form. To be more precise, those elements are draggable spans that can be "customized" when right clicking them. The user will get a custom form set depending on the element he right-clicked. And I want this form to already have the values he put in at some point. — Cuddl3s
– Cuddl3s, Commented Aug 1, 2014 at 14:36

bjb568 · Accepted Answer · 2014-08-05 17:49:51Z

2

You could serialize the form and store that.

var theForm = $( "form" ).serialize();

Otherwise,

var theForm = $( "form" ).html();

will return the actual HTML.

edited Aug 5, 2014 at 17:49

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

answered Aug 1, 2014 at 11:58

Evan Knowles

7,5592 gold badges41 silver badges73 bronze badges

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

2 Comments

Cuddl3s Over a year ago

yes I'm already using this, but I'm trying to store the whole HTML of the form (as a string for example), not only the values.

Evan Knowles Over a year ago

In that case, why not just use jQuery's .html() method?

Scott Alexander · Accepted Answer · 2014-08-01 12:06:21Z

0

It sounds like you need to have a bit more of a design in place, why not have an array objects that you can use e.g.

{ itemType: 1 to X representing a dom object e.g. 1 = input, 2 = checkbox
  value : the users input value
  ID: an ID you can give to the DOM so you can trace back to the correct object
  ... anything else you may need
}

That way you can just loop through your array and populate everything as needed and quite easily find your way back to the object on a value change through the given DOM ID.

answered Aug 1, 2014 at 12:06

Scott Alexander

4552 silver badges18 bronze badges

1 Comment

Cuddl3s Over a year ago

Yes that seems to be somehting that would work, I was just wondering if there was an easy way to store the whole html with the user values as a string somehow. But thanks anyway!

Collectives™ on Stack Overflow

Getting updated Form HTML in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related