Hide form button after click - JS

Hello all -

I am running into a wall with this and can't figure out how to hide a button after it has been clicked.

Ultimately, I want to all a user to click a button, hide the button, and replace it with an image (think check-mark or red 'X'). I will also need to have a way to "reset" the form buttons in the event that one is miss-clicked and the user needs to go back.

I have been playing with setting other fields and running rules against them, but no luck. Would CSS be a better approach, and if so, how (examples)?

Working in 2010 and O365.

Thanks

Page 1 / 1

does it have to be 'real' button control?

what about choice control rendered as buttons?

my idea is to have a choice control with single option. so you get single button rendered

until choice button is clicked, its value is empty, once it's clicked it gets value of that single option.

based on the value a rule could be set up to hide the choice control.

I'm not sure what exact requirements are regarding 'reset', but if choice value is saved into list filed then simple removing list field's value should set it uninitialized and so again shown on form.

Hi Jesse,

This can be accomplished using JavaScript. The following will get you over the line. I've also included an attachment of the form I've tested this against.

NWF$(document).ready(function () {
NWF$('.ntxImage').hide();
NWF$('.btnHide').click(function(){
hideButton();
});
NWF$('.btnReset').click(function(){
showButton();
});
function hideButton() {
NWF$('.btnHide').hide();
NWF$('.ntxImage').show();
}
function showButton() {
NWF$('.btnHide').show();
NWF$('.ntxImage').hide();
}
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