is there any way to get form elements and its related values

Question

i have a div

<div id="ip"> 
   <input type="text" name="first" value="cobra" class="mark1"/>
   <input type="text" name="second" value="python" class="mark2"/>
</div>

i'm serialising it like this,

$('div#ip:input').serialize();

if i do serialization of the above div i will get only value's but i want element also, is there any good way to do that or i have to store the whole html element into my database like above div , in reality it is going to be huge.

my question: what is the best way to store html element into database like above div with its all values,names,classes fields must be intact.

i'm using php in server side.

last question: storing html element is the only way?

you need to add `form` not just `div` and then you can use like `$('#FormId).serialize();` — Bharat, Dec 16 '16 at 05:19
Why do you want the element? By element, do you mean the ``? (Just so we're clear we're talking about the same thing) — junkfoodjunkie, Dec 16 '16 at 05:20
If you have big heart you can create a table for `html elements` and one for their `properties and values`. — Mairaj Ahmad, Dec 16 '16 at 05:20
i'm refering this thread http://stackoverflow.com/questions/1829519/jquery-to-serialize-only-elements-within-a-div — Dilip G, Dec 16 '16 at 05:21
i'm developing `CMS` where `element` need to be `dragged` and `drop` so i want to know any way is there — Dilip G, Dec 16 '16 at 05:23
@DilipG you should give each element a unique identifier and save the resulting array not the html, you can then rearrange the elements based on that array — madalinivascu, Dec 16 '16 at 05:25
@DilipG you will need some ajax 1.for saving the position of the input files, 2. to rearrange the input files after the save , its a bit complicate — madalinivascu, Dec 16 '16 at 05:30
@madalinivascu, refering this thread i can iterate over each `element` and store them into `object`, what i'm not getting here is how to `store` `class` name into `object` http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery — Dilip G, Dec 16 '16 at 05:36

brk · Answer 1 · 2016-12-16T05:38:40.037

3

You can use the outerHTML to get the serialized HTML fragment.

Then use toString() to convert it to string. Later you can save this string in the database. It will save the value along with the tag.

 var a = (document.getElementById("ip").outerHTML);
 a.toString();// convert to string. Save this string in database

Later use jquery parseHTML to convert this string to html and redraw the dom

// demodiv is a placeholder to convert string to html and repaint the dom
$("#demoDiv").append($.parseHTML(a)) // a is the value retrieved from db

DEMO

edited Dec 16 '16 at 05:38

answered Dec 16 '16 at 05:29

brk

48,835
10
56
78

i know this is a solution, is it a optmal way to store very big `string` into `database` ??? – Dilip G Dec 16 '16 at 05:42
@DilipG seems it is a db related question – brk Dec 16 '16 at 05:44

madalinivascu · Accepted Answer · 2016-12-16T05:42:57.293

2

You can do a loop to get each input class value and name, after that you do a ajax call to your server and save the data to the db:

var data =[];
$('input,textarea,select').each(function(){
     data.push({
       class:$(this).attr('class'),
       name:$(this).attr('name'),
       value:$(this).val();
     });
});
console.log(data);

edited Dec 16 '16 at 05:42

answered Dec 16 '16 at 05:23

madalinivascu

32,064
4
39
55

im using `formbuilder.js` it is a `drag` and `drop` for `elements` so i'm asking this question – Dilip G Dec 16 '16 at 05:27

score 1 · Answer 3 · answered Dec 16 '16 at 05:21

1

You can use the following code:

$("#ip").clone().html()

answered Dec 16 '16 at 05:21

Bhumi Shah

9,323
7
63
104

is there any way to get form elements and its related values

3 Answers3