I have a button in a JSP which gets disabled after the first click. This is just to prevent multiple form submission at the same time. I want to enable the button once the form is submitted. My current logic keeps the button enabled and it seems like it bypass the disable property.
Without this.disabled = false button works perfectly fine by keeping the button disabled but I also want it to be enabled once the process is finished.
<input type="submit" class="esignReports" value="Export E-Sign Information" title="This function will provide you a 30 day download of all your eSign transactions." onclick="this.disabled=true;this.value='Please wait...';document.getElementById('viewIntegrationReport').submit();this.disabled = false">
Is there anyway to do it without JS
Thanks,
I think your button actually gets disabled but it gets re-enabled automatically because the submit is async, so you don't have enough time to see it's 'disabled' state. You could put console.log(this.state) before and after the submit() call to be sure.
There's no way to get a callback on submit() calls using plain Javascript (since it is supposed to send the info and reload the page). You'll need to use jQuery if you want to re-enable the button, using callbacks.
Related
I just discovered that editing a button in developer tools to enable a disabled button changes nothing. The button somehow remains disabled internally. (Though the disabled style effects are removed)
//This is how the button looks like in Chrome developer tools
<button disabled>Post</button>
//editing out "disabled" does nothing. The click event doesn't get called
Interestingly, trying to disable an enabled button changes nothing as well. The onClick method still gets called when it's clicked.
Before my discovery, I always used a flag to block a click incase a malicious user enabled the button.
....
const [enabled, setEnabled] = useState(false)
....
....
const postData = () = {
if(!enabled) return;
//sensitive action takes place here
}
....
....
return(
<button disabled={!enabled} onClick={postData}>Post</button>
);
....
I just want to know if it is completely safe to remove the if(!enabled) return; line from the postData() function. Are there other tools that could really enable a disabled react button or call postData() directly?
disabled button are as safe in React as they used to be in HTML. Ultimately what Browser understand and gets is DOM elements and React rendered on a Browser is no exception to this. That said never rely on front-end alone for any security and have server-side validations and security checks as well.
I go to a page. A particular button (let's call it button A) that allows the user to continue checking out is currently disabled (as it should be).
I click on another button that leads me to another page to input my address details. After I have done this, the disabled button on the previous will be enabled once I am sent back there.
However, instead of filling in my address details, I press the browser BACK button and return to the previous screen. Button A is no longer disabled. It doesn't even have a disabled attribute when I inspect via the browser. If I refresh the browser, button A is disabled again.
This is the code for the button, part of a simple_form_for
= f.button :button, "Continue to checkout options", class: "btn btn-primary btn-rounded shopping-methods-continue js-checkout-submit", disabled: #basket.requires_address?
#basket.requires_address? is not being called when I go BACK.
I have tried hardcoding disabled: "disabled" to see what would happen, but it still doesn't even have a disabled attribute after pressing BACK.
Is there a problem with the caching of this page?
I have dug around the project, in perticular the javascript side of things. js-checkout-submit is not affected by any code.
Any ideas anyone?
So, we solved the problem by using turbolinks.
We gave the button a new class of js-disable-button.
And then added these instructions at the bottom of the code (coffeescript):
$(document).on 'turbolinks:load', () ->
if "#{#basket.requires_address?}"
$('.js-disable-button').attr('disabled': 'disabled');
So basically, the #basket.requires_address? check is performed every time the page is loaded, even when pressing BACK. And the button is disabled if the check returns true.
This has provided a solution, however I never really figured out why the problem was occurring in the first place.
I am using Sitecore and I have a header sublayout that I use in all pages. This layout contains a Logout button that fires OnClick event when clicked and executes the onclick event function. But in few pages it wont fire OnClick event at all instead it reloads the page.
Below is the code for the logout button
<asp:button id="btnLogout" runat="server" borderstyle="None" onclick="btnLogout_Click" text="Log out" ToolTip="Log out" backcolor="Transparent" style="cursor:pointer" class="logout_new"></asp:button>
Below is the code for the event function
protected void btnLogout_Click(object sender, EventArgs e)
{
Sitecore.Security.Authentication.AuthenticationManager.Logout();
Response.Redirect("/Login.aspx");
}
I found out that the difference between the pages where the logout fires the onclick event and pages where it does'nt is that they use the same header sublayout containing the logout button but they use different content sublayout though.
Note: I have not applied Cache to any sublayout.
Can anyone help me with this?
From the given context I don’t know what is the issue but here is what I will do if I have issue like this.
As you said only on few pages it is not working, it could be the other controls on that particular page is causing the issue.
I will pick two pages which has less controls on the presentation layer. Say PageA is a working page and PageB is a non-working page. Then I compare PageA and PageB and remove all common controls, this should narrow down the number of the controls on the presentation layer. Now check again to see if Page B is working or not. If not, I will try to remove one control at a time on PageB untill it starts working. If you find by removing certain control and the page started working then you can look into the particular control and identify the issue.
I hope this helps.
try disabling the cache as it would return the html without triggering the back end code.
To do so, one option is going to the presentation detail of those pages, find the control and click on it to edit. Under the "Caching section" uncheck "Cacheable" and publish the item. If this fixes your problem, I'd review the standard values of the template, to apply the change to all the items with the same template
This behavior happens to me at annoying times too, but it's almost always the same thing: the Sitecore sublayout the code is in is being cached.
The onclick javascript fires, but the page is not re-rendered with new content because the "unclicked" version is stored in the cache.
You'll need to disable caching on the sublayout to make the button work.
This can, however, be somewhat annoying if you're trying to cache as much presentation stuff as you can. In those cases, it often means you need to, counter-intuitively, create a number of "sub-sublayouts" and place them statically. Set the containing sublayout to be uncached, and then you can set each smaller one's caching appropriately (caching static parts, not caching dynamic stuff).
The problem was in the content sublayout in which it was not working, the Page_Load function was calling a Response.Redirect function to itself and it was not checking if it was a post back request or not before that. So Whenever a user clicked logout button it used to post it back to the server and the page used to reload instead of executing the onclick event.
I noticed that in the other content sublayout where it was working, it was checking if it was a post back or not.
I added a if(!IsPostBack) before that and it started working.
I am using the RightJS javascript framework. I'm not sure if that has anything to do with this behavior or not. I have a form on my page and I use $('some_form').send(); to send the form to the server via a Post. The form submission works fine and request goes through to the server without error but after all the inputs in the form become disabled. Does anyone know what might be causing this to happen?
You need to run the preventDefault() function
$('form').send({
spinner: $('spinner'),
onComplete: preventDefault()
});
Its a jQuery feature
I have a form built in Joomla 2.5 and ChronoForms, the form validation been done using MooTools. However in Chrome browser when I click multiple times the submit button, that many number of records get saved. This is not the issue in Mozilla or IE.
Is it a Chrome specific issue??
How can i disable the submit button on success of the validation??
Any feedback or solution is appreciated.
Regards,
happy coding
I figured this by adding a JavaScript code, which disabled the submit button after it was clicked and there were no validation error.
I had to modify some of the files from chronoform library to do this because when i added a normal JavaScript code, it used to disable the button after the submit button click, it did not check if the validation was fired or not, So, if the validation was fired i was not able to correct the validation error because it disabled my submit button.
Maybe check this "Prevent Double Submit" thread on the ChronoEngine forums:
http://chronoengine.com/forums/viewtopic.php?f=2&t=22439