Как мне получить ответ от form.submit

Question

У меня есть следующий код:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Я хочу получить ответ html form1.submit? Как мне это сделать? Могу ли я зарегистрировать любую функцию обратного вызова для метода form1.submit?

Answer 1

Вы не сможете сделать это легко с простым javascript. Когда вы публикуете форму, входные данные формы отправляются на сервер, и ваша страница обновляется - данные обрабатываются на стороне сервера. То есть функция submit() фактически ничего не возвращает, она просто отправляет данные формы на сервер.

Если вы действительно хотите получить ответ в Javascript (без обновления страницы), вам нужно будет использовать AJAX, а когда вы начнете говорить об использовании AJAX, вам потребуется , чтобы использовать библиотека. jQuery , безусловно, самый популярный и мой личный фаворит. Есть отличный плагин для jQuery под названием Form , который будет делать именно то, что звучит так, как вы хотите.

Вот как вы будете использовать jQuery и этот плагин:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Answer 2

Альтернативой Ajax является установка невидимого <iframe> в качестве цели вашей формы и чтение содержимого этого <iframe> в его обработчике onload. Но зачем беспокоиться, когда есть Ajax?

Примечание: Я просто хотел упомянуть об этой альтернативе, поскольку некоторые ответы утверждают, что невозможно достичь этого без Ajax.

Answer 3

Я делаю это таким образом, и это работает.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

Answer 4

Способ не-jQuery, извлеченный из комментария 12me21: ​​

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Для POST тип контента по умолчанию - "application / x-www-form-urlencoded", который соответствует тому, что мы отправляем в приведенном выше фрагменте. Если вы хотите отправить «другие вещи» или настроить его, см. здесь для некоторых мельчайших подробностей.

Answer 5

Я не уверен, что вы понимаете, что делает submit () ...

Когда вы делаете form1.submit();, информация о форме отправляется на веб-сервер.

WebServer сделает все, что должен, и вернет клиенту совершенно новую веб-страницу (обычно ту же самую страницу с измененными данными).

Таким образом, вы никак не можете «поймать» возврат действия form.submit ().

Answer 6

Будущие интернет-поисковики:

Для новых браузеров (по состоянию на 2018 г .: Chrome, Firefox, Safari, Opera, Edge и большинство мобильных браузеров, но не IE), fetch - это стандартный API, упрощающий асинхронные сетевые вызовы ( для которого нам раньше требовалось XMLHttpRequest или jQuery's $.ajax).

Вот традиционная форма:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Если вам передана форма, подобная приведенной выше (или вы создали ее, потому что это семантический html), то вы можете заключить код fetch в прослушиватель событий, как показано ниже:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Или, если, как и в случае с оригинальным постером, вы хотите вызвать его вручную без события отправки, просто поместите туда код fetch и передайте ссылку на элемент form вместо использования event.target.)

Документы:

Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Другое: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Эта страница в 2018 году не упоминает выборку (пока). Но упоминается, что прием target = "myIFrame" устарел. И у него также есть пример form.addEventListener для события submit.

Answer 7

Обратного звонка нет. Это как перейти по ссылке.

Если вы хотите перехватить ответ сервера, используйте AJAX или опубликуйте его в Iframe и возьмите то, что появляется там после события onload() iframe.

Answer 8

Это мой код для этой проблемы:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

Answer 9

    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

Answer 10

Вы можете event.preventDefault() в обработчике кликов для кнопки отправки, чтобы гарантировать, что событие HTML 100 * по умолчанию не запускается (именно это приводит к обновлению страницы).

Другой альтернативой может быть использование хакерской разметки формы: здесь используются <form> и type="submit", которые мешают желаемому поведению здесь; поскольку это в конечном итоге приводит к событиям клика, обновляющим страницу.

Если вы все еще хотите использовать <form> и не хотите писать собственные обработчики кликов, вы можете использовать метод jQuery ajax, который абстрагирует от вас всю проблему, предоставляя методы обещания для success error и т. Д.

---

Напомним, что вы можете решить вашу проблему одним из следующих способов:

• предотвращение поведения по умолчанию в функции обработки с помощью event.preventDefault()

• использование элементов, которые не имеют поведения по умолчанию (например, <form>)

• с использованием jQuery ajax

---

(я только что заметил, что этот вопрос относится к 2008 году, не уверен, почему он появился в моей ленте; во всяком случае, надеюсь, это четкий ответ)