Pasar estructura de formulario html a json

publicado por: Anonymous

estoy intentado pasar una estructura de formulario de html a json y claro la idea es que el formulario html es dinámico ya que cada vez puede ser diferente y necesito un código que me pase a json los elementos del formulario y sus características de esta forma por ejemplo:

-De una etiqueta h2,p, label sacar el valor:

ej-> “label”: “Casa”, “h2″:”casa”..

-De un input text que me saque el type, placeholder, maxlength, valor.

  • Da un input number los mismo que el input text pero añadiendo el min, max
    …….

-De un checbox que me saque de esta estructura boostrap:

<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>

pues valor del label y del input el type…

Yo he intentado hacer esto por ejemplo de este formulario de prueba:

<form id="conv" name="formulario" action="#" method="#">

<label for="usr">dfdf</label>
<input type="text" size="20" maxlength="44" placeholder="de">         



<p>scsc</p>

<p>dd</p>
<div class="checkbox">
<label><input type="checkbox" name="checko1" value="">dcd</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="checko2" value="">cdcd</label>
</div>

</form>

el script:

$(".convertir").click(function () {




function serializeSchema(form) {
    return [].map.call(form.elements, function (el) {
        return {
            type: el.type,
            name: el.name,
            value: el.value,
            placeholder: el.placeholder,
            size: el.size,
            maxlength: el.maxlength,
            min: el.min,
            max: el.max,
            step: el.step
        };
    });
}
;

var form = document.querySelector('#conv');
schema = serializeSchema(form);

console.log(JSON.stringify(schema, null, 4));

pero me saca esto de una manera que no quiero

[
{
    "type": "text",
    "name": "input_text1",
    "value": "",
    "placeholder": "de",
    "size": 20,
    "min": "",
    "max": "",
    "step": ""
},
{
    "type": "checkbox",
    "name": "checko1",
    "value": "",
    "placeholder": "",
    "size": 20,
    "min": "",
    "max": "",
    "step": ""
},
{
    "type": "checkbox",
    "name": "checko2",
    "value": "",
    "placeholder": "",
    "size": 20,
    "min": "",
    "max": "",
    "step": ""
},
{
    "type": "submit",
    "name": "",
    "value": ""
}
]

por ejemplo los label, h2 no me lo saca….

solución

Estás haciendo un mal uso de HTMLFormElement.elements:

The HTMLFormElement.elements property returns an HTMLFormControlsCollection (HTML 4 HTMLCollection) of all the form controls contained in the FORM element, with the exception of input elements which have a type attribute of image.

En castellano:

La propiedad HTMLFormElement.elements devuelve un HTMLFormControlsCollection (HTML 4 HTMLCollection) de todos los controles del formulario contenidos en el elemento FORM, con la excepción de los elementos cuyo atributo type sea image.

Por lo que sólo se busca en elementos del formulario, no en otras etiquetas.

Una solución podría ser la siguiente:

_x000D_

_x000D_

function filtro(clave, valor) {_x000D_
    if (valor == '' || clave == null) {_x000D_
        return undefined;_x000D_
    } else {_x000D_
        return valor;_x000D_
    }_x000D_
};_x000D_
_x000D_
function serializeSchema(form) {_x000D_
  return [].map.call(form.getElementsByTagName("*"), function (el) {_x000D_
    switch(el.tagName) {_x000D_
      case 'INPUT':_x000D_
        return {_x000D_
          tag: el.tagName,_x000D_
          type: el.type,_x000D_
          name: el.name,_x000D_
          value: el.value,_x000D_
          placeholder: el.placeholder,_x000D_
          size: el.size,_x000D_
          maxlength: el.maxlength,_x000D_
          min: el.min,_x000D_
          max: el.max,_x000D_
          step: el.step_x000D_
        };_x000D_
      case 'DIV':_x000D_
      case 'ARTICLE':_x000D_
        /* Estas etiquetas las ignoramos */_x000D_
        return undefined;_x000D_
        break;_x000D_
      default:_x000D_
        /* Del resto de etiquetas sólo obtenemos su contenido de texto */_x000D_
        return {_x000D_
          tag: el.tagName,_x000D_
          text: el.innerText_x000D_
        };_x000D_
    }_x000D_
  }).filter(function (e) { return e !== undefined; });_x000D_
};_x000D_
_x000D_
var form = document.querySelector('#conv');_x000D_
schema = serializeSchema(form);_x000D_
console.log(JSON.stringify(schema, filtro, 2));

_x000D_

<form id="conv" name="formulario" action="#" method="#">_x000D_
  <label for="usr">dfdf</label>_x000D_
  <input type="text" size="20" maxlength="44" placeholder="de">_x000D_
  <p>scsc</p>_x000D_
  <p>dd</p>_x000D_
  <div class="checkbox">_x000D_
    <label><input type="checkbox" name="checko1" value="">dcd</label>_x000D_
  </div>_x000D_
  <div class="checkbox">_x000D_
    <label><input type="checkbox" name="checko2" value="">cdcd</label>_x000D_
  </div>_x000D_
</form>

_x000D_

_x000D_

_x000D_

He usado form.getElementsByTagName("*") para obtener hijos, nietos y demás niveles de descendencia. Si usamos sólo form.children no obtendremos nada más que el primer nivel de descendencia.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *