How To Assign Data From HTML Form(in JSON Format) To Variable?

Question

In my abc.html I have the following code which will covert the form data(hard coded for now) to JSON format:

Solution 1:

If you are not handling this in backend you can retrieve the data in Javascript in a variable then just appned it as JSON to your data using JSON.stringify().

This is a working snippet:

    function submitform() {
      var FormData = {
        Company: myForm.Company.value,
        User: myForm.User.value,
        parameterMap: {
          p1: myForm.p1.value,
          p2: myForm.p2.value,
          p3: myForm.p3.value
        }
      };
      console.log(FormData);

      $.ajax({
        url: "myurl",
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(FormData),
        contentType: 'application/json',
        mimeType: 'application/json',
        success: function(data) {
          alert(data.uuid);
        },
        error: function(data, status, er) {
          alert("error: " + data + " status: " + status + " er:" + er);
        }
      });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype='application/json' method="POST" name="myForm">

  <p>
    <label>Company:</label>
    <input name='Company' value='TESTCOMPANY'>
  </p>

  <p>
    <label>User Id:</label>
    <input name='User' value='TESTUSER'>
  </p>

  <p>
    <label>Division:</label>
    <input type="text" name='p1' value='12345'>
  </p>

  <p>
    <label>From:</label>
    <input type="text" name='p2' value='20-MAR-2016'>
  </p>

  <p>
    <label>To:</label>
    <input type="text" name='p3' value='22-MAR-2016'>
  </p>

  <input value="Submit" type="submit" onclick="submitform()">
</form>

Notes:

Use Javascript naming conventions, for example FormData will better be formData.

Solution 2:

Using the provided HTML structure you could get the data into the format using:

Baca Juga

function submitform(){
    var form = document.querySelector('form');
    var result = {};
    var input = form.getElementsByTagName('input');
    for(var i = 0; i < input.length; i ++) {
        var row = input[i];
        var rowName = ((row.name || '').match(/(\w+)(\[(\w+)\])?/) || []);
        var rowIndex = rowName[3];
        rowName = rowName[1];
        if(rowName) {
            var typeOfRowIndex = typeof rowIndex;
            var rowValue = row.value;
            if(typeof result[rowName] === 'undefined') {
                var rowToAdd = {};
                rowToAdd[rowIndex] = rowValue;
                result[rowName] = typeOfRowIndex === 'undefined' ? rowValue : rowToAdd;
            } else if(typeOfRowIndex !== 'undefined') {
                result[rowName][rowIndex] = rowValue;
            }
        }
    }
    document.getElementById('output').innerHTML = JSON.stringify(result)
    console.log(result);
    return false;
}

<body>
  <form enctype='application/json' method="POST" name="myForm">

    <p>
      <label>Company:</label>
      <input name='Company' value='TESTCOMPANY'>
    </p>

    <p>
      <label>User Id:</label>
      <input name='User' value='TESTUSER'>
    </p>

    <p>
      <label>Division:</label>
      <input type="text" name='parameterMap[p1]' value='12345'>
    </p>

    <p>
      <label>From:</label>
      <input type="text" name='parameterMap[p2]' value='20-MAR-2016'>
    </p>

    <p>
      <label>To:</label>
      <input type="text" name='parameterMap[p3]' value='22-MAR-2016'>
    </p>

    <input value="Submit" type="submit" onclick="return submitform()">
  </form>
  <p>JSON Output (after clicking submit button):</p>
  <div id="output"></div>
  <p>Can also check console to see JSON object (after clicking submit button)</p>
</body>

Solution 3:

var FormData = $('form[name=myForm]').serializeArray();
FormData = JSON.stringify(FormData);

Solution 4:

I don't like jQuery, but:

var $inputs = $('form[name="myForm"]').find('input');

var res = {};
Array.prototype.forEach.call($inputs, function($item, index) {
  res[ $item.getAttribute('name') ] = $item.value;
});

var FormData = JSON.stringify(res);

alert(FormData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <form enctype='application/json' method="POST" name="myForm">

    <p><label>Company:</label>
      <input name='Company' value='TESTCOMPANY'> </p>

    <p><label>User Id:</label>
      <input name='User' value='TESTUSER'></p>

    <p><label>Division:</label>
      <input type="text" name='parameterMap[p1]' value='12345' ></p>

    <p><label>From:</label>
      <input type="text" name='parameterMap[p2]' value='20-MAR-2016'></p>

    <p><label>To:</label>
      <input type="text" name='parameterMap[p3]' value='22-MAR-2016'></p>

    <input value="Submit" type="submit" onclick="submitform()">
  </form>
</body>

Html5 School

How To Assign Data From HTML Form(in JSON Format) To Variable?

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How To Assign Data From HTML Form(in JSON Format) To Variable?"