Как при помощи json, обработать 2 submit, метод POST

108

17 апреля 2021, 21:40

Есть html форма с 2-мя submit:

<form id="addCommentForm" method="POST" action=""> 
  <label for="name">Имя</label> 
  <input type="text" name="name" id="name"> 
 
  <label for="email">E-mail</label> 
  <input type="text" name="email" id="email"> 
 
  <label for="messageBody">Текст сообщения</label> 
  <textarea name="messageBody" id="messageBody" cols="30" rows="10"></textarea> 
  <div class="buttons"> 
    <input type="submit" id="preview" value="Предворительный просмотр"> 
    <input type="submit" id="submit" value="Отправить"> 
  </div> 
</form>

Данные передаю в формате json в php скрипт, где валидацирую. Если есть ошибки вывожу такие сообщения, если всё верно на страницу добавляется комментарий и заносится информация в БД:

$(function() { 
  $('#addCommentForm').bind('submit', function() { 
    $('.error').remove(); 
    $.ajax({ 
      type: 'post', 
      url: "submit.php", 
      dataType: 'json', 
      data: $(this).serialize(), 
      success: function(msg) { //Данные отправлены успешно 
        if (msg.success) { 
 
          $(msg.html).hide().insertAfter('#addCommentContainer').slideDown("slow"); 
 
          $('#addCommentForm')[0].reset(); 
        } else { 
          $.each(msg.errors, function(k, v) { 
            $('label[for=' + k + ']').append('<span class="error">' + v + '</span>'); 
          }); 
        } 
      } 
    }); 
    return false; 
  }); 
});

На данном этапе всё работает, но мне нужно чтобы работало 2 кнопки. Первая для отправки, а вторая, ВНИМАНИЕ, для предварительного просмотра своего сообщения. Как ни крути, но всё равно надо на валидацию проверять. Какой json мне необходимо сформировать с одинаковыми проверками на валидацию, но на разные условия успеха?

Answer 1

Не знаю почему мне не ответили, и вопрос вроде актуальный. Если кто-то столкнётся с такой же проблемой, вот решение: в html :

<form id="addCommentForm" method="POST" action=""> 
  <label for="name">Имя</label> 
  <input type="text" name="name" id="name"> 
  <label for="email">E-mail</label> 
  <input type="text" name="email" id="email"> 
  <label for="messageBody">Текст сообщения</label> 
  <textarea name="messageBody" id="messageBody" cols="30" rows="10"></textarea> 
  <div class="buttons"> 
    <button type="submit" id="preview">Предворительный просмотр</button> 
    <button type="submit" id="submit-btn">Отправить</button> 
  </div> 
</form>

Вот что писать в скрипте:

$(function() { 
  $('#submit-btn').on('click', function(e) { 
    e.preventDefault(); 
    $('.error').remove(); 
    $.ajax({ 
      type: 'post', 
      url: "submit.php", 
      dataType: 'json', 
      data: $('#addCommentForm').serialize(), 
      success: function(msg) { //Данные отправлены успешно 
        if (msg.success) {} else {} 
      } 
    }); 
  }); 
  $('#preview').on('click', function(e) { 
    e.preventDefault(); 
    $('.error').remove(); 
    $.ajax({ 
      type: 'post', 
      url: "submit.php", 
      dataType: 'json', 
      data: $('#addCommentForm').serialize(), 
      success: function(msg) { //Данные отправлены успешно 
        if (msg.success) {} else {} 
      } 
    }); 
  }); 
});

Answer 2

Вот вариант, корорый избегает дублирования кода:

$(function() { 
  $('#submit-btn, #preview-btn').on('click', function(e) { 
    var id = $(this).attr("id"); 
    e.preventDefault(); 
    $('.error').remove(); 
    $.ajax({ 
      type: 'post', 
      url: "submit.php", 
      dataType: 'json', 
      data: $('#addCommentForm').serialize() + "&submit=" + id, 
      success: function(msg) { //Данные отправлены успешно 
        if (msg.success) { 
          if (id == "submit-btn") { 
            $(msg.html).hide().insertAfter('#addCommentContainer').slideDown("slow"); 
          } else { 
 
          } 
          $('#addCommentForm')[0].reset(); 
        } else { 
 
          $.each(msg.errors, function(k, v) { 
            $('label[for=' + k + ']').append('<span class="error">' + v + '</span>'); 
          }); 
        } 
      } 
    }); 
 
  }); 
});

В data: передаёте все значения из формы + id нажатой кнопки(+ "&submit=" + id). И уже в своём php получаете значение id нажатой кнопки($_POST['submit']) и спокойно работаете. Этот вариант гораздо лаконичнее и избегает большого дублирования кода.