Как записать ответ form.submit

У меня такой код:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

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

Вы не сможете сделать это легко с помощью простого 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);
        }
    })
;

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

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

Ванильный способ Javascript, отличный от 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Тип содержимого For по умолчанию - «application / x-www-form-urlencoded», что соответствует тому, что мы отправляем в приведенном выше фрагменте. Если вы хотите отправить «другие вещи» или как-то изменить это, прочтите здесь некоторые мелкие детали.

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

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

Будущие искатели Интернета:

Для новых браузеров (по состоянию на 2018 год: Chrome, Firefox, Safari, Opera, Edge и большинство мобильных браузеров, но не IE) fetch- это стандартный API, который упрощает асинхронные сетевые вызовы (для которых нам раньше требовались XMLHttpRequestjQuery $.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.)

Docs:

Получить: 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.

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

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

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

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

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

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

Вы можете event.preventDefault()в обработчике кликов для своей кнопки отправки убедиться, что submitсобытие HTML-формы по умолчанию не срабатывает (что и приводит к обновлению страницы).

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

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

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

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

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

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

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

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

<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>

Если вы хотите записать вывод запроса AJAX с помощью Chrome, вы можете выполнить следующие простые шаги:

1. Откройте набор инструментов программистов
2. Подойдите к консоли и где угодно внутри нее
3. В появившемся меню нажмите «Включить ведение журнала XMXHTTPRequest».
4. После этого каждый раз, когда вы делаете запрос AJAX, в вашей консоли будет появляться сообщение, начинающееся с «XHR завершена загрузка: http: // ......».
5. Нажав на появившуюся ссылку, вы откроете вкладку «Ресурсы», где вы сможете увидеть заголовки и содержание ответа!

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

Основываясь на ответе @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), я обрабатываю ошибки публикации формы и успехи:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

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

Теперь пользователи могут войти в систему через другую вкладку и повторить попытку отправки.

Вам нужно использовать AJAX. Отправка формы обычно приводит к загрузке новой страницы браузером.

Вы можете сделать это с помощью javascript и технологии AJAX. Взгляните на jquery и на этот плагин формы . Вам нужно всего лишь включить два js файла, чтобы зарегистрировать обратный вызов для form.submit.

Вы можете сделать это с помощью jQuery и ajax()метода:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>

 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

Прежде всего используйте $ (document) .ready (function ()) внутри этого use ('formid'). submit (function (event)), а затем предотвратите действие по умолчанию, которое вызывает отправку формы ajax $ .ajax ({,,, ,}); он примет параметр u, который вы можете выбрать в соответствии с вашими требованиями, затем вызовите функцию success: function (data) {// сделайте все, что вы хотите, мой пример помещает ответ html в div}

Прежде всего нам понадобится serializeObject ();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

затем вы делаете простой пост и получаете ответ

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

У меня есть следующий код, который эффективно запускается с использованием ajax с данными из нескольких частей

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

Вы можете использовать jQuery.post () и возвращать красиво структурированные ответы JSON с сервера. Это также позволяет вам проверять / дезинфицировать ваши данные непосредственно на сервере, что является хорошей практикой, потому что это более безопасно (и даже проще), чем делать это на клиенте.

Например, если вам нужно отправить html-форму на сервер (в saveprofilechanges.php) с данными пользователя для простой регистрации:

I. Клиентские части:

Часть Ia HTML:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Часть Ib Script:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Серверная часть (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

вы можете сделать это без ajax.

напишите понравившееся ниже.

.. .. ..

а затем в "action.php"

затем после frmLogin.submit ();

читать переменную $ submit_return ..

$ submit_return содержит возвращаемое значение.

удачи.