Два разных сабмита из одной формы

Вы плохо разобрались с jQuery и Ajax, раз у Вас возникают такие вопросы.

jQuery умеет сериализовать форму, а также умеет и доставать значения из указанного элемента.

Предлагаю Вам рассмотреть два варианта решения проблемы.

Сериализация формы

jQuery умеет сериализовать формы двумя способами:

1. в query string - ссылка.
2. в виде JS массива - ссылка.

Пусть есть следующая форма:

<form id="form">
   <input type="text" name="login">
   <input type="password" name="password">
   <input type="submit" value="login" id="form-btn">
</form>

1.Используем jQuery для сериализации в виде query string и отправки формы:

<script>
    $('#form-btn').on('click', function(e) {
        e.preventDefault();
        var serializeStr = $('#form').serialize();
        /*
        * Сериализованная строка имеет вид:
        * login=InputLogin&password=InputPassword
        * то есть идеально подходит для query-параметров (те параметры,
        * которые используются в URL при GET-запросе).
        */
        var actionUrl = '/url/to/get-action?' + serializeStr;
        var httpMethod = 'GET';
        $.ajax({
           method: httpMethod,
           url: actionUrl,
           success: function(response) {
               alert("success: " + response);
           },
           error: function(xhr, data, status) {
               alert("error: " + data);
           }             
        });
    });
</script>

Идеально подходит для отправки запросов методом GET.

2.Используем jQuery для сериализации в виде query string и отправки формы:

<script>
    $('#form-btn').on('click', function(e) {
        e.preventDefault();
        var serializeData = $('#form').serializeArray();
        /*
        * Результат сериализации имеет вид:
        * [
        *  {
        *    name:"login",
        *    value:"inputLogin"
        *  },
        *  {
        *    name:"password",
        *    value:"inputPassword"
        *  },
        *  .....
        * ], 
        * то есть идеально подходит для POST-параметров.
        */
        var actionUrl = '/url/to/post-action';
        var httpMethod = 'POST';
        $.ajax({
           method: httpMethod,
           url: actionUrl,
           data: serializeData,
           success: function(response) {
               alert("success: " + response);
           },
           error: function(xhr, data, status) {
               alert("error: " + data);
           }             
        });
    });
</script>

Плюсы:

• меньше проблем с составлением отправляемых параметров (особенно в случае с serialize();
• если форма имеет большое к-ство вводимых данных - значительно экономит время.

Минусы:

• в случае с serializeArray() недостаточно гибко создает параметры (на стороне сервера их будет не очень удобно перебирать);
• если нужно отправлять данные на разные action'ы, то необходимо разбивать и оборачивать их (данные) в разные формы для сериализации.

Достаем данные из HTML-элементов:

Пусть мы имеем следующую структуру HTML-документа:

<div id="custom-form">
   <div class="custom-form-element">
     <input id="login" type="text">
   </div>
   <div class="custom-form-element">
     <input id="password" type="password">
   </div>
   <div class="custom-form-button">
     <button id="custom-form-btn">Login</button>
   </div>
</div>

На самом деле, предоставленный код выше может быть и формой, но для наглядности - в этом случае формы использовать не будем.

Используем jQuery для отправки данных на сервер:

<script>
   $('#custom-form-btn').on('click', function(e) {
      e.preventDefault();
      var urlLogin = 'path/to/login-action';
      var urlPassword = 'path/to/password-action';
      var login = $('#login').val();
      var password = $('#password').val();
      var loginData = {
         login: login
      }
      var passwordData = {
         password: password
      }
      sendAjax(urlLogin, loginData);
      sendAjax(urlPassword, passwordData);
   });
   function sendAjax(url, data) {
      $.ajax({
         url: url,
         method: 'POST',
         data: data,
         success: function(response) {
            alert('Success: ' + response);
         },
         error: function(xhr, data, status) {
            alert('Error: ' + data);
         }
      });
</script>

И так, выборка данных из HTML-элементов происходит вызова метода val(). На самом деле, метод умеет не только выбирать данные, но и устанавливать их в элемент (сейчас нас это не интересует).

Метод val() можно вызвать на элементах, позволяющих вводить данные (input/select/textarea/etc).

Если вам понадобиться достать данные из других HTML-элементов (таких как <p></p>, <span></span> etc) можете воспользоваться следующими методами:

• text();
• html();

Плюсы:

• очень гибкое решение для формирования данных;
• удобно разбивать данные не по HTML-формах, а в JS-коде;
• более читаемо в коде.

Минусы:

• если данных на форме (в современных реалиях форма - не обязательно <form></form>) много - формирование данных будет занимать некоторое время.