2

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

1
  • no es maner extraña es que está hecho con boostrap el checkbox
    – T P
    el 31 may. 2017 a las 8:13

1 respuesta 1

3

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:

function filtro(clave, valor) {
    if (valor == '' || clave == null) {
        return undefined;
    } else {
        return valor;
    }
};

function serializeSchema(form) {
  return [].map.call(form.getElementsByTagName("*"), function (el) {
    switch(el.tagName) {
      case 'INPUT':
        return {
          tag: el.tagName,
          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
        };
      case 'DIV':
      case 'ARTICLE':
        /* Estas etiquetas las ignoramos */
        return undefined;
        break;
      default:
        /* Del resto de etiquetas sólo obtenemos su contenido de texto */
        return {
          tag: el.tagName,
          text: el.innerText
        };
    }
  }).filter(function (e) { return e !== undefined; });
};

var form = document.querySelector('#conv');
schema = serializeSchema(form);
console.log(JSON.stringify(schema, filtro, 2));
<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>

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.

9
  • gracias por la respuesta pero esto sigue sin sacarme el valor de los labels o h3 y a parte si dentro del form tengo otras etiquetas que no quiero que me saque como los div, br que hago??
    – T P
    el 31 may. 2017 a las 8:36
  • y no me saca en lenguaje jsonn mas bien objeto
    – T P
    el 31 may. 2017 a las 8:45
  • ¿Podrías poner un ejemplo completo en tu pregunta? ¿Qué valores quieres sacar de los label y de los h3? Es que en tu pregunta no están esas etiquetas y no pones qué datos quieres de ellas. el 31 may. 2017 a las 9:00
  • me estás ayudando oscar peró me falta que me soluciones que me saque el valor de los label y p como por ejemplo <label>hola</label> { "tag": "LABEL", value:"hola" },
    – T P
    el 31 may. 2017 a las 9:01
  • y la otra question si se pueden suprimir que no me saque otros elementos como el div, article etiquetas que estan dentro del formulario que no quiero que me saque
    – T P
    el 31 may. 2017 a las 9:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.