How can I change the 'submitting...' form button text?

Site URL: https://www.seonto.kr/order

Hi there.

I want to change the form button title after click it.

When I click the submit button (the blue one), "submitting..." title is shows on.

I want to change that title to some texts.

If there's no way, I want to remove the submitting button. (not submit button)

Here's my website page, and PW is 1254. I need your helps!

https://www.seonto.kr/order
 

On 4/10/2022 at 9:50 AM, seonto said:

Site URL: https://www.seonto.kr/order

Hi there.

I want to change the form button title after click it.

When I click the submit button (the blue one), "submitting..." title is shows on.

I want to change that title to some texts.

If there's no way, I want to remove the submitting button. (not submit button)

Here's my website page, and PW is 1254. I need your helps!

https://www.seonto.kr/order
 

section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

On 4/11/2022 at 8:01 PM, bangank36 said:

section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Hi @bangank36

Thank you for helping me!
Your codes is works but not 100% ;(

I think older submitting button title still alive!

@seonto Have you solved it yet?

On 4/18/2022 at 5:38 PM, tuanphan said:

@seonto Have you solved it yet?

Yes.. I need your help.

I think that codes just cover the older submitting button. So I should use more longer words than "submitting..." words.

And I have other submit buttons on the website with different button layout too.

ex 1. https://seonto.kr/letter
ex 2. https://seonto.kr/journal/news

So if you let me know how to change the submitting title or delete it, I'll really appreciate!

On 4/11/2022 at 8:01 PM, Beyondspace said:

section[data-section-id="624bcec43c713c27b2e782d0"] section[data-section-id="624bcec43c713c27b2e782d0"].submitting input.button {
  visibility: hidden;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .form-button-wrapper {
  position: relative;
}
section[data-section-id="624bcec43c713c27b2e782d0"] .submitting .form-button-wrapper:after {
  content: 'your word';
  position: absolute;
  display: block;
  z-index:99999;
  left:50%;
  top:50%;
  background:  rgb(155,195,195);
  padding: 5px;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Hi. after SS changed the form list systems, this codes didn't works any more ;(
Could you let me know for a new version? Thank you!

Hi. After SS changed the form list system, my submit button (the mint one) ignore the codes.
I used this codes to changed the submitting button text. ("submitting" to "전송 시도 —")
I have a three submit button in my website. and want to change all of it.

https://seonto.kr/order
https://seonto.kr/return
https://seonto.kr/ask

If you have another codes for new form system, please share to me. Thank you 🙂

	/* submit button - change the button text */


		.submitting input.button,
			{
  				visibility: hidden !important ;
			}
	

		.form-button-wrapper,
			{
 				position: relative;
			}


		.submitting .form-button-wrapper:after,
			{
  				content: '전송 시도 —' ! important ;
              	font-size: 14px !important;
  				position: absolute;
  				display: block;
  				z-index:99999;
    			left:50%;
  				top:50%;
  				background:  rgb(155,195,195);
  				transform: translate(-50%,-50%);
              	color: #000000 !important ;
              
                padding-top : 9px !important ;
                padding-bottom : 9px !important ;
              	padding-left: 15px !important ;
                padding-right: 15px !important ;
              
			}

I do not have a solution but some observations. Apparently SS has removed the class for the submitting state of the button. SS now only changes the value attribute on the input.

Without the state class you'd probably be looking at a MutationObserver which are not easy.

On 5/22/2023 at 2:36 AM, creedon said:

I do not have a solution but some observations. Apparently SS has removed the class for the submitting state of the button. SS now only changes the value attribute on the input.

Without the state class you'd probably be looking at a MutationObserver which are not easy.

@creedon Okay.. I check your hyper link and read about MutationIbserver, but I can't understand at all 😂 then it is impossible to hide a submitting button now?

2 hours ago, seonto said:

then it is impossible to hide a submitting button now?

I think the short answer is yes in your context.

You can not do what you did before because SS removed the elements that allowed you do what you did.

But totally impossible is not correct. It looks impossible with CSS alone. Probably doable with JavaScript and MO.