web-dev-qa-db-ja.com

リダイレクトなしでhtmlフォームを送信する方法は？

このようなフォームがある場合：

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

javaScript/Jqueryで別のビューにリダイレクトせずに送信する方法StackOverflowから多くの回答を読みましたが、それらはすべてPOST関数によって返されるビューにリダイレクトされます。

javascriptjqueryhtmlforms
71
Duke Nuke

目的を達成するには、以下のように jquery ajax を使用する必要があります。

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/Car/Edit/17/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            //whatever you wanna do after the form is successfully submitted
        }
    });
});

UPDATED：（以下のコメントに基づいて）

これを試してください：

function SubForm(e){
    e.preventDefault();
    var url=$(this).closest('form').attr('action'),
    data=$(this).closest('form').serialize();
    $.ajax({
        url:url,
        type:'post',
        data:data,
        success:function(){
           //whatever you wanna do after the form is successfully submitted
       }
   });
}

UPDATE 2（OPはこれが彼の最終的な解決策であったため、この部分を追加しました）

これは完璧に機能しました。この関数をHtml.ActionLink(...)から呼び出します

function SubForm (){
    $.ajax({
        url:'/Person/Edit/@Model.Id/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            alert("worked");
        }
    });
}
57
Amin Jafari

それを実現するには、フォームのactionを<iframe>にリダイレクトします。 JavaScriptやその他の種類のスクリプトは必要ありません。

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- form body here -->
</form>

本当に巧妙であれば、CSSでposition=absoluteとz-indexの値をいじって、フレームがレンダリングされないようにすることができます。それが重要な場合は、とにかくAJAXを使用した方が良いかもしれません。

83
Issa Chanzi

非表示のiFrameをページの下部に配置し、フォームにtargetを挿入します。

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

早くて簡単。 target属性はまだ広くサポートされています（HTML5ではサポートされています）が、HTML 4.01では非推奨になったことに留意してください。ですから、あなたは本当に将来に備えてajaxを使うべきです。

19
Steven Black

さて、私はあなたにそれを行う魔法の方法を教えません。フォーム要素にアクション属性が設定されている場合、リダイレクトします

リダイレクトしたくない場合は、アクションを設定せずにonsubmit="someFunction();"を設定するだけです

someFunction()で（AJAXを使用して、または使用せずに）必要な処理を行い、最後にreturn false;を追加して、ブラウザーにフォームを送信しないように指示します...

6
Anshu Dwibhashi

それを実現するには、ajaxが必要です。このようなもの

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
        if(name==''||email==''||password==''||contact=='')
        {
            alert("Please Fill All Fields");
        }
        else
        {
            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});
3
Bojan Petkovski

現在の答えはすべてjQueryまたはiframeでのトリックを使用しているため、単純なJavaScriptだけでメソッドを追加しても害はないと考えられます。

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}
3
Ethuil UI

JQueryのpost関数を参照してください。

ボタンを作成し、onClickListener（$('#button').on('click', function(){});）を設定し、関数でデータを送信します。

また、jQueryのpreventDefault関数を参照してください！

2
Nagy Vilmos

ここで説明するように、送信ボタンをフォームの外側に移動することでも、目的の効果を実現できます。

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

このような：

<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>
1
John

このスニペットを使用すると、フォームを送信してリダイレクトを回避できます。代わりに、成功関数を引数として渡し、必要なことを行うことができます。

function submitForm(form, successFn){
    if (form.getAttribute("id")!='' || form.getAttribute("id")!=null){
        var id = form.getAttribute("id");
    } else {
        console.log("Form id attribute was not set; the form cannot be serialized");
    }

    $.ajax({
        type: form.method,
        url: form.action,
        data: $(id).serializeArray(),
        dataType: "json",
        success: successFn,
        //error: errorFn(data)
    });
}

そして、ただやる：

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
    console.log("Form submitted");
});
0
cepix