Changing HTML Button Text using JavaScript

Question

I'm carrently building a website to host my music live stream. I made a section where people can suggest songs and the suggestions are stored in an SQL Database. I want the Submit button on this form to change when submitting from "Submit Recommendation" to "Thank you" when clicked but also for a client to be able to press it once to avoid flooding. Well i haven't managed to make these work together (and keep the required attribute on my tags) but I have managed to do them one at a time. This is my code please help!

<form action="./add.php" method="POST" target="sendFormSuggest" onsubmit="return checkBeforeSubmit() ">
    <!--The form for suggestions -->
    Song: <span style="color: red">* </span>
    <input class="recom" type="text" name="song" size="50" required><br>
    Artist: <span style="color: red">* </span>
    <input class="recom" type="text" name="artist" size="50" required><br>
    YouTube Link:
    <input class="recom" type="text" name="link" size="50"><br>
    <input class="Submit" type="submit" value="Submit Recommendation" id="ButtonRecom">
</form>

<script type="text/javascript"> <!--this checks the any form for second submition -->
    var wasSubmitted = false;
    function checkBeforeSubmit() {
        if (!wasSubmitted) {
            wasSubmitted = true;
            return wasSubmitted;
            document.getElementById("ButtonRecom").value = "Thank you!";
        }
        return false;
    }
</script>

You're having return wasSubmitted; statement before changing button value. Prepend value change before return statement and it works. — Samuli Hakoniemi
– Samuli Hakoniemi, Commented Jun 2, 2015 at 11:00
I am personally hosting the server with wamp and it's not intended for a big crowd so I'll be covered with preventing the client from clicking the button. — Frank Fourlas
– Frank Fourlas, Commented Jun 2, 2015 at 11:01
Thanks i didn't think about return stoping the function... Thank you — Frank Fourlas
– Frank Fourlas, Commented Jun 2, 2015 at 11:02

Sharad · Accepted Answer · 2015-06-02 11:05:24Z

1

you can try somthing like this: here I am tring to chnage button text from 'Add guest' to 'Add family
member'

<script type="text/javascript"> 
if (!top.adminpanel) 
{         
var myPage = document.getElementByID   
('idSectionGuestListContainer');
  if (myPage)
{ 
myPage.innerHTML = myPage.innerHTML.replace('Add guest', 'Add family    
member'); 
}    
}

answered Jun 2, 2015 at 11:05

Sharad

4351 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m4lt3 · Accepted Answer · 2015-06-02 11:02:38Z

0

You only need to switch two lines:

var wasSubmitted = false;    
    function checkBeforeSubmit(){
        if(!wasSubmitted) {
            wasSubmitted = true;
            // pull this line up
            document.getElementById("ButtonRecom").value= "Thank you!";
            // push this line down
            return wasSubmitted;
        }
    return false;
    }

answered Jun 2, 2015 at 11:02

m4lt3

4652 silver badges16 bronze badges

1 Comment

Frank Fourlas Over a year ago

Thank you guys I already said that this is the answer in the comments but thnx for your time!

TaoPR · Accepted Answer · 2015-06-02 11:05:58Z

0

Suggestion: Consecutive requests from the same client within a small period of time (e.g. 5 submissions within 2 seconds) should be screened on the server side in order to efficiently prevent flooding.

However, to answer your question:

Your code returns before changing the button text, so you need to move return down. see:

    function checkBeforeSubmit(){
        if(!wasSubmitted) {
            wasSubmitted = true;
            document.getElementById("ButtonRecom").value= "Thank you!";
            return true;
        }
        return false;
    }

answered Jun 2, 2015 at 11:05

TaoPR

6,0783 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

Changing HTML Button Text using JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related