Як зафіксувати відповідь 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.

Ванільний спосіб, який не є 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's типом контенту за замовчуванням є "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, який спрощує асинхронні мережеві дзвінки (для яких ми звикли 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 .)

Документи:

Вибір: 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 для події "подати".

Я не впевнений, що ви розумієте, що подає () робить ...

Коли ви робите 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 Logging"
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();
            }
        });
    });
});

Блок-котирування

Найбільше використовувати $ (document) .ready (function ()) всередині цього використання ('formid'). submit (функція (подія)), а потім запобігти дії за замовчуванням aftyer, які викликають подання форми ajax $ .ajax ({,,, ,}); знадобиться параметр u, який можна вибрати відповідно до вашої вимоги, тоді зателефонуйте успішному функціонуванню: функція (дані) {// зробіть все, що ви хочете, щоб мій приклад розмістити відповідь 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-форму на сервері (для збереженняprofilechanges.php) з даними користувача для простої реєстрації:

I. Запчастини клієнта:

Частина 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;
    }
}

це можна зробити без аяксу.

напишіть свої подібні нижче.

.. .. ..

а потім у "action.php"

потім після frmLogin.submit ();

читати змінну $ submit_return ..

$ submit_return містить повернене значення.

Щасти.