Обновить статус формы, изменив текст кнопки «Отправить»

Question

У меня небольшой JS-код, который не работает в соответствии с моими потребностями.

На самом деле мой бэкэнд-PHP-код содержит так много функций, которые я хочу обработать, нажав кнопку «Отправить», а между тем я хочу показать состояние «Сканирование» вместо кнопки «Отправить», а после полной обработки данных затемЯ хочу показать статус «Завершено» вместо кнопки «Отправить».

<script>
  $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();
      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
        success: function () {
          $(#response).show();
          $(#form).hide();
        }
      });
    });
  });
</script>

Answer 1

Вы можете просто показать все, что вы хотите, когда пользователь нажимает кнопку.И когда вы получите ответ, вы можете изменить на что угодно.Что-то вроде.

Это всего лишь пример насмешки над вашим ajax-запросом.

var $button = $("#btn");

$button.click(function() {

    $button.text("Scanning...");

    var promise = new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('foo');
        }, 5000);
    });
    
    promise.then(function(){
     $button.text("Done");
    })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn"> Submit </button>

Answer 2

Вы можете использовать beforeSend ...

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

Можно сослаться здесь для более подробной информации.

И вы можете следовать моему коду ниже для вашей легкости.

..

Javascript:

<script>
  $(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();

      let submitBtnEl = $(this).find('button[type="submit"]'); //submit button element

      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
        beforeSend: function( xhr ) {
            submitBtnEl.html('Scanning'); //the submit button text will change after click submit
        },
        success: function () {
            $(#response).show();
            $(#form).hide();
            submitBtnEl.html('Completed'); //the submit button text will change after the form is completely submit
        }
      });
    });
  });
</script>

.

.

HTML:

<form>
    <input type="text" name="input1" />
    <button type="submit">Submit</button>
</form>

.

.

Для удобства вы можете попробовать код на эта скрипка