Send submitting elements value along with post

jquery.pjax.js

@@ -117,16 +117,22 @@ function handleClick(event, container, options) {
 function handleSubmit(event, container, options) {
   options = optionsFor(container, options)
 
-  var form = event.currentTarget
+  var form = event.currentTarget,
+    $form = $(form)
 
   if (form.tagName.toUpperCase() !== 'FORM')
     throw "$.pjax.submit requires a form element"
 
+  var data = $form.serializeArray()
+
+  if (submitButton = $form.data(submitButtonAttr))
+    data.push(submitButton)
+
   var defaults = {
     type: form.method.toUpperCase(),
     url: form.action,
-    data: $(form).serializeArray(),
-    container: $(form).attr('data-pjax'),
+    data: data,
+    container: $form.attr('data-pjax'),
     target: form
   }
 
@@ -135,6 +141,28 @@ function handleSubmit(event, container, options) {
   event.preventDefault()
 }
 
+var submitClickSelectors = 'form[data-pjax] input[type=submit],\
+  form[data-pjax] button[type=submit],\
+  form[data-pjax] button:not([type])',
+  submitButtonAttr = 'pjax-submit-button-value'
+
+// Private: sends value of submitting element along form post
+//
+// event   - "click" jQuery.Event
+//
+// Returns nothing.
+function handleSubmitClick(event) {
+  var $submit = $(this),
+    $form = $submit.closest('form')
+
+  if (name = $submit.attr('name')) {
+    $form.data(submitButtonAttr, { name: name, value: $submit.val() })
+  }
+  else {
+    $form.data(submitButtonAttr, null)
+  }
+}
+
 // Loads a URL with ajax, puts the response body inside a container,
 // then pushState()'s the loaded URL.
 //
@@ -798,7 +826,10 @@ function enable() {
     maxCacheLength: 20,
     version: findVersion
   }
+
   $(window).on('popstate.pjax', onPjaxPopstate)
+
+  $(document).on('click', submitClickSelectors, handleSubmitClick)
 }
 
 // Disable pushState behavior.
@@ -822,6 +853,8 @@ function disable() {
   $.pjax.reload = function() { window.location.reload() }
 
   $(window).off('popstate.pjax', onPjaxPopstate)
+
+  $(document).off('click', submitClickSelectors, handleSubmitClick)
 }
 
 

test/app.rb

@@ -28,7 +28,7 @@ def title(str)
 
 
 get '/' do
-  erb :qunit
+  erb :qunit, :layout => false
 end
 
 get '/jquery.pjax.js' do
@@ -86,3 +86,7 @@ def title(str)
 get '/:page.html' do
   erb :"#{params[:page]}", :layout => !pjax?
 end
+
+post '/form_post.html' do
+  erb :form_post, :layout => !pjax?
+end

test/unit/form.js

@@ -0,0 +1,97 @@
+if ($.support.pjax) {
+  module("handleSubmit", {
+    setup: function() {
+      var self = this
+      stop()
+      window.iframeLoad = function(frame) {
+        self.frame = frame
+        window.iframeLoad = $.noop
+        start()
+      }
+      $("#qunit-fixture").append("<iframe src='basic_form.html'>")
+    },
+    teardown: function() {
+      delete window.iframeLoad
+    }
+  })
+
+  asyncTest("Form POST records submitting element's value", function() {
+    var frame = this.frame
+
+    frame.$("#main")
+      .on("pjax:end", function() {
+        equal(frame.$("#submit").text(), "submit value")
+        start()
+      })
+
+    frame.$("[name='submit']").click()
+  })
+
+  module("handleSubmit (multiple submit buttons)", {
+    setup: function() {
+      var self = this
+      stop()
+      window.iframeLoad = function(frame) {
+        self.frame = frame
+        window.iframeLoad = $.noop
+        start()
+      }
+      $("#qunit-fixture").append("<iframe src='form.html'>")
+    },
+    teardown: function() {
+      delete window.iframeLoad
+    }
+  })
+
+  asyncTest("Form POST records submitting element's value", function() {
+    var frame = this.frame
+
+    frame.$("#main")
+      .on("pjax:end", function() {
+        equal(frame.$("#submit").text(), "submit value")
+        start()
+      })
+
+    frame.$("input[name='submit']").click()
+  })
+
+  asyncTest("Form POST records submitting element's value, when input is a button", function() {
+    var frame = this.frame
+
+    frame.$("#main")
+      .on("pjax:end", function() {
+        equal(frame.$("#submit").text(), "submit value")
+        start()
+      })
+
+    frame.$("button[name='submit']").click()
+  })
+
+  module("handleSubmit (multiple forms)", {
+    setup: function() {
+      var self = this
+      stop()
+      window.iframeLoad = function(frame) {
+        self.frame = frame
+        window.iframeLoad = $.noop
+        start()
+      }
+      $("#qunit-fixture").append("<iframe src='multiple_forms.html'>")
+    },
+    teardown: function() {
+      delete window.iframeLoad
+    }
+  })
+
+  asyncTest("Form POST records submitting element's value", function() {
+    var frame = this.frame
+
+    frame.$("#main")
+      .on("pjax:end", function() {
+        equal(frame.$("#submit").text(), "submit value")
+        start()
+      })
+
+    frame.$("#form2 [name='submit']").click()
+  })
+}

test/views/basic_form.erb

@@ -0,0 +1,18 @@
+<%= title 'Form' %>
+
+<form action="/form_post.html" method="post" data-pjax>
+	<input name="test" type="text" />
+	<input name="test1" type="text" />
+	<input name="submit" type="submit" value="submit value" />
+</form>
+
+<script type="text/javascript">
+	$("#main")
+		.pjax("a")
+			.on('submit', 'form[data-pjax]', function(evt) {
+			  $.pjax
+			    .submit(evt, $("#main"));
+			})
+
+	window.parent.iframeLoad(window)
+</script>

test/views/form.erb

@@ -0,0 +1,21 @@
+<%= title 'Form' %>
+
+<form action="/form_post.html" method="post" data-pjax>
+	<input name="test" type="text" />
+	<input name="test1" type="text" />
+	<input name="submit3" type="submit" value="submit value 3" />
+	<input name="submit" type="submit" value="submit value" />
+	<input name="submit2" type="submit" value="submit value 2" />
+	<button name="submit" type="submit" value="submit value">Submit Button</button>
+</form>
+
+<script type="text/javascript">
+	$("#main")
+		.pjax("a")
+			.on('submit', 'form[data-pjax]', function(evt) {
+			  $.pjax
+			    .submit(evt, $("#main"));
+			})
+
+	window.parent.iframeLoad(window)
+</script>

test/views/form_post.erb

@@ -0,0 +1 @@
+<p id="submit"><%= params[:submit] %></p>

test/views/multiple_forms.erb

@@ -0,0 +1,28 @@
+<%= title 'Form' %>
+
+<form action="/form_post.html" method="post" data-pjax>
+	<input name="test" type="text" />
+	<input name="test1" type="text" />
+	<input name="submit3" type="submit" value="submit value 3" />
+	<input name="submit" type="submit" value="submit value form 1" />
+	<input name="submit2" type="submit" value="submit value 2" />
+</form>
+
+<form id="form2" action="/form_post.html" method="post" data-pjax>
+	<input name="test" type="text" />
+	<input name="test1" type="text" />
+	<input name="submit3" type="submit" value="submit value 3" />
+	<input name="submit" type="submit" value="submit value" />
+	<input name="submit2" type="submit" value="submit value 2" />
+</form>
+
+<script type="text/javascript">
+	$("#main")
+		.pjax("a")
+			.on('submit', 'form[data-pjax]', function(evt) {
+			  $.pjax
+			    .submit(evt, $("#main"));
+			})
+
+	window.parent.iframeLoad(window)
+</script>

test/views/qunit.erb

@@ -11,6 +11,7 @@
   <script type="text/javascript" src="/unit/pjax.js"></script>
   <script type="text/javascript" src="/unit/fn_pjax.js"></script>
   <script type="text/javascript" src="/unit/pjax_fallback.js"></script>
+  <script type="text/javascript" src="/unit/form.js"></script>
 </head>
 <body>
   <div id="qunit"></div>