Функция Jquery ПЕРЕД отправкой формы

Я пытаюсь запустить функцию с помощью JQuery, когда нажата кнопка отправки формы, но функция должна запускаться до того, как форма фактически отправлена.

Я пытаюсь скопировать некоторые атрибуты тега div в скрытые текстовые поля при отправке, а затем отправить форму.

Мне удалось заставить это работать с помощью функции mouseover (когда кнопка отправки зависла), но это не будет работать на мобильных устройствах, используя touch.

$("#create-card-process.design #submit").on("mouseover", function () {
    var textStyleCSS = $("#cover-text").attr('style');
    var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
    $("#cover_text_css").val(textStyleCSS);
    $("#cover_text_background_css").val(textbackgroundCSS);
});

Я играл с функцией .submit, но значения не сохраняются в полях, когда функция запускается, когда форма отправляется, а не раньше.

Большое спасибо

Ответ 1

Вы можете использовать функцию onsubmit.

Если вы вернете false, форма не будет отправлена. Прочитайте об этом здесь.

$('#myform').submit(function() {
  // your code here
});

Ответ 2

$('#myform').submit(function() {
  // your code here
})

Выше НЕ работает в Firefox. Форма будет просто отправлена без запуска вашего кода. Также подобные проблемы упоминаются в других местах... например, этот вопрос. Обход будет

$('#myform').submit(function(event) {

 event.preventDefault(); //this will prevent the default submit

  // your code here (But not asynchronous code such as Ajax because it does not wait for response and move to next line.)

 $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
})

Ответ 3

Aghhh... Мне не хватало кода, когда я сначала попробовал функцию .submit.....

Это работает:

$('#create-card-process.design').submit(function() {
var textStyleCSS = $("#cover-text").attr('style');
var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
$("#cover_text_css").val(textStyleCSS);
$("#cover_text_background_css").val(textbackgroundCSS);
});

Спасибо за все комментарии.

Ответ 4

Вы можете использовать некоторый div или span вместо кнопки, а затем щелкнуть по вызову некоторой функции, которая отправляет форму в конце.

<form id="my_form">
   <span onclick="submit()">submit</span>
</form>

<script>
   function submit()
   {   
       //do something
       $("#my_form").submit();
   }
</script>

Ответ 5

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

Это полный код, который вам нужен:

Добавьте идентификатор " yourid" в тег формы HTML.

<form id="yourid" action='XXX' name='form' method='POST' accept-charset='UTF-8' enctype='multipart/form-data'>

код jQuery:

$('#yourid').submit(function() {
  // do something
});

Ответ 6

Основываясь на ответе Вакаса Бухари, вы можете сделать его асинхронным, поместив последнюю строку в область ответа.

$('#myform').submit(function(event) {

  event.preventDefault(); //this will prevent the default submit
  var _this = $(this); //store form so it can be accessed later

  $.ajax('GET', 'url').then(function(resp) {

    // your code here 

   _this.unbind('submit').submit(); // continue the submit unbind preventDefault
  })  
}