Skip to content

How do I make textbox’s text disappear after submit button is clicked

Blue Duck

I wanted my textbox’s text to disappear after I click submit button This is how my website looks like

This is my HTML script:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ask CodeBlox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <label>Enter your question:</label><br>
    <textarea type="text" id="myquestion" placeholder="Your question here"></textarea><br>
    <input type="text" id="discord" placeholder="Your discord here"></input><br>
    <button type="button" id="mybutton">Submit</button>

    <script src="script.js"></script>
</body>
</html>

This is my css script:

body {
    background-color: grey;
}

#myquestion {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    height: 70mm;
    width: 100mm;
    padding: 8px;
}

#mybutton {
    background-color: lightblue;
    border-radius: 1.3mm;
    border-right: grey;
    border-bottom: grey;
}

#discord {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    height: 20px;
    width: 50mm;
}

This is my javascript script:

document.getElementById("mybutton").onclick = function(){

    var ok = document.getElementById("myquestion").value;
    var no = document.getElementById("discord").value;

    const whurl = "I won't reveal my discord webhook token here"

    const msg = {
        "content": ok + "n" + no
    }


    fetch(whurl, {"method": "POST", "headers": {"content-type": "application/json"}, "body": JSON.stringify(msg)})
    
}

It’ll be really helpful if you can help me. I want the to textboxs’ text to be gone after submit button is clicked and only show the placeholder text. If possible I wanted to know how to make a script like textbox on focus script maybe like when the textbox is focused, there’s a blue border

Advertisement

Answer

After clicking on submit you should check if form is valid and then clear your textbox with :

document.getElementById("myquestion").value = "";