Как скрыть форму и показать индикатор выполнения при отправке формы

Question

Я просмотрел несколько похожих примеров в StackOverflow, но я не могу заставить это работать. У меня есть событие OnClick, который идет к одной функции, и если это возвращает нормально это идет в другую функцию, и если это хорошо она представит его в другом заявлении, как:

document.forms["input"].submit(); 

поэтому я попытался комментируя это и отправку это функция, называемая showHide()

function showHide() { 
    $('#input').submit(function() { 
     $('#main-content').hide(); 
     $('#progress').show(); 
    }); 
} 

Это похоже на отправку формы, как ожидалось. Я в основном хочу использовать bootstrap и показывать анимированный индикатор выполнения, чтобы пользователь знал, что что-то происходит, потому что иногда представление может занять некоторое время.

Update:

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

 $(function() { 

      $("#progress").show(); 
      }); 

     document.forms["input"].submit(); 

Answer 1

document.forms представляет собой объект, содержащий имена форм а не идентификаторов.

Если ваша форма не имеет имени ввода (<form name="input">...</form>), то селектор jQuery, с которым вы привязываетесь, не будет работать. Вместо этого вам нужно будет использовать $('[name=input']).submit(...).

Answer 2

Не видя больше HTML, это немного сложно устранить. Но похоже, что вы определили функцию, и внутри этой функции вы ожидаете, что элемент будет запускать ее, что не будет работать. Вы могли бы назвать вашу функцию от представить события вашей формы, например, так:

//this assumes you have a form with id "input" 
$('#input').submit(function() { 
    showHide(); 
}); 
function showHide() { 
    $('#main-content').hide(); 
    $('#progress').show();  
} 

Простой JSFiddle demo

Answer 3

отправки формы перезагрузок страницы.

поэтому в голове секции добавить:

$(window).load(function() { 
    // Animate loader off screen 
    console.log("loading"); 
    $("#dvLoading").fadeOut(2000); 
});