web-dev-qa-db-ja.com

フォーム送信時のページの再読み込みとリダイレクトを防止するajax / jquery

似たような投稿をすべて調べましたが、何も役に立たないようです。これは私が持っているものです

HTML：

_<section>
  <form id="contact-form" action="" method="post">
    <fieldset>
      <input id="name" name="name" placeholder="Name" type="text" />
      <input id="email" name="email" placeholder="Email" type="text" />
      <textarea id="comments" name="comments" placeholder="Message"></textarea>
      <div class="12u">
        <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
        <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
      </div>
      <ul id="response"></ul>
    </fieldset>
  </form>
</section>
_

JavaScript/jQuery：

_function sendForm() {
  var name = $('input#name').val();
  var email = $('input#email').val();
  var comments = $('textarea#comments').val();
  var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
  $.ajax({
    type: 'post',
    url: 'js/sendEmail.php',
    data: formData,
    success: function(results) {
      $('ul#response').html(results);
    }
  }); // end ajax
}
_

私ができないのは、_#form-button-submit_が押されたときにページが更新されないようにすることです。私は_return false;_を試しましたonClick内のpreventDefault()と_return false;_を含むすべての組み合わせを試しました。代わりに_input type="button"_と_type="submit"_を使用してみたところ、同じ結果が得られました。これは解決できません。可能であれば、いくつかの設計上の理由により、ハイパーリンクを使用します。どうぞよろしくお願いいたします。

javascriptphpjqueryhtmlajax
7
Vettan Maximillion

次のように関数を変更します。

function sendForm(e){
  e.preventDefault();
}

そしてコメントの言及として、イベントを渡します：

onclick = sendForm(event);

アップデート2：

$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});
27
What have you tried
function sendForm(){
    // all your code
    return false;
}
4
Samuel Cook

使ってみましたか

function sendForm(event){
    event.preventDefault();
}
2
stf

私はまた、この問題の解決策を見つけることに少し従事しており、これまでのところ、私が見つけた最良の作業方法はこれです-

$ .ajax（）ではなく、XHRを使用して任意のURLにリクエストを送信してみてください...
例-

<form method="POST" enctype="multipart/form-data" id="test-form">

var testForm = document.getElementById('test-form');
testForm.onsubmit = function(event) {
event.preventDefault();

var request = new XMLHttpRequest();
// POST to any url
request.open('POST', some_url, false);

var formData = new FormData(document.getElementById('test-form'));
request.send(formData);


これにより、ページの再読み込みなしでデータが正常に送信されます。

2
Kaif Khan

シンプルで完全な作業コード

<script>
    $(document).ready(function() {
        $("#contact-form").submit(function() {
            $("#loading").show().fadeIn('slow');
                $("#response").hide().fadeOut('slow');
                 var frm = $('#contact-form');
                 $.ajax({
                     type: frm.attr('method'),
                     url: 'url.php',
                     data: frm.serialize(),
                     success: function (data) {
                         $('#response').html(data);
                         $("#loading").hide().fadeOut('slow');
                         $("#response").slideDown();
               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

#loadingは、フォームの処理中に表示される画像または何かであり、コードを使用してID contact-form

1
firstmadcoding

これへのアプローチ方法：formタグ全体を削除し、div内にinput、textareaタグなどのすべてのフォーム要素を配置し、1つのボタンを使用してJavaScript関数を呼び出しました。このような：

<div id="myform">
<textarea name="textarea" class="form-control">Hello World</textarea>
<button type="submit" class="btn btn-primary"
                            onclick="javascript:sendRequest()">Save
                            changes</button>
<div>

JavaScript：

function sendRequest() {

        $.ajax({
            type: "POST",
            url: "/some/url/edit/",
            data: {
                data: $("#myform textarea").val()
            },
            success: function (data, status, jqXHR) {
                console.log(data);
                if (data == 'success') {
                    $(`#mymodal`).modal('hide');
                }
            }
        });

        return true;
}

AJAXを使用して実際のリクエストを送信するときにformを使用する理由を考えました。この方法では、フォーム要素のリセットなどを行うために追加の作業が必要になる場合がありますが、私にとってはうまくいきます。

注：上記の回答はこれよりもエレガントですが、私の使用例は少し異なりました。私のウェブページには多くのフォームがあり、すべての送信ボタンにイベントリスナーを登録するのが良い方法だとは思いませんでした。そこで、各送信ボタンにsendRequest（）関数を呼び出させるようにしました。

0
Yashas

フォームが送信されないようにする別の方法は、ボタンをフォームの外側に配置することです。動作していた既存のコードがあり、動作しているコードに基づいて新しいページを作成し、次のようにhtmlを記述しました。

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
    <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
</form>

このフォームは、上記の望ましくないリダイレクトを引き起こします。 htmlを以下に示すものに変更すると、問題が修正されました。

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
0
John

私の考えは非常にシンプルなので、だれにでもよく理解してもらえると思います。

  1. 必要なフォーム自体にIDを指定するか、他の方法で取得できます。

  2. フォーム入力「送信」で、JavaScriptファイルからonclickメソッドを呼び出します。

  3. このメソッドでは、変数にfrom id、addEventListenerを参照させ、「click」ではなく「submit」に対してpreventDefaultメソッドを作成します。
    これを明確にするには、これを参照してください：

    // element refers to the form DOM after you got it in a variable called element for example:
element.addEventListener('submit', (e) => {
   e.preventDefault();
   // rest of your code goes here
});

    つまり、クリックイベントによる送信ボタンを処理した後、送信イベントによってフォームを処理するという考え方です。

このメソッド内のニーズが何であれ、更新せずに動作します:)
正しい方法でajaxを処理するようにしてください。これで完了です。

もちろんフォームでのみ機能します。

0
Ahmed Mabrouk