move form form to json

Question

move form form to json

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I need to pass this form structure to json :

<form id="#" name="formulario" action="#" method="#">
  <div class="panel-body">
    <section class="container-fluid" style="word-break: break-all;  word-wrap: break-word;" id="resultado">
      <article>
        <div class="container-fluid form-group">
          <div class="row">
            <div class="form-group">
              <label for="usr">Contraseña</label>
              <input type="password" size="30" maxlength="56" placeholder="entra" class="form-group" name="input_contra1" id="input_contra1">
            </div>
          </div>
        </div>
      </article>
      <article>
        <div class="container-fluid form-group">
          <div class="row">
            <p>eres</p>
            <form>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="checko1" id="checko1" value="">1
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="checko2" id="checko2" value="">2
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="checko3" id="checko3" value="">3
                </label>
              </div>
            </form>
          </div>
        </div>
      </article>
      <article>
        <div class="container-fluid form-group">
          <div class="row">
            <form>
            <label for="sel1">deporte </label>
              <select class="form-control-static" id="sel1">
                <option name="select1" id="select1">tenis</option>
                <option name="select2" id="select2">padel</option>
              </select>
            </form>
          </div>
        </div>
      </article>
    </section>
  </div>

  <div id="oculto" class="text-center oculto">
      <button type="submit" id="#" class="btn btn-danger btn-sm boton">Guardar</button>
  </div>
</form>

for example I want the password input:

{
  label:"Contraseña",
  input: {
    "type":"password,
    "size": 30,
    "maxlength":56,
    "placeholdre":"entra"
  }
}

of the checkbox:

its label content the options it gives ...

Would it be with serializeobject?

java javascript jquery html

asked by T P 25.05.2017 в 16:54

source

3 answers

Abstract Data Types (TAD) doubt How can I join several http.get responses and update ng-repeat?

score 2 · Answer 1

Jquery can do that

  function showValues() {
    var str = $("form").serialize();
    $("#results").text( str );
  }
  $("input[type='checkbox'], input[type='radio']").on("click", showValues );
  $("select").on("change", showValues );
  showValues();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serialize demo</title>
  <style>
  body, select {
    font-size: 12px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
    font-size: 14px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
 
<p><tt id="results"></tt></p>
</body>
</html>

score 0 · Answer 2

Yes, adding the type of coding to the form in the header, I leave you an example and then the documentation:

<form enctype='application/json'>
    <input name='name' value='Bender'>
    <select name='hind'>
        <option selected>Bitable</option>
        <option>Kickable</option>
    </select>
    <input type='checkbox' name='shiny' checked>
</form>

link

score 0 · Answer 3

Depends on what you need to do.

Another option to what you already mentioned, you can do through JQuery, it is an API that improves the implementation of JavaScript, allowing you to perform more concise functionalities (access to the DOM, events, etc.) than JavaScript.

Here is Jquery's documentation: JQuery .

Now, what you need you can do through this API, as in the following example: Form to JSON

JQuery Showcase: JQuery Demos

I hope you serve, greetings!