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

100

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

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

как я могу отправить его без перенаправления на другое представление с помощью JavaScript / jQuery?

Я прочитал много ответов из Stack Overflow, но все они перенаправляют меня в представление, возвращаемое функцией POST.

Duke Nuke
источник
Вам нужен запрос XHR (AJAX)
Стерлинг Арчер
2
XHR / AJAX - это один способ - он отправляет сообщение и получает ответ за кулисами, поэтому браузер никогда не покидает страницу, на которой он находится. Другой способ - перенаправление на стороне сервера после обработки сообщения, которое зависит от того, какую серверную технологию вы используете.
Стивен П.
@StephenP Я использую ASP.NET MVC 5.1.
Duke Nuke
@Duke, все, что я говорю, - это несколько подходов (ajax или server-redirect), и ваш выбор зависит от ваших потребностей. Современные сайты, скорее всего, захотят использовать ajax. Следует также отметить , что все эти ответы говорят вам нужно JQuery - JQuery здорово , но есть это , по сути, другие способы сделать Аякса ... хотя я бы на самом деле использовать JQuery сам.
Стивен П.
1
Мой способ прост, чист и элегантен, и это всего лишь 2 строки кода. Он не использует сценарии и работает в HTML4 и выше, даже если JavaScript отключен.
Исса Чанзи,

Ответы:

75

Чтобы добиться желаемого, вам необходимо использовать jQuery Ajax, как показано ниже:

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/Car/Edit/17/',
        type: 'post',
        data:$('#myForm').serialize(),
        success:function(){
            // Whatever you want to 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 want to do after the form is successfully submitted
       }
   });
}

Окончательное решение

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

function SubForm (){
    $.ajax({
        url: '/Person/Edit/@Model.Id/',
        type: 'post',
        data: $('#myForm').serialize(),
        success: function(){
            alert("worked");
        }
    });
}
Амин Джафари
источник
Это отлично сработало, проблема в том, что я не хочу, чтобы он автоматически (всегда) отправлялся таким образом. Я хотел бы иметь функцию с именем, чтобы делать то, что вы разместили в своем ответе. Поэтому я могу вызвать его вручную, когда захочу, чтобы он опубликовал форму. Как показано ниже, я могу дать имя вызываемой функции. @Html.ActionLink("Add a Report", "Create", "Reports", new { carId = Model.Id }, new { onclick = "FUNCTION_WHICH_SUBMITES_FORM()" })
Duke Nuke
Это сработало:function SubForm (){ alert("1"); //e.preventDefault(); $.ajax({ url:'/Car/Edit/@Model.Id/', type:'post', data:$('#myForm').serialize(), success:function(){ alert("fasf"); } }); }
Duke Nuke
По какой-то причине ваше второе решение не сработало, но то, что я опубликовал в последнем комментарии, сработало. Я добавлю свое решение в ваш пост, потому что только благодаря вам я смог этого добиться.
Duke Nuke
1
второй тоже должен работать, в нем может быть что-то еще, но если вы нашли решение, нам не нужно идти по этому пути прямо сейчас! рад, что помог;)
Амин Джафари
Спасибо, этот ответ также помог мне вставить собственный текст вместо формы после
Анупам
123

Вы можете добиться этого, перенаправив форму actionна невидимый объект <iframe>. Не требует JavaScript или каких-либо других скриптов.

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- Form body here -->
</form>
Исса Чанзи
источник
1
Это круто. Но как я могу что-то сделать после отправки формы? т.е. текстовые поля формы должны быть пустыми, фокус возвращается к первому полю и т.д.?
Пранджал Чоладхара,
2
Есть какой-то javascript, который может это сделать. Просто измените <input type='submit'...к <input type='reset'и добавитьonclick='document.forms["myForm"].submit();'>
Исса Chanzi
Прекрасный ответ!
Отлично
1
Будьте осторожны, это может привести к перезагрузке страницы, на которой находится ваша форма, в iframe, что может вызвать проблемы с производительностью, если вы создаете приложение или большой веб-сайт.
Александр Добрикур,
24

Поместите скрытый 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 для перспективного развития.

Стивен Блэк
источник
Согласно MDN, такое поведение targetполностью допустимо, поэтому AJAX по-прежнему необязателен.
Даниэль Де Леон
22

Поскольку все текущие ответы используют 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);
}
Ethuil UI
источник
2
Спасибо огромное!
Джошуа Эванс
Снимаю перед вами шляпу. Я часами пытался понять, как заставить jquery отправлять форму в серверную часть nginx с параметром contentType = false и всегда получать в результате 415. Это было единственное найденное мной решение, которое решило мою конкретную проблему.
user12066
8

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

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

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

Аншу Двибхаши
источник
1
Есть волшебный способ сделать это. Установите целевой атрибут, чтобы форма перенаправлялась куда-то, кроме текущего кадра. Если вы добавите невидимый iframe для подобных вещей на свои страницы. Все очень просто.
Issa Chanzi
5

Для этого вам нужен 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 in 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;
    });
});
Боян Петковски
источник
5
Есть ли какая-то конкретная причина, по которой вы не делаете отступ в этом исходном коде? Похоже, код из шестидесятых годов до изобретения C. Я думал, мы давно с этим справились.
Alfe
3

Однострочное решение с 2020 года, если ваши данные не предназначены для отправки как multipart/form-dataили application/x-www-form-urlencoded:

<form onsubmit='return false'>
    <!-- ... -->           
</form>
Александр Добрикур
источник
3
Если вы объедините это с OP action="...", это эффективно предотвратит переключение страниц, но также предотвратит отправку данных по сети.
Кев,
@Kev Я лично отправляю свои данные через JS XHR, поэтому я не хочу перенаправления страниц, потому что это приложение JS
Александр Добрикур,
@Kev Извините, я должен был упомянуть это
Александр Добрикур,
2

См. postФункцию jQuery .

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

Также посмотрите preventDefaultфункцию jQuery!

Надь Вильмос
источник
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>
Джон
источник
1

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

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");
});
Jmojico
источник
0

Если вы управляете серверной частью, используйте что-то вроде response.redirectвместо response.send.

Вы можете создавать собственные HTML-страницы для этого или просто перенаправлять на то, что у вас уже есть.

В Express.js:

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)
etw3
источник