Build html form from xml with JavaScript

Question

I'm again asking for help....

Let's see, I've the next situation, I build a module for manage the clients in a web platform, when some order is gonna be created the user selects a client from a select and then the client data is called via ajax, that data contains clients information like name, location and a XML string, for example:

<?xml version="1.0"?>
<cfdi xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file:///c:/Users/dlucas/Desktop/Addendas%20XSD/Kuehne.xsd">
    <AD>
        <RECEPTION>
            <Tipo>
                <INVOICE>
                    <!--Element Purchase_Order is optional-->
                    <Order>string</Order>
                    <!--Element FileNumber_GL is optional-->
                    <GL>string</GL>
                    <Centre>string</Centre>
                    <Ref>string</Ref>
                </INVOICE>
            </Tipo>
        </RECEPTION>
    </AD>
</cfdi>

Here the user must fill: Order, GL, Centre and Ref (but it changes for each client's xml), thats why I trying to convert the XML string to HTML form

I've been searching for some javascript library, but I only found this project: http://www.datamech.com/XMLForm/ this is exactly what I need to do, I've tested this tool and works perfectly with my xml string… sadly this blog doesn't give some resource to work.

Finally I decided do it manually, but my ability to process and iterate over the XML string is so poor (I know I've to practice more... and I'm on the way) but if someone could give me a hand to make this task I'll be so grateful!

I've inspected the result of this tool, and this is the structure of the generated form:

 <div id="xmlForm">
        <form name="xmlForm" action="http://www.datamech.com/XMLForm/formXML0200.pl?.df=html" target="_blank" method="post">
          <div class="XMLcomplexContent">
            <fieldset class="cfdi">
              <legend>cfdi</legend>
              <input type="hidden" value="cfdi" name=".tg">
              <input type="hidden" name="@
                              xmlns:xsi" value="http://www.w3.org/2001/XMLSchema-instance">
              <input type="hidden" name="@xsi:noNamespaceSchemaLocation" value="file:///c:/Users/dlucas/Desktop/Addendas%20XSD/Kuehne.xsd">
              <div class="XMLcomplexContent">
                <fieldset class="Addenda">
                  <legend>Addenda</legend>
                  <input type="hidden" value="Addenda" name=".tg">
                  <div class="XMLcomplexContent">
                    <fieldset class="KNRECEPCION">
                      <legend>KNRECEPCION</legend>
                      <input type="hidden" value="KNRECEPCION" name=".tg">
                      <div class="XMLcomplexContent">
                        <fieldset class="Tipo">
                          <legend>Tipo</legend>
                          <input type="hidden" value="Tipo" name=".tg">
                          <div class="XMLcomplexContent">
                            <fieldset class="FacturasKN">
                              <legend>FacturasKN</legend>
                              <input type="hidden" value="FacturasKN" name=".tg">
                              <span class="XMLsimpleType">
                                <span class="Purchase_Order">
                                  <label>Purchase_Order: </label>
                                  <input type="text" class="Purchase_Order" name="Purchase_Order" value="string" onfocus="focusGained(this)" onchange="textChanged(this)">
                                </span>
                                <br>
                              </span>
                              <span class="XMLsimpleType">
                                <span class="FileNumber_GL">
                                  <label>FileNumber_GL: </label>
                                  <input type="text" class="FileNumber_GL" name="FileNumber_GL" value="string" onfocus="focusGained(this)" onchange="textChanged(this)">
                                </span>
                                <br>
                              </span>
                              <span class="XMLsimpleType">
                                <span class="Branch_Centre">
                                  <label>Branch_Centre: </label>
                                  <input type="text" class="Branch_Centre" name="Branch_Centre" value="string" onfocus="focusGained(this)" onchange="textChanged(this)">
                                </span>
                                <br>
                              </span>
                              <span class="XMLsimpleType">
                                <span class="TransportRef">
                                  <label>TransportRef: </label>
                                  <input type="text" class="TransportRef" name="TransportRef" value="string" onfocus="focusGained(this)" onchange="textChanged(this)">
                                </span>
                                <br>
                              </span>
                              <input type="hidden" value="/FacturasKN" name=".tg">
                            </fieldset>
                          </div>
                          <input type="hidden" value="/Tipo" name=".tg">
                        </fieldset>
                      </div>
                      <input type="hidden" value="/KNRECEPCION" name=".tg">
                    </fieldset>
                  </div>
                  <input type="hidden" value="/Addenda" name=".tg">
                </fieldset>
              </div>
              <input type="hidden" value="/cfdi" name=".tg">
            </fieldset>
          </div>
          <p>
            <input id="submit" type="submit" value="Generate XML">
            <input value="Reset" type="reset">
          </p>
        </form>
    </div>

And this is what it looks like on the browser:

Is important to say that when the user click in the save button the content of the form must be converted to a XML string but with the values that the user typed in the form...

I know this is a hard task, buy really I'll appreciate some help, now I'm so confused, I'll be working on this and if some progress is made I'll communicate with yours...

Answer 1

Whether you read some source XML in and generate the HTML forms output yourself or have, for example, an XSLT styleheet or other tool, the primitive way to make it work would be to just add some JavaScript to the output, which, on <input type="button" onclick="..."/> , searches for the input field's IDs inside the form of the currently loaded document/DOM, reads out the values, optionally performs some validation (I guess UI frontend specification formats in XML like XForms or XUL may or may not support it - downside is that you 1. have to run an implementation for these and 2. maybe be able to customize the output), and finally sends the result in your preferred form/arrangement via AJAX to the server, where server-side processing + validation persistence needs to be implemented as well.

If you're not serving it from a server, then you run into the Same-Origin-Policy and browser sandboxing, from which you can only get out via save-as dialog, or other circumvention that essentially escapes/breaks the browser's sandboxing and the security that comes from that. Using localStorage might be an option if storing form input is only needed locally and temporarily.

There's some frameworks etc. that help with this kind of task, because it's very typical for web applications/forms. Ideally with some sort of "data binding" between the UI input form fields and a database (or file format/storage).