@sougata_bose I was able to recreate the issue on my end last Friday. I have reached out internally to the specific engineering team to see if they have any insights they can provide me.
@sougata_bose I have heard back from the dev team. This is not a supported use of the onFormReady callback and will not work. I’m not sure if this applies to your specific use case but you can always change the text of the submit button in the Forms tool in the UI.
@sougata_bose What version of the tracking code are you using? The older HubSpot tracking code doesn’t support callback functions for the forms embed code. Are you hosted on the HubSpot COS?
@sougata_bose — You’ll find that it’s notoriously difficult to change the text of an <input type=“select”> from JQuery, for some reason. The problem is not unique to HubSpot forms.
After much agony trying to accomplish the same thing, I finally got this to work. It seems that the attribute change itself needs to be decoupled from the callback — possibly so that the DOM can finish processing the new elements created by the forms.create() call — so a setTimeout() is used.
Also, HubSpot has a tendency to reset the submit button text each time the user navigates from one field to another. The only way I could find to combat this was to modify the global HSFR object, which caches information about the form configuration. This technique relies on undocumented architectural features that are subject to change without notice. Use at your own risk.
onFormReady: function($form) {
window.setTimeout(function(){
$form.find('.hs_submit .hs-button').prop('value', 'New Submit Text');
for (var i = 0; i < HSFR.FORM_COMPONENTS.length; ++i) {
if (HSFR.FORM_COMPONENTS[i].getDOMNode().dataset.reactid == $form.get(0).dataset.reactid) {
HSFR.FORM_COMPONENTS[i].props.submitText = 'New Submit Text';
}
}
}, 10);
}
There might be a VERY brief moment where the original text is visible, but most users probably won’t even notice it.