how to generate HTML FORM dynamically using any JSON object?

Question

I appreciate some help if anyone can tell me how we can generate HTML form dynamically based on any JSON object using javascript?

This question is too broad to even answer. Definitely need more information than this — Coder
– Coder, Commented Jul 14, 2017 at 17:10
what will be the contents of the JSON? what goes into the body? which value from JSON goes to which tag? These are the questions to start with — Coder
– Coder, Commented Jul 14, 2017 at 17:17
the contents will be multiple objects containing data type,data name and data itself. — naveen kumar
– naveen kumar, Commented Jul 14, 2017 at 17:24
That just explains the contents of any objects but not how it should be mapped to HTML content — Coder
– Coder, Commented Jul 14, 2017 at 18:36

Jeisson Huerfano · Accepted Answer · 2017-07-14 16:45:01Z

1

try this seee

You can use an existing library for that.

A simple one is: Angular Dynamic Forms

More standard way is the JSON Schema with this nice implementation Angular Schema Form. See examples on how it works here DEMO

answered Jul 14, 2017 at 16:45

Jeisson Huerfano

1471 silver badge9 bronze badges

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

Comments

Awais Butt · Accepted Answer · 2017-07-14 16:46:12Z

1

HTML:

<html>
 <head></head>
 <body>

 <body>
</html>

javascript:

<script>
//create a form
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

//create input element
var i = document.createElement("input");
i.type = "text";
i.name = "user_name";
i.id = "user_name1";

//create a checkbox
var c = document.createElement("input");
c.type = "checkbox";
c.id = "checkbox1";
c.name = "check1";

//create a button
var s = document.createElement("input");
s.type = "submit";
s.value = "Submit";

// add all elements to the form
f.appendChild(i);
f.appendChild(c);
f.appendChild(s);

// add the form inside the body
$("body").append(f);   //using jQuery or
document.getElementsByTagName('body')[0].appendChild(f); //pure javascript

</script>

you can create as many elements as you want dynamically.

answered Jul 14, 2017 at 16:46

Awais Butt

156 bronze badges

1 Comment

naveen kumar Over a year ago

why a php file?

Collectives™ on Stack Overflow

how to generate HTML FORM dynamically using any JSON object?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related