2017-12-30 18 views
0

Jsonファイルには128と140の2種類があります。私はjavascriptを使ってフォームを作成したいと思っています。私はinputboxを生成したいと思っています。もしtypeが128ならselectboxを生成し、typeが137ならdynamic.iを生成したいdivを引き換えたいのですが、生成すると期待されるフォームは次のようになります:Jsonでフォームを作成する方法

ここで
<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> 

は、私のJavascriptコードです:

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;  
    } 
    } 
} 

答えて

0

質問はちょっと不明瞭、おそらく曖昧であるとselectメニュー項目(137)を作成するためにもdivのためのサンプルJSONはありませんので、(140?)私は即興!必要に応じて、それは正確ではないかもしれませんが、良い出発点にあなたがより多くを適用することができるはず、次のHTML構造

<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> 

を出力

<!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> 

を与える必要があります - 私は、次のことが有用であり得る願っています類似のロジックを使用して出力フォーマットを希望する

関連する問題