web-dev-qa-db-ja.com

フォーム送信前のjquery関数

フォーム送信ボタンがクリックされたときにJqueryを使用して関数を起動しようとしていますが、関数はフォームが実際に送信される前に起動する必要があります。

送信時にdivタグの属性を非表示のテキストフィールドにコピーしてから、フォームを送信しようとしています。

マウスオーバー機能を使用してこれを機能させることができました（送信ボタンがホバーされたとき）が、タッチを使用するモバイルデバイスでは機能しません。

$("#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関数をいじりましたが、フォームが送信される前ではなく関数が実行されるため、値はフィールド内に保存されません。

どうもありがとう

jqueryformsform-submit
59
Matt Price

Onsubmit関数を使用できます。

Falseを返すと、フォームは送信されません。それについて読む こちら 。

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

上記はNOTFirefoxで動作しています。フォームは、最初にコードを実行せずに送信するだけです。また、同様の問題が他の場所で言及されています... この質問 など。回避策は

$('#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
})
49
Waqas Bukhary

ああ...最初に.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);
});

すべてのコメントをありがとう。

2
Matt Price

ボタンの代わりにdivまたはspanを使用し、クリックすると、最後にフォームを送信する関数を呼び出します。

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

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

Wakas Bukharyの回答に基づいて、応答範囲の最後の行を挿入することで非同期にすることができます。

$('#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
  })  
}
0
SoMa

Submit関数を使用するたびにこの間違いを犯したからです。

これはあなたが必要とする完全なコードです：

Id "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
});
0
meck373