HTML change button name after click

Question

I have an HTML search script and I need to change the button text on click from "Search" to "Please Wait..."

enter <form action="form.php" method="post"> Search: <input type="text" name="term" /><br /> <input type="submit" value="Submit" /> </form>

Please show us what you have tried yourself, also there are so many examples of this if you search your tile on google, just switch `HTML` with `JQUERY` — Carsten Løvbo Andersen, May 16 '19 at 06:25
On button click event call JQuery $(this).val('Wait....') to change value of button. — Rahat Hameed, May 16 '19 at 07:30

Zain Farooq · Answer 1 · 2019-05-16T07:03:50.533

0

You can use jquery for this purpose
First, you need to add the id to form and the submit button

enter <form action="form.php" id="form" method="post">
Search: <input type="text" name="term" /><br />
<input type="submit" id="submit" value="Submit" />
</form>

Then in jQuery code

$(document).ready(function(){
 $("#form").submit(function(){
   $("#submit").val("Please Wait...");
 });
});

Plus, don't forget to include jQuery library in the head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

edited May 16 '19 at 07:03

answered May 16 '19 at 06:28

Zain Farooq

2,956
3
20
42

Thanks but I need for the search form.I need change name on form search after press button...Thx – Ionutz Cosmin May 16 '19 at 06:45
Yes, you can apply it on any form. Just change add your own `id's` to the form – Zain Farooq May 16 '19 at 06:50
What does *name on form* mean? – Zain Farooq May 16 '19 at 06:51
Form=search HTML script code... Can you please add this script for change button name on me form ?I not have good information about this html.Thanks.On first post is me script . – Ionutz Cosmin May 16 '19 at 07:00
I have added to your form. You can check now – Zain Farooq May 16 '19 at 07:04

score 0 · Answer 2 · answered May 16 '19 at 06:55

For this, you should use Javascript and the simple way is to use Jquery event's

Include the Jquery library

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Add class to your form or Submit Button to select and access the element easily

<form action="form.php" method="post"> 
    Search: 
    <input type="text" name="term" /><br /> 
    <input type="submit" class="submit-btn" value="Submit" />
</form>

Then use Jquery click() event

<script>
    $(function() {
        $(".submit-btn").click(function() {
            $(this).val('Please Wait...');
        });
    });
</script>

The full code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>My app</title>
    </head>
    <body>
        <form action="form.php" method="post"> 
            Search: 
            <input type="text" name="term" /><br /> 
            <input type="submit" class="submit-btn" value="Submit" />
        </form>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(function() {
                $(".submit-btn").click(function() {
                    $(this).val('Please Wait...');
                });
            });
        </script>
    </body>
</html>

It works but note that you should use AJAX to be prevent page reload and see the change prefectly

HTML change button name after click

2 Answers2