как привязать кнопку загрузки bootstrap к успеху / ошибке при отправке формы

#javascript #jquery #html #twitter-bootstrap-3

#javascript #jquery #HTML #twitter-bootstrap-3

Вопрос:

Я пытаюсь привязать кнопку начальной загрузки с состоянием загрузки к форме. Я бы хотел, чтобы кнопка сохраняла состояние загрузки данных до тех пор, пока форма не будет отправлена. Если форма выдает ошибку, загрузка данных в идеале должна прекратиться или отобразиться другое сообщение. Как я могу этого добиться?

Мой код для кнопки:

http://www.bootply.com/128762

какой был бы наилучший подход для формы, которая не является ajax?

Ответ №1:

Вы смотрите что-то вроде этого ниже

 $('#loading-example-btn').click(function () {
  if($("#txt").val().length > 0)
    { 
    var btn = $(this)
   $(this).attr('value','Loading');                           
    }
    else 
    {
    $(this).attr('value','error On Submit'); 
    }
    
  });  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="test" id="txt">
<input type="submit" id="loading-example-btn" value="Submit" data-loading-text="Loading...">
</form>