Pass the html form structure to json

Question

Pass the html form structure to json

Navigation

#1 by (3 votes)

2

I'm trying to pass a html form structure to json and of course the idea is that the html form is dynamic since every time it can be different and I need a code that passes to me json the elements of the form and its characteristics of this For example:

-From a label h2, p, label take the value:

ej-> > "label": "House", "h2": "house" ..

-From an input text that takes out type, placeholder, maxlength, value.

Give an input number the same as the input text but adding the min, max .......

-From a checbox that takes me out of this boostrap structure:

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

then the value of the label and the input type ...

I have tried to do this for example from this test form:

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

the 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));

but he pulls this out of me in a way I do not want

[
{
    "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": ""
}
]

for example the label, h2 does not take it out ....

javascript jquery html

asked by T P 31.05.2017 в 09:50

source

1 answer

Do a SELECT between two databases on the same server - postgresql Load date in input

score 3 · Accepted Answer

You are misusing HTMLFormElement.elements :

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

In Spanish:

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

So you only look for elements of the form, not other labels.

One solution could be the following:

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>

I used image to obtain children, grandchildren and other levels of descent. If we use only form.getElementsByTagName("*") we will not get anything more than the first level of descent.