How do I change the text of a button when submitting a form?

Navigation
0

With the code below, the submit form button should change text to "Loading ..." when pressed, but this does not happen. Why? 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Troca Games - Games com economia</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">

  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function(){
	    $("form").submit(function(){
	      $("#bt_login").attr("value","Carregando...");  
	    });
	  });
	</script>
</head>	
<body>
<div style="padding:15px; text-align:center">
    <img src="images/logo.png" width="100%"/>
    <br/>
    
    <?php 
		if($_GET['access'])
			echo '<div class="login_failed"><h3>Usuário e/ou senha incorreto(s)</h3></div>'
	  ?>
    
    <form action="<?php echo $loginFormAction; ?>" method="post" rel="external" name="fm_login" class="login" >
        <input name="usuario_usu" type="text" placeholder="Usuário" >
        <input name="senha_usu" type="password" placeholder="Senha" />
        <input type="submit" name="bt_login" id="bt_login" value="Entrar" />
    </form>
    <p style="font-size:20px">Não possui conta? <a href="cadastro.php">Cadastre-se!</a></p>
    <br />
    <img src="images/login_facebook.jpg" width="100%"/>
    <img src="images/login_google.jpg" width="100%"/>
</div>    
</body>
</html>
    
asked by anonymous 10.12.2015 / 18:41

3 answers

2

For jQuery above 1.6, we recommend using prop instead of attr .

Here is an example that, in addition to changing the text, disables the button to avoid more than one submission: 

$('form').submit(function(e) {
    $('#bt_login').prop('value', 'Enviando...').prop('disabled', true);
});

See working at CODEPEN .

If it is to be used with Ajax, remember to put a .prop('disabled', false); in case the return fails, otherwise the person loses the contents of the form and can not try to send again in case of failure .

Even with a common form, it may be the case to re-enable the button with a timer after a few seconds, for the same reason explained above.

    
10.12.2015 / 21:03
1

You can change it with the text method like this: 

$("#btn").text("Carregando...");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><buttontype="btn" id="btn">Stack Overflow</button>

In your case it would be: 

$("form").submit(function() {
  $("#bt_login").text("Carregando...");
});
    
10.12.2015 / 18:54
0
$('#bt_login').val('Carregando...');
    
10.12.2015 / 20:09
I am not able to modify the value of the class PhysicalBook which is a Book URL rewriting in HTACCESS ignoring existing files and folders