0

I am trying to change Save button name to Submit using below code but it does not work sometimes if I do load page twice below script throw error.

My Script having JS is added in my Site Assets library and below is code in application customizer to load JS.

Code in extension:

 const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    
 let articleRedirectScriptTag: HTMLScriptElement = document.createElement("script");
 let jsurl = `${this.context.pageContext.web.serverRelativeUrl}/SiteAssets/MyScript.js`;
 articleRedirectScriptTag.src = jsurl;
 articleRedirectScriptTag.type = "text/javascript";
 head.insertAdjacentElement("beforeEnd", articleRedirectScriptTag);
    
 console.log('jsurl:',jsurl);
      

Code in MyScript.js:

what();
function what(){
     document.getElementsByClassName("ms-Button--primary")[0].innerText="Submit"
};


 
4
  • Where is the save button? Is this a button in SharePoint list form or any other button on SP page? There might be better selector for this. Oct 21, 2020 at 13:08
  • this is in Newfrom.aspx page in Modern UI
    – kumar
    Oct 21, 2020 at 13:12
  • Try inspecting element and add the screenshot to your question Oct 21, 2020 at 13:14
  • You can use this: document.querySelector("button[role='menuitem'][title='Save']") to select the Save button from top of the form (Menu/Command bar in form). Oct 21, 2020 at 13:15

1 Answer 1

1

Try this code:

function what(){
    let buttonElement = document.getElementsByClassName("ms-Button--primary")[0];
    if (buttonElement) {
        buttonElement.innerText = "Submit";
    }
};

There maybe a better selector we can use for accessing the button element from DOM. Please "Inspect" the button element and add screenshot to your question. I will suggest you the better selector is possible.

Edit:

As per my test on modern experience:

You can use below selector to select the "Save" button at the bottom/end of the form:

document.querySelector("button[data-automationid='ReactClientFormSaveButton'][class^='ms-Button']")

Use below selector to select the "Save" button from top of the form (Menu/Command bar in form):

document.querySelector("button[role='menuitem'][title='Save']")
2
  • its work but if i do refresh page second time it show old value
    – kumar
    Oct 21, 2020 at 13:39
  • Try hard refresh (Ctrl + F5) once. Maybe it is browser caching/cookies issue. Oct 21, 2020 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.