2017-12-30 10 views
0

Ich habe eine Json-Datei mit zwei Typ 128 und 140. und ich möchte ein Formular mit ihnen über Javascript produzieren. Ich möchte inputbox erzeugen, wenn der Typ war 128 außerdem selectbox erzeugen, wenn der Typ 137 war, und wollen es generieren dynamically.i 128 die Form, die ich zu generieren erwarten ein div Im Austausch für Typ wiederholen möchte, ist ungefähr wie folgt aus:Wie ein Formular mit einem Json erstellen

<form method="post" action="/roundtrip_final.bc" id="finalinvoice"> 
    <div class="passenger_box"><div class="tblreserve adultInfoes"> 

    <div class="c-infoo"> 
    <label for="name" class="abs-tlt"> name</label> 
    <input placeholder="firstname " id="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname" class="nofilling2 engword" type="text"> 
    </div> 

    <div class="c-infoo"> 
    <label for="family" class="abs-tlt">lastname</label> 
    <input placeholder=" lastname" id="family" name="_root.passengerinfo__1.passengerinfo.fullname.lastname" class="nofilling2 engword" type="text"> 
    </div> 

    <div class="c-infoo"> 
    <label class="abs-tlt" for="gender"></label> 
    <select name="_root.passengerinfo__1.passengerinfo.gender"> 
    <option value="1" selected="">male</option> 
    <option value="0">famale</option> 
    </select> 
    </div> 

    <div class="clr"></div></div><div class="clr"></div></div> 
    </form> 

Hier ist mein Javascript-Code: (140)

var schema = [{ 
    "queestion":"name" , 
    "type":"128", 
    "attrs":[ 
     {"attr":{ 
      "name":"class", 
      "value":"nofilling2 engword" 
     }}, 
     {"attr":{ 
      "name":"id", 
      "value":"name" 
     }}, 
     {"attr":{ 
      "name":"type", 
      "value":"text" 
     }}, 
     {"attr":{ 
      "name":"placeholder", 
      "value":"name" 
     }}, 
     {"attr":{ 
      "name":"name", 
      "value":"_root.passengerinfo__1.passengerinfo.fullname.firstname" 
     }} 
    ] 

}, 
{ 
    "queestion":"lastname" , 
    "type":"128", 
    "attrs":[ 
     {"attr":{ 
      "name":"class", 
      "value":"nofilling2 engword" 
     }}, 
     {"attr":{ 
      "name":"id", 
      "value":"family" 
     }}, 
     {"attr":{ 
      "name":"type", 
      "value":"text" 
     }}, 
     {"attr":{ 
      "name":"placeholder", 
      "value":"lastname" 
     }}, 
     {"attr":{ 
      "name":"name", 
      "value":"_root.passengerinfo__1.passengerinfo.fullname.lastname" 
     }} 
    ] 

}, 
{ 
    "queestion":"birthdate" , 
    "type":"128", 
    "attrs":[ 
     {"attr":{ 
      "name":"class", 
      "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element" 
     }}, 
     {"attr":{ 
      "name":"id", 
      "value":"" 
     }}, 
     {"attr":{ 
      "name":"placeholder", 
      "value":"birthdate" 
     }}, 
     {"attr":{ 
      "name":"type", 
      "value":"text" 
     }}, 
     {"attr":{ 
      "name":"name", 
      "value":"_root.passengerinfo__1.passengerinfo.birthdate" 
     }} 
    ] 

}] 

for (var i = 0; i < schema.length; i++) { 
    var type=schema[i].type; 
    if(type==128){ 
    for (var y=0;y<schema[i].type.length;y++){ 
      var string = "<div class="c-infoo"><label for="family" class="abs-tlt"> "; 
      string += schema[i].queestion; 
     string+="</label>"; 
     var y=document.getElementsByClassName('adultInfoes'); 
     y.innerHTML=string + " : "; 
     var string1 = "<_input "; 
     for (var x=0;x<schema[i].attrs.length;x++){ 
      string1 += schema[i].attrs[x].attr.name+'="'+schema[i].attrs[x].attr.value+'" ' 
     } 
     string1+=">"; 
     console.log(string) 
     var y=document.getElementsByClassName('adultInfoes'); 
     y.innerHTML=string1;  
    } 
    } 
} 

Antwort

0

