html Javascript表单处理示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Javascript表单处理示例相关的知识，希望对你有一定的参考价值。

<html>
<body>
  <form method="post" enctype="multipart/form-data" action="">
    <input type="checkbox" name="locationCheckboxes[]" value="1">
    <input type="checkbox" name="locationCheckboxes[]" value="2">
    <input type="checkbox" name="locationCheckboxes[]" value="3">
    <input type="text" name="expiryDate" value="">
  </form>
</body>
</html>

<script>

  var saveFormData = (function() {
    'use strict';

    var form = document.forms[0];
    
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      
      var formData = new FormData(form);

      console.dir(formData);
      console.dir(formData.getAll('locationCheckboxes[]'));
      console.dir(formData.getAll('expiryDate'));

    });

  })();

</script>
<html>
<body>
  <form method="post" enctype="multipart/form-data" action="">
    <input type="checkbox" name="locationCheckboxes[]" value="1">
    <input type="checkbox" name="locationCheckboxes[]" value="2">
    <input type="checkbox" name="locationCheckboxes[]" value="3">
    <input type="text" name="expiryDate" value="">
  </form>
</body>
</html>


<script>

/**
* Retrieves checked values from a named checkbox group which would be represented as
* checkboxNames[] in the HTML input, as demonstrated below:
*
* <input type="checkbox" name="checkboxNames[]" value="1">
* <input type="checkbox" name="checkboxNames[]" value="2">
* <input type="checkbox" name="checkboxNames[]" value="3">
*
* @param checkboxes A NodeList of checkboxes.
* @returns {Array}
*/
function checkboxValues(checkboxes) {
  var values = [];

  if (checkboxes.length) {
    for (var k in checkboxes) {
      if (checkboxes[k].checked) {
        values.push(checkboxes[k].value);
      }
    }
  }

  return values;
}

var saveFormData = (function() {

  'use strict';

  var form = document.forms[0];
  form.addEventListener('submit', functio(event) {

    event.preventDefault();

    var expiryDate = form.elements['expiryDate'].value,
    locations = form.elements['locationCheckboxes[]'];

    console.dir(locations);
    console.dir(checkboxValues(locations));

  });

})();

</script>

以上是关于html Javascript表单处理示例的主要内容，如果未能解决你的问题，请参考以下文章

AJAX表单POST请求-HTML表单POST/Submit with AJAX/Javascript示例/教程

HTML表单提交未在Wordpress帖子中调用Javascript“onsubmit”处理程序[重复]

javascript 表单 md5 加密处理

JavaScript学习14：表单处理

select单击提交表单

form 表单处理