CODEWITHSUNDEEP
javascripthtml
Frank Fourlas
Frank Fourlas

Reputation: 121

Changing HTML Button Text using JavaScript

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>

Upvotes: 0

Views: 97

Answers (3)

TaoPR
TaoPR

Reputation: 6052

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;
    }

Upvotes: 0

Sharad
Sharad

Reputation: 435

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'); 
}    
}

Upvotes: 1

m4lt3
m4lt3

Reputation: 465

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;
    }

Upvotes: 0

Related Questions