# Change text on form "Submit" button after actioned

**URL:** <https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701>\
**Category:** Web Development Bootcamp\
**Created:** [November 4, 2021, 1:45am UTC](https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701 "2021-11-04T01:45:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![scibsss](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/scibsss/32/1674_2.png) [@scibsss](https://group.classcentral.com/u/scibsss)\
**Post date:** [November 4, 2021, 1:45am UTC](https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701/1 "2021-11-04T01:45:37Z")

</div>

Is there anyway/recommendation (even with general html/css - looking into this further) to change the text on the “Submit” or click here to submit button on the suProcessing: Submit button change text.zip…  
rvey/form and change the text. I.e. “Submit” \> “Thank you for your submission”. Currently stuck with this code for the submit button

Thank you - any help is appreciated! These projects have been quite cool.

 ![Screen Shot 2021-11-03 at 9.42.49 PM](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/4/4e062276e75fe823bab0235deab06719861c8a27.png)  
 ![Screen Shot 2021-11-03 at 9.42.57 PM](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/a/a2fc359dc73e0a397f73f4220252135827e4d99c.jpeg)

---

<div class="post-metadata">

**Author:** ![deborahsalves](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/deborahsalves/32/1263_2.png) [@deborahsalves](https://group.classcentral.com/u/deborahsalves)\
**Post date:** [November 4, 2021, 11:47am UTC](https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701/2 "2021-11-04T11:47:03Z")

</div>

I know you can do it with JS, but not sure you could do it with html/css, cos the ‘thank you’ text would have to appear after the submission, but you dont have any page reloads 🤔 it’s a good question, though, maybe with `:after` pseudoclass? not sure they’d work on a input element, but may be a place to start searching =]

---

<div class="post-metadata">

**Author:** ![davidturner2608113](https://avatars.discourse-cdn.com/v4/letter/d/f14d63/32.png) [@davidturner2608113](https://group.classcentral.com/u/davidturner2608113)\
**Post date:** [November 4, 2021, 12:13pm UTC](https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701/3 "2021-11-04T12:13:11Z")

</div>

I did something similar in a course I am taking. Let me see if I can come up with something.  
It may be easier to view and hide an element with the message you want after submission.

---

<div class="post-metadata">

**Author:** ![davidturner2608113](https://avatars.discourse-cdn.com/v4/letter/d/f14d63/32.png) [@davidturner2608113](https://group.classcentral.com/u/davidturner2608113)\
**Post date:** [November 4, 2021, 1:56pm UTC](https://group.classcentral.com/t/change-text-on-form-submit-button-after-actioned/9701/4 "2021-11-04T13:56:17Z")

</div>

This code will work:

```auto
<input id="submit-btn" type="submit" value="Click here to submit">

```

```auto
let submitBtn = document.getElementById("submit-btn");

function changeText(){
    submitBtn.value = 'Thank you for your submission';
    return;
};

submitBtn.addEventListener('click', changeText)

```

You had no click event on the button to get the javascript to run. The code doesn’t work on a button because the value attribute is different. The return: false stops the form from submitting which you don’t want to do. You will have to style the input to look like the original button.