JSONfy form data

Convt form data to JSON string

by Soya Natsuki

HTML

<html>
  <head>
    <title>JSONfy form data with JQeury</title>
  </head>
  <body>
    <form action="#" id="subs-form">
      <label for="id">ID :</label>
      <input type="text" name="id" id="id" value="id_here"/>
      <label for="pw">PW :</label>
      <input type="text" name="pw" id="pw" value="pw_here"/>
    </form>
    <pre id="serializeArray">JSON result</pre>
    <pre id="serialize">JSON result</pre>
    <div id="box">
      <span id="idOut"></span><br>
      <span id="pwOut"></span>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 10px;
}

form input {
  display: block;
  margin-bottom: .5em;
}

pre {
  height: 1.5em;
  padding: 10px;
  color: #fff;
  background: #262626;
  font-size: 15px;
}

#box {
  height: 3em;
  padding: 10px;
  border: 1px #000 solid;
}

JavaScript

let update = () => {
  $('#serializeArray').text(
    JSON.stringify($('form').serializeArray())
  );
  $('#serialize').text(
    JSON.stringify($('form').serialize())
  )
  $('#idOut').text(
  	"ID: " + $('#id').val()
  )
  $('#pwOut').text(
  	"PW: " + $('#pw').val()
  )
}

update();

$('form').change(update);