Изменить текст на кнопке отправки после отправки

Можно ли изменить текст на кнопке отправки после отправки? Например, на кнопке есть слово «Отправить», и после того, как пользователь отправит форму, на кнопке теперь будет написано «Готово». Если да, то как это делается?

Спасибо!


person user3079066    schedule 25.03.2014    source источник
comment
Что происходит, когда пользователь отправляет форму? Обрабатывается ли он с помощью AJAX или перезагружается вся страница?   -  person raina77ow    schedule 25.03.2014
comment
О, это обрабатывается с помощью AJAX.   -  person user3079066    schedule 25.03.2014
comment
Затем измените его в $.ajax функции успеха (поскольку технически обработка может считаться выполненной только после того, как сервер сообщит об этом).   -  person raina77ow    schedule 25.03.2014


Ответы (4)


Если вы используете AJAX для обработки формы, вы можете просто изменить текст кнопки в обратном вызове успеха $.ajax метод jQuery следующим образом:

$.ajax({
    ...
    success: function(data){
        ...
        // If using an <input/> as the submit button
        $('BUTTON_SELECTOR').prop('value', 'Done');

        // If using a <button/> as the submit button
        $('BUTTON_SELECTOR').text('Done');
        ...
    }
    ...
});

Надеюсь, это поможет!

person dSquared    schedule 25.03.2014

Да, это возможно, и вы можете сделать это следующим образом:

<form name="MyForm">
<input type=button name="b1" value="Submit" onclick="javascript:document.MyForm.b1.value='Done'">
</form>

ПРИМЕР FIDDLE ЗДЕСЬ

person SULTAN    schedule 25.03.2014

$('#id_of_button').click(function( event ) {
    $('#id_of_button').prop('value', 'Text you want to change to');
});

Редактировать: На самом деле, лучшим решением, вероятно, было бы привязать его к обработчику отправки формы.

person Tai    schedule 25.03.2014

Мы можем сделать это, используя приведенный ниже код. Кнопка отправки будет выглядеть как «Идет загрузка, подождите...» со значком счетчика.

<button name='button' type='submit' class='btn btn-primary right' data-disable-with="<i class='fa fa-spinner fa-spin'></i>Uploading please wait...">Save</button>

person Tarun Mahajan    schedule 17.08.2018