Elizabeth Shaules
asked on
Disabling a Faux Submit Button
Hello,
I have a form I am submitting via a faux submit button (so I can style the button to match the page) - but its not behaving 100% correctly. When clicked, I want the button to immediately change colors, so the user knows that their click has been registered. But right now, it seems to be waiting for the actual form submit to happen before changing the color. Can you help fix this code so it behaves the way I want it to?
I have a form I am submitting via a faux submit button (so I can style the button to match the page) - but its not behaving 100% correctly. When clicked, I want the button to immediately change colors, so the user knows that their click has been registered. But right now, it seems to be waiting for the actual form submit to happen before changing the color. Can you help fix this code so it behaves the way I want it to?
jQuery('.fauxFormSubmit').click(function ( event ) {
jQuery(".fauxFormSubmit").css({"background-color": "#44515e", "border":"1px solid #44515e" });
event.preventDefault();
if (jQuery('#myForm ul').length == 0) {
jQuery("input[type='submit']").click();
jQuery(".fauxFormSubmit").css({"background-color": "#44515e", "border":"1px solid #44515e" });
}
});
});
ASKER
Oops, the extra }); comes from something else - disreguard. I have a form I am bringing in via HubSpot, so it comes in with its own set of styles and such. To make a button that matches the rest of the site, I've created a HTML <a> tag that has the correct styles. Then I've hidden the default submit input from the HubSpot form.
The HTML <a> "faux" button does turn the right color....but its delayed till after the rest of the function runs. I need it to turn this color immediately.
The HTML <a> "faux" button does turn the right color....but its delayed till after the rest of the function runs. I need it to turn this color immediately.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The JS looks fine except for the extra });