die Frage ein wenig unklar ist und möglicherweise nicht eindeutig und es gibt keine Probe json den select Menüpunkt für die Erstellung (137) noch für eine div so Ich habe improvisiert! Ich hoffe, dass die folgenden von Nutzen sein kann - es ist nicht genau wie gewünscht sein könnte, sollte aber ein guter Ausgangspunkt

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8' /> 
     <title>Dynamic form generation</title> 
    </head> 
    <body> 
     <div id='parent'></div> 
     <script> 

      var parent = document.getElementById('parent'); 

      function createNode(t, a, p) { 
       try{ 
        var el = (typeof(t)=='undefined' || t==null) ? document.createElement('div') : document.createElement(t); 
        for(var x in a) if(a.hasOwnProperty(x) && x!=='innerHTML') el.setAttribute(x, a[ x ]); 
        if(a.hasOwnProperty('innerHTML')) el.innerHTML=a.innerHTML; 
        if(p!=null) typeof(p)=='object' ? p.appendChild(el) : document.getElementById(p).appendChild(el); 
        return el; 
       }catch(err){ 
        console.warn('createNode: %s, %o, %o',t,a,p); 
       } 
      } 

      var types={ 
       128:'text', 
       137:'select' 
      } 

      var schema = [{ 
       "question":"name" , 
       "type":"128", 
       "attrs":[ 
        {"attr":{ 
         "name":"class", 
         "value":"nofilling2 engword" 
        }}, 
        {"attr":{ 
         "name":"id", 
         "value":"name" 
        }}, 
        {"attr":{ 
         "name":"type", 
         "value":"text" 
        }}, 
        {"attr":{ 
         "name":"placeholder", 
         "value":"name" 
        }}, 
        {"attr":{ 
         "name":"name", 
         "value":"_root.passengerinfo__1.passengerinfo.fullname.firstname" 
        }} 
       ] 

      }, 
      { 
       "question":"lastname" , 
       "type":"128", 
       "attrs":[ 
        {"attr":{ 
         "name":"class", 
         "value":"nofilling2 engword" 
        }}, 
        {"attr":{ 
         "name":"id", 
         "value":"family" 
        }}, 
        {"attr":{ 
         "name":"type", 
         "value":"text" 
        }}, 
        {"attr":{ 
         "name":"placeholder", 
         "value":"lastname" 
        }}, 
        {"attr":{ 
         "name":"name", 
         "value":"_root.passengerinfo__1.passengerinfo.fullname.lastname" 
        }} 
       ] 

      }, 
      { 
       "question":"birthdate" , 
       "type":"128", 
       "attrs":[ 
        {"attr":{ 
         "name":"class", 
         "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element" 
        }}, 
        {"attr":{ 
         "name":"id", 
         "value":"" 
        }}, 
        {"attr":{ 
         "name":"placeholder", 
         "value":"birthdate" 
        }}, 
        {"attr":{ 
         "name":"type", 
         "value":"text" 
        }}, 
        {"attr":{ 
         "name":"name", 
         "value":"_root.passengerinfo__1.passengerinfo.birthdate" 
        }} 
       ] 

      }, 
      { 
       "question":"gender" , 
       "type":"137", 
       "attrs":[ 
        {"attr":{ 
         "name":"class", 
         "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element" 
        }}, 
        {"attr":{ 
         "name":"id", 
         "value":"gender" 
        }}, 
        {"attr":{ 
         "name":"placeholder", 
         "value":"gender" 
        }}, 
        {"attr":{ 
         "name":"name", 
         "value":"_root.passengerinfo__1.passengerinfo.birthdate" 
        }} 
       ], 
       "options":[ 
        {"value":0,"text":"Female"}, 
        {"value":1,"text":"Male"}, 
        {"value":2,"text":"Transgender"}, 
        {"value":3,"text":"Hermaphrodite"} 
       ] 

      }]; 

      schema.forEach(
       function(obj){ 

        var label_attribs={}; 
        var node_attribs={}; 

        obj.attrs.forEach(function(a){ 
         label_attribs[ a.attr.name ]=a.attr.value; 
         node_attribs[ a.attr.name ]=a.attr.value; 
        }); 
        label_attribs['innerHTML']=obj.question; 


        var type=types[ obj.type ]; 
        if(obj.type==128 || obj.type==140){ 
         node_attribs.type=type; 
         type='input'; 
        } 
        console.info(type) 

        var label=createNode('label', label_attribs, parent); 
        var node=createNode(type , node_attribs, label); 

        if(obj.type==137){ 
         var options=obj.options; 
         options.forEach(function(option){ 
          createNode('option',{ value:option.value, innerHTML:option.text }, node); 
         }); 
        } 
       } 
      ); 
     </script> 
    </body> 
</html> 

, das die folgenden HTML-Struktur

<div id="parent"> 
    <label class="nofilling2 engword" id="name" type="text" placeholder="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname"> 
     name 
     <input class="nofilling2 engword" id="name" type="text" placeholder="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname"> 
    </label> 
    <label class="nofilling2 engword" id="family" type="text" placeholder="lastname" name="_root.passengerinfo__1.passengerinfo.fullname.lastname"> 
     lastname 
     <input class="nofilling2 engword" id="family" type="text" placeholder="lastname" name="_root.passengerinfo__1.passengerinfo.fullname.lastname"> 
    </label> 
    <label class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="" placeholder="birthdate" type="text" name="_root.passengerinfo__1.passengerinfo.birthdate"> 
     birthdate 
     <input class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="" placeholder="birthdate" type="text" name="_root.passengerinfo__1.passengerinfo.birthdate"> 
    </label> 
    <label class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="gender" placeholder="gender" name="_root.passengerinfo__1.passengerinfo.birthdate"> 
     gender 
     <select class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="gender" placeholder="gender" name="_root.passengerinfo__1.passengerinfo.birthdate"> 
      <option value="0">Female</option> 
      <option value="1">Male</option> 
      <option value="2">Transgender</option> 
      <option value="3">Hermaphrodite</option> 
     </select> 
    </label> 
</div> 

Sie sollten mehr anwenden können, gibt geben ähnliche Logik, um das gewünschte Ausgabeformat zu erhalten

Verwandte Themen