it-swarm.com.ru

Как отправить HTML-форму без перенаправления?

Если у меня есть такая форма:

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

как отправить его без перенаправления в другое представление с помощью JavaScript/Jquery? Я прочитал множество ответов из StackOverflow, но все они перенаправляют меня на представление, возвращаемое функцией POST.

63
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
        }
    });
});

ОБНОВЛЕНО: (на основе комментариев ниже)

попробуй это:

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
       }
   });
}

ОБНОВЛЕНИЕ 2 (ОП добавил эту часть, так как это было его окончательное решение)

Это сработало без нареканий. Я вызываю эту функцию из Html.ActionLink(...)

function SubForm (){
    $.ajax({
        url:'/Person/Edit/@Model.Id/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            alert("worked");
        }
    });
}
50
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>

если вы действительно хитры, вы можете поработать со значениями position=absolute и z-index в CSS, чтобы убедиться, что фрейм не отображается. Однако, если это так важно, вам лучше использовать AJAX в любом случае.

75
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 для будущего.

18
Steven Black

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

Если вы не хотите, чтобы он перенаправлял, просто не устанавливайте никаких действий и установите onsubmit="someFunction();"

В своей функции someFunction() вы делаете все, что хотите, (с AJAX или нет), а в конце вы добавляете return false;, чтобы сообщить браузеру не отправлять форму ...

5
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

Смотрите функцию post в jQuery.

Я бы создал кнопку, установил onClickListener ($('#button').on('click', function(){});) и отправил данные в функцию.

Также см. Функцию preventDefault в jQuery!

2
Nagy Vilmos

Используя этот фрагмент, вы можете отправить форму и избежать перенаправления. Вместо этого вы можете передать функцию успеха в качестве аргумента и делать все, что захотите.

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

Желаемый эффект также может быть достигнут путем перемещения кнопки отправки за пределы формы, как описано здесь:

Предотвратить перезагрузку страницы и перенаправить на форму отправить 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>
0
John