Fix form submission (#129)

* Fix check for radio and checkbox inputs

* Fix GET form submission

* Add example forms for testing

* Refactor query string building

lib/proto/attach-form.js

@@ -11,7 +11,8 @@ var formAction = function(el, event) {
   // Initialize requestOptions
   options.requestOptions = {
     requestUrl: el.getAttribute("action") || window.location.href,
-    requestMethod: el.getAttribute("method") || "GET"
+    requestMethod: el.getAttribute("method") || "GET",
+    requestParams: []
   }
 
   // create a testable virtual link of the form action
@@ -44,24 +45,20 @@ var formAction = function(el, event) {
 
   event.preventDefault()
 
-  var paramObject = []
   for (var elementKey in el.elements) {
     var element = el.elements[elementKey]
     // jscs:disable disallowImplicitTypeConversion
     if (!!element.name && element.attributes !== undefined && element.tagName.toLowerCase() !== "button") {
       // jscs:enable disallowImplicitTypeConversion
-      if ((element.attributes.type !== "checkbox" && element.attributes.type !== "radio") || element.checked) {
-        paramObject.push({name: encodeURIComponent(element.name), value: encodeURIComponent(element.value)})
+      if ((!element.attributes.type || element.attributes.type.value !== "checkbox" && element.attributes.type.value !== "radio") || element.checked) {
+        options.requestOptions.requestParams.push({
+          name: encodeURIComponent(element.name),
+          value: encodeURIComponent(element.value)
+        })
       }
     }
   }
 
-  // Creating a getString
-  var paramsString = (paramObject.map(function(value) {return value.name + "=" + value.value})).join("&")
-
-  options.requestOptions.requestPayload = paramObject
-  options.requestOptions.requestPayloadString = paramsString
-
   el.setAttribute(attrClick, "submit")
 
   options.triggerElement = el

lib/send-request.js

@@ -1,7 +1,11 @@
+var updateQueryString = require("./util/update-query-string");
+
 module.exports = function(location, options, callback) {
   options = options || {}
-  var requestMethod = options.requestMethod || "GET"
-  var requestPayload = options.requestPayloadString || null
+  var queryString
+  var requestMethod = (options.requestMethod || "GET").toUpperCase()
+  var requestParams = options.requestParams || null
+  var requestPayload = null
   var request = new XMLHttpRequest()
 
   request.onreadystatechange = function() {
@@ -24,19 +28,40 @@ module.exports = function(location, options, callback) {
     callback(null, request)
   }
 
-  // Add a timestamp as part of the query string if cache busting is enabled
-  if (this.options.cacheBust) {
-    location += (!/[?&]/.test(location) ? "?" : "&") + new Date().getTime()
+  // Prepare the request payload for forms, if available
+  if (requestParams && requestParams.length) {
+    // Build query string
+    queryString = (requestParams.map(function(param) {return param.name + "=" + param.value})).join("&")
+
+    switch (requestMethod) {
+      case "GET":
+        // Reset query string to avoid an issue with repeat submissions where checkboxes that were
+        // previously checked are incorrectly preserved
+        location = location.split("?")[0]
+
+        // Append new query string
+        location += "?" + queryString
+        break
+
+      case "POST":
+        // Send query string as request payload
+        requestPayload = queryString
+        break
+    }
   }
 
-  request.open(requestMethod.toUpperCase(), location, true)
+  // Add a timestamp as part of the query string if cache busting is enabled
+  if (this.options.cacheBust) {
+    location = updateQueryString(location, "t", Date.now())
+  }
+
+  request.open(requestMethod, location, true)
   request.timeout = options.timeout
   request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
   request.setRequestHeader("X-PJAX", "true")
 
-  // Add the request payload if available
-  if (options.requestPayloadString !== undefined && options.requestPayloadString !== "") {
-    // Send the proper header information along with the request
+  // Send the proper header information for POST forms
+  if (requestPayload && requestMethod === "POST") {
     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
   }
 

lib/util/update-query-string.js

@@ -0,0 +1,10 @@
+module.exports = function(uri, key, value) {
+  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i")
+  var separator = uri.indexOf("?") !== -1 ? "&" : "?"
+  if (uri.match(re)) {
+    return uri.replace(re, "$1" + key + "=" + value + "$2")
+  }
+  else {
+    return uri + separator + key + "=" + value
+  }
+}