rainyjune · October 31, 2016 06:27
diff --git a/form-serialization.html b/form-serialization.html
 <!doctype html>
 <html>
  <head>
    <title>Form Serialization</title>
  </head>
  <body>
    <form action="form.php" method="post">
      <input type="hidden" name="hiddeninput" value="hidden value" />
      Name:<input type="text" name="username" /><br />
      Pass:<input type="password" name="userpassword" /> <br />
      Gender:<label><input type="radio" name="gender" value="1" />Male</label>
             <label><input type="radio" name="gender" value="2" />Female</label>
             <label><input type="radio" name="gender" value="0" checked />Unknown</label><br />
      Native Language: <select name="nativelanguage">
        <option value="zh">Chinese</option>
        <option value="en">English</option>
        <option value="jp">Japanese</option>
      </select><br />
      Favorite colors: <select name="favorcolors" multiple>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">blue</option>
      </select><br />
      Which ones do you have?
      <input type="checkbox" name="vehicle" value="Bike"> I have a bike
      <input type="checkbox" name="vehicle" value="Car"> I have a car<br>
      
      Please describe your self:
      <textarea name="desc">Hello</textarea>
      
      <button type="button">Custom button</button>
      <input type="submit" />
      <input type="reset" />
    </form>
    <script>
      function serialize(form) {
        var parts = [];
        var elements = form.elements;
        var len = elements.length;
        var currentElement;
        var i, j, optslen, curOption, curOptVal;
        for (var i = 0; i < len; i++) {
          currentElement = elements[i];
          
          switch(currentElement.type) {
            // The SELECT elements
            case "select-one": // Single-select controls
            case "select-multiple": // Multiselect controls
              if (!currentElement.name) { // A successful control must has a control name.
                break;
              }
              for (j = 0, optslen = currentElement.options.length; j < optslen; j++) {
                curOption = currentElement.options[j];
                if (!curOption.selected) { // Skip the option if it was not selected.
                  continue;
                }
                curOptVal = "";
                // If the `value` attribute is not present, use the element text instead
                // Also note that a value attribute with an empty string is completely valid
                if (curOption.hasAttribute) { // DOM-compliant browsers
                  curOptVal = curOption.hasAttribute("value") ? curOption.value : curOption.text;
                } else { // IE 8 and earlier
                  curOptVal = curOption.attributes["value"].specified ? curOption.value: curOption.text;
                }
                parts.push(encodeURIComponent(currentElement.name) + "=" + encodeURIComponent(curOptVal));
              }
              break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
              break;
            case "radio":
            case "checkbox":
              if (!currentElement.checked) {
                break;
              }
              /* falls through */
            default: 
              if (!currentElement.name) {
                break;
              }
              parts.push(encodeURIComponent(currentElement.name) + "=" + encodeURIComponent(currentElement.value));
          }
        }
        return parts.join("&").replace(/%20/g, '+');// Replace space characters with `+`.
      }
      var form = document.getElementsByTagName("form")[0];
      form.onsubmit = function() {
        var str = serialize(form);
        debugger;
      };
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Form Serialization</title>
	</head>
	<body>
	<form action="form.php" method="post">
	<input type="hidden" name="hiddeninput" value="hidden value" />
	Name:<input type="text" name="username" /><br />
	Pass:<input type="password" name="userpassword" /> <br />
	Gender:<label><input type="radio" name="gender" value="1" />Male</label>
	<label><input type="radio" name="gender" value="2" />Female</label>
	<label><input type="radio" name="gender" value="0" checked />Unknown</label><br />
	Native Language: <select name="nativelanguage">
	<option value="zh">Chinese</option>
	<option value="en">English</option>
	<option value="jp">Japanese</option>
	</select><br />
	Favorite colors: <select name="favorcolors" multiple>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">blue</option>
	</select><br />
	Which ones do you have?
	<input type="checkbox" name="vehicle" value="Bike"> I have a bike
	<input type="checkbox" name="vehicle" value="Car"> I have a car<br>

	Please describe your self:
	<textarea name="desc">Hello</textarea>

	<button type="button">Custom button</button>
	<input type="submit" />
	<input type="reset" />
	</form>
	<script>
	function serialize(form) {
	var parts = [];
	var elements = form.elements;
	var len = elements.length;
	var currentElement;
	var i, j, optslen, curOption, curOptVal;
	for (var i = 0; i < len; i++) {
	currentElement = elements[i];

	switch(currentElement.type) {
	// The SELECT elements
	case "select-one": // Single-select controls
	case "select-multiple": // Multiselect controls
	if (!currentElement.name) { // A successful control must has a control name.
	break;
	}
	for (j = 0, optslen = currentElement.options.length; j < optslen; j++) {
	curOption = currentElement.options[j];
	if (!curOption.selected) { // Skip the option if it was not selected.
	continue;
	}
	curOptVal = "";
	// If the `value` attribute is not present, use the element text instead
	// Also note that a value attribute with an empty string is completely valid
	if (curOption.hasAttribute) { // DOM-compliant browsers
	curOptVal = curOption.hasAttribute("value") ? curOption.value : curOption.text;
	} else { // IE 8 and earlier
	curOptVal = curOption.attributes["value"].specified ? curOption.value: curOption.text;
	}
	parts.push(encodeURIComponent(currentElement.name) + "=" + encodeURIComponent(curOptVal));
	}
	break;
	case undefined:
	case "file":
	case "submit":
	case "reset":
	case "button":
	break;
	case "radio":
	case "checkbox":
	if (!currentElement.checked) {
	break;
	}
	/* falls through */
	default:
	if (!currentElement.name) {
	break;
	}
	parts.push(encodeURIComponent(currentElement.name) + "=" + encodeURIComponent(currentElement.value));
	}
	}
	return parts.join("&").replace(/%20/g, '+');// Replace space characters with `+`.
	}
	var form = document.getElementsByTagName("form")[0];
	form.onsubmit = function() {
	var str = serialize(form);
	debugger;
	};
	</script>
	</body>
	</html>