How to change the text of a button when submitting a form?

Asked

Viewed 9,055 times

0

With the code below, the send 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>

php jquery
  • 2

    What’s wrong with the code? Click [Edit] and add more information.

  • 1

    You could try to explain your problem, then it would be easier to help. ;)

  • 1

    Demetrius, I edited your question to try to clarify a little more, check if that’s the problem, and if it’s not, you can click to reverse edit. But you could explain a little better, and it would also be nice to know what error you get in the browser console...

  • Submit the form via AJAX and manipulate the text within the AJAX events, no error.

  • 1

    Hi, @Demetrius. I put an answer with a demo in CODEPEN, because the snippets here from Sopt have a limitation to the use of Forms. Take a look at the question of besides changing the text, disable the button too.

3 answers

2

You can change with the text method so:

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

In your case it would be:

$("form").submit(function() {
  $("#bt_login").text("Carregando...");
});

2

For jQuery above 1.6, it is recommended to use prop in place of attr.

Follow an example that in addition to changing the text, disables the button to avoid more than one upload next:

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

See working on CODEPEN.

If you use with Ajax, remember to put a .prop('disabled', false); in case of error, otherwise the person loses the content of the form and has no way to try to resubmit in case of failure.

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

0

$('#bt_login').val('Carregando...');

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.