Измените POST файлы перед публикацией, используя jQuery

У меня есть форма и обработчик отправки в jQuery.

Когда пользователь отправляет форму, я хочу изменить (добавить) некоторые параметры в запрос POST, прежде чем он будет отправлен от клиента к серверу.

то есть.

Пользователь нажимает 'submit'
Мой jQuery submit hander начинает выполнение...
Я создаю несколько новых пар ключ/значение и добавляю их в полезную нагрузку POST

На данный момент, похоже, мои единственные варианты - использовать $.post() или $('form').append('<input type="hidden" name=... value=...');

Спасибо за любую помощь.

Изменить: я уже прикреплял обработчик отправки к форме; Я пытаюсь отредактировать почтовые ящики между пользователем, нажав кнопку отправки, и запрос, отправленный на сервер.

Ответ 1

Используйте функцию submit() в форме для создания обратного вызова. Если функция возвращает true, форма будет отправлена; если false, форма не будет публиковать.

$('#theForm').submit(function() {
    $("#field1").val(newValue1);
    $("#field2").val(newValue2);
    $(this).append(newFormField);
    return true;
});

и др.

Ответ 2

Высокий уровень:
Когда форма отправляется изначально, это последняя операция, которую выполняет браузер, и выполняется за пределами интерпретатора engine/javascript. Любые попытки перехвата реального запроса POST или GET с помощью JavaScript невозможны, поскольку этот традиционный веб-запрос возникает исключительно между движком браузера и сетевой подсистемой.

Современное решение:
Для веб-разработчиков становится все более популярным отправлять данные формы с помощью XMLHttpRequest - API веб-браузера, который позволяет встроенному разработчику JavaScript получать доступ к сетевой подсистеме браузера.
This is commonly referred to as Ajax

Простое, но общее использование этого будет выглядеть примерно так:

<html>
  <form id="myForm" onsubmit="processForm()">
   <input type="text" name="first_name"/>
   <input type="text" name="last_name"/>
   <input type="submit" value="Submit">
  </form>

  <!--Using jQuery and Ajax-->
  <script type="text/javascript">
    /**
     * Function is responsible for gathering the form input data, 
     * adding additional values to the list, and POSTing it to the
     * server via Ajax.
     */
    function processForm() {
      //Retreive the data from the form:
      var data = $('#myForm').serializeArray();

      //Add in additional data to the original form data:
      data.push(
        {name: 'age',      value: 25},
        {name: 'sex',      value: 'M'},
        {name: 'weight',   value: 200}
      );

      //Submit the form via Ajax POST request:
      $.ajax({
        type: 'POST',
        url:  'myFormProcessor.php',
        data:  data,
        dataType: 'json'
      }).done(function(data) {
        //The code below is executed asynchronously, 
        //meaning that it does not execute until the
        //Ajax request has finished, and the response has been loaded.
        //This code may, and probably will, load *after* any code that
        //that is defined outside of it.
        alert("Thanks for the submission!");
        console.log("Response Data" +data); //Log the server response to console
      });
      alert("Does this alert appear first or second?");
    }
  </script>
</html>

Родной подход: До появления XMLHttpRequest одним из решений было бы просто добавить любые дополнительные данные формы непосредственно в документ.

Используя ту же форму, что и выше, метод добавления jQuery может выглядеть так:

<html>
  <form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
    <input type="text" name="first_name"/>
    <input type="text" name="last_name"/>
    <input type="submit" value="Submit">
  </form>

 <script type="text/javascript">
  /**
   * Function is responsible for adding in additional POST values
   * by appending <input> nodes directly into the form.
   * @return bool - Returns true upon completion to submit the form
   */
  function processForm() {
    $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

    return true; //Submit the form now 
    //Alternatively you can return false to NOT submit the form.
  }
 </script>
</html>

Ответ 3

Я не думаю, что вы можете изменить POST файлы таким образом. Когда обработчик submit запускает там хеш данных формы, которые действительно существуют, которые вы можете добавить или изменить. Я думаю, что вы правы - ваши собственные варианты $.post() сами (что я рекомендовал) или добавление скрытых входов в форму (есть накладные расходы на модификацию DOM, которые вам действительно не нужны).

Ответ 4

Я работаю над этим вопросом в течение одного дня, и я придумал хорошее решение:

вы можете использовать JQuery.clone(), чтобы создать копию формы, которую вы хотите отправить. Затем вы можете внести изменения в копию и, наконец, отправить копию.

Ответ 5

Прикрепите обработчик submit() к форме.

$('form#myForm').submit(myPostHandlingFunction);

Затем отправьте/сделайте сообщение из своей функции. Проще всего было бы просто заполнить пару скрытых входов в форме, а затем вернуть true, чтобы позволить submit, если все выглядит правильно.

Ответ 6

Вы можете подключить событие нажатия кнопки отправки и выполнить свою обработку. Для пар ключ/значение вы можете попробовать скрытый элемент формы.

Ответ 7

$("#frm").submit(function (e) {
    e.preventDefault();
    form = document.getElementById("frm"); //$("#frm")

    $.each(form.elements, function (i, el) {
        el.name = your_new_name;
        el.value = your_new_value;
        //... //el.type, el.id ...
    });

    form.submit();

    return true;
});