6

Nos formulários, eu tenho o botão do tipo submit que ao ser clicado vai ser interceptado por jQuery de forma a fazer validações ao conteúdo do formulário antes do envio do mesmo para o PHP processar via Ajax.

Formulário

<?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>';

?>

Código jQuery

/**
 * 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);
    }

  });
}

O problema é que todos os campos do formulário são enviado no POST de Ajax com excepção do botão de submit, sendo o que uso para discernir através do nome do mesmo, qual o formulário a processar no lado do PHP.

Pergunta

Como posso incluir o botão de submit na matriz de POST gerada pelo serialize ?

3 Respostas 3

3

A primeira maneira que me ocorre é adicionar um input escondido depois da verificação e antes do serialize ser chamado.

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) {

Mas também me parece possível usando:

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

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

#1 Usando o plugin Jquery Forms

Eu sei que a pergunta não fala sobre nenhum plugin, mas uma opção seria usar este plugin que já vem com várias funcionalidades prontas relacionadas a submissão via Ajax.

O plugin adiciona o botão clicado automaticamente se estiver aplicado a um formulário, mas mesmo que você queira chamá-lo programaticamente, existe o parâmetro data que permite passar valores adicionais arbitrários.

Exemplo:

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

#2 Concatenar o valor do botão ao resultado da serialização do formulário

Existe a opção de concatenar o valor manualmente (que o Sergio acrescentou na pergunta dele também), mas aqui vai uma versão mais "mastigada":

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

Adicione o attributo "name" ao button(Submit) e o valor serializado será o attributo "value" e o mesmo deve ser o Item clicado no formulário

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .