How can I include the 'submit' button in the 'POST' array generated by 'serialize'?

Navigation
6

In forms, I have the button type submit which when clicked will be intercepted by jQuery in order to make validations to the content of the form before sending it to the PHP process via Ajax.

Form 

<?php

$html = '
<form action="'.CONF_FORM_ACTION_REGISTRATION.'" method="post" autocomplete="off" class="jForm">
  <p>
    <span class="icon-user"></span>
    <label for="formRegistration-usr">
      '.LANG_WORD_NAME.'
      <span class="msg"></span>
    </label>
    <input id="formRegistration-usr" class="roundCorners jValidate" name="formRegistration-usr" required="required" type="text" placeholder="'.LANG_PLACEHOLDER_NAME.'" data-validation="notEmpty">
  </p>
  <p>
    <span class="icon-envelope"></span>
      <label for="formRegistration-email">
        '.LANG_SENTENCE_YOUR_EMAIL_ADDRESS.'
        <span class="msg"></span>
      </label>
      <input id="formRegistration-email" class="roundCorners jValidate" name="formRegistration-email" required="required" type="text" placeholder="'.LANG_PLACEHOLDER_EMAIL.'" data-validation="email">
  </p>
  <p>
    <span class="icon-key"></span>
      <label for="formRegistration-pwd">
        '.LANG_SENTENCE_YOUR_PASSWORD.'
        <span class="msg"></span>
      </label>
      <input id="formRegistration-pwd" class="roundCorners" name="formRegistration-pwd" required="required" type="password" placeholder="'.LANG_PLACEHOLDER_PASSWORD.'">
  </p>
  <p>
    <span class="icon-key"></span>
    <label for="formRegistration-chkPwd">
      '.LANG_SENTENCE_CONFIRM_YOUR_PASSWORD.'
      <span class="msg"></span>
    </label>
    <input id="formRegistration-chkPwd" class="roundCorners jValidate" name="formRegistration-chkPwd" required="required" type="password" placeholder="'.LANG_PLACEHOLDER_PASSWORD.'" data-validation="chkPwd">
  </p>
  <p class="button">
    <span class="formMsg"></span>
    <input name="formRegistration-smt" id="formRegistration-smt" class="btn_blue roundCorners" type="submit" value="'.LANG_WORD_REGISTER.'">
  </p>
</form>';

?>

jQuery code 

/**
 * PROCESS FORMS
 * Actions associated with the submit of several similar forms.
 */
function processForms() {

  $(".jForm").on("submit", function(e) {
    e.preventDefault();

    var $this    = $(this),
        $formMsg = $this.find(".formMsg");

    if (mandatoryFieldsFilled($this)) {

      $.ajax({
        type    : "POST",
        url     : "/components/inc/ajax/users.ajax.php",
        async   : false,
        data    : $this.serialize(),
        dataType: "json",
        success : function(data) {

          var arr = data;

          if (arr[0]=="success") {
            $formMsg.removeClass("error").addClass("success");
          } else {
            $formMsg.removeClass("success").addClass("error");
          }

          $formMsg.html(arr[1]);

          autoHideModalForm($this, 4000);
        }
      });

    } else {
      $formMsg.removeClass("success").addClass("error").html(LANG_USR_MSG_MANDATORY_FIELD_EMPTY);
    }

  });
}

The problem is that all fields of the form are sent in POST of Ajax with the exception of the submit button, being what I use to discern through the name of the form, which form to process on the PHP side .

Question

How can I include the submit button in the POST array generated by serialize ?

    
asked by anonymous 31.12.2013 / 16:24

3 answers

3

The first way it occurs to me is to add a hidden input after the check and before the serialize is called. 

if (mandatoryFieldsFilled($this)) {

      var inputEscondido = $('input[type=submit]').clone().attr('type', 'hidden');        
      $(this).append(inputEscondido);

      $.ajax({
        type    : "POST",
        url     : "/components/inc/ajax/users.ajax.php",
        async   : false,
        data    : $this.serialize(),
        dataType: "json",
        success : function(data) {

But I also find it possible using: 

//antes do ajax
var inputEscondido = $('input[type=submit]')[0];

// dentro do ajax
data: $this.serialize() + '&' + encodeURIComponent(inputEscondido.name) + '=' + encodeURIComponent(inputEscondido.value),
    
31.12.2013 / 16:55
0

# 1 Using the Jquery Forms plugin

I know the question does not talk about any plugins, but one option would be to use this plugin that already comes with various ready-to-use Ajax-compliant features.

The plugin adds the button automatically clicked if applied to a form , but even if you want to call it programmatically, there is the data parameter that allows you to pass arbitrary additional values .

Example: 

$('.jForm').submit(function() { 
    var $this = $(this);
    var options = { 
        data: { $this.attr('name'): $this.attr("value") }
    };
    $(this).ajaxSubmit(options); 
    return false; 
});

# 2 Concatenate the button value to the form's serialization result

There is the option to concatenate the value manually (which Sergio added in his question too), but here is a more "chewed" version: 

$.ajax({
    ...
    data    : $this.serialize() + '&' + encodeURIComponent($this.attr('name')) +
                  '=' + encodeURIComponent($this.attr("value")),
    ...
    
31.12.2013 / 17:27
0

Add the "name" attribute to the button (Submit) and the serialized value will be the "value" attribute and it should be the Item clicked on the form

    
20.01.2014 / 11:48
Is there a secure way to check the loading of frames in an HTML page? How to create a RESTful API with asynchronous processing and response using C # + Angular (v5 +)