Як подати HTML-форму без переспрямування

Якщо у мене є така форма,

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

як я можу подати його без перенаправлення на інший вигляд за допомогою JavaScript / jQuery?

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

Для того, щоб досягти бажаного, вам потрібно використовувати 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");
        }
    });
}

Ви можете досягти цього, перенаправивши форми у actionневидимі <iframe>. Для цього не потрібні сценарії JavaScript або будь-який інший тип.

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

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

Помістіть приховане 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 для майбутнього.

Оскільки всі поточні відповіді використовують 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);
}

Гаразд, я не збираюся розповідати вам чарівний спосіб зробити це, бо цього немає. Якщо для елемента форми встановлено атрибут дії, він переспрямовуватиме.

Якщо ви не хочете, щоб його переспрямовували, просто не встановлюйте жодних дій і не встановлюйте onsubmit="someFunction();"

У ваших someFunction()ви робите все , що ви хочете (з AJAX чи ні) і в фіналі, ви додасте return false;повідомити браузеру не відправити форму ...

Вам потрібно 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;
    });
});

Див. postФункцію jQuery .

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

Також див. preventDefaultФункцію jQuery!

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

<form onsubmit='return false'>
    <!-- ... -->           
</form>

Бажаного ефекту також можна досягти, перемістивши кнопку подання за межі форми, як описано тут:

Запобігти перезавантаженню сторінки та переспрямуванню у формі подання 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>

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

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

Якщо ви контролюєте задній кінець, то використовуйте щось на зразок 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)