78159


Rails で作ったフォームのサブミット時に  
JS 上に動的にもってるデータを追加して送信したいです

<https://api.jquery.com/ajaxSend/>  
これでできそうな気がしたんですが

[code]

    $( document ).ajaxSend(function() {
      console.log('ajaxSend');
    });
    
[/code]

とかいても console.log が表示されません

[code]

    $('form').on("ajax:beforeSend", (event) => {
      console.log(event);
    }
    
[/code]

[code]

    document.getElementById('test_form').addEventListener('ajax:before', (event) => {
       console.log(event);
    })
    
[/code]

とかけば送信前にトリガーはできるんですが event 内にパラメータらしきものがみあたらないので  
どうやってパラメータを追加すればいいかわからない状態です

トリガー内で hidden_fiels を追加してそこに値をうめこんで  
あとはフォームに任せればできなくはないんですが  
諸事情で DOM 側を変更したくないです

jquery 3.6.0 ですが native JS でもいいです  
よろしくお願いします


CC BY-SA 4.0
2021-07-13T12:20:20.943
78157
2021-07-13T14:04:03.430
question
javascript jquery
DOM を変更せずに ajax 送信時にパラメータを追加したい


DOMを変更しないとなると、[`FromData`](https://developer.mozilla.org/ja/docs/Web/API/FormData)を使うのが妥当かと思います。方法は2通り思い浮かびます。

●「[form 要素に紐づけた FormData
を使用する](https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript#using_formdata_bound_to_a_form_element)」にあるように、`<form>`から`FormData`オブジェクトを作り、そこにパラメータを追加して、XHR
でフォーム送信します。  
通常のフォームのようにページ遷移はしないので、ページを切り替えたい場合は自力でなんとかする必要があります。

●`formdata` イベントを使います。

[code]

    form.addEventLiseter('formdata', e => {
      e.formData.append('param1', 'data1');
    });
    
[/code]

フォームは通常通り送信されて、ページ遷移も通常通り起きます。

IEとSafariは未対応です。


CC BY-SA 4.0
2021-07-13T14:04:03.430
78159
2021-07-13T14:04:03.430
3475
78157
answer