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

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

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

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

7 57
javascript forms html jquery

7 ответов:

для того, чтобы достичь того, чего вы хотите, вам нужно использовать 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");
        }
    });
}
46

вы можете достичь этого, перенаправив форму 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.

67

место скрытый 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 для будущего.

13

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

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

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

4

смотрите jQuery .

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

см. также preventDefault функция, из jQuery!

1

вам нужен 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;
    });
});
1

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

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