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.
Related
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.
how can I disable the browser's "Back" button in a HTML page?
I do not want to create JavaScript window to avoid showing any toolbar,etc.
In regular HTML page, is there any way to disable the back button in the toolbar?
thanks
You can't technically disable it, and moreover you shouldn't. Disabling the back button of a browser would fundamentally change the browsing experience for a user which isn't your place to do.
If going back in the browser creates problems for your application then you should restructure your workflow so it doesn't. An example of this is implementing the POST/REDIRECT/GET pattern.
More Info: http://en.wikipedia.org/wiki/Post/Redirect/Get
There's no way to disable the Back-button using regular HTML as you specify.
Write this code between script tags
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
I'm making a chrome extension that uses pageAction.
I can set when it shows whether I want it to have a popup or handle the click myself.
What I want to do is handle the click myself, but with certain scenarios I don't want to process the normal code, and want to show the user a message. Preferably with a popup.
But it seams I can either make the pageAction have a popup or have an onClick. But not both.
I can show an alert, but that is ugly.
Currently, there is no "neat" or official way to handle both. You can just do either. But there are some work arounds that some Google extension product have done.
First of all, set it up to show the popup. And within your pageAction popup, you can have the initialization code to be something like this:
Page Action Popup:
function init() {
if (getClickBehaviour() == 'popup')
handlePopup();
else
openPage();
}
function getClickBehaviour() {
return localStorage['CLICK_BEHAVIOR'] || 'popup';
}
function openPage() {
chrome.tabs.create({url: 'http://google.ca'});
window.close();
});
}
init();
Then you can let your options, set the click behavior. If you want different behaviors on each click, you can do that too.
As you noticed, we are closing the popup right after for the "default" behavior that we don't want the popup to show. That is currently the only way to implement different behaviors.
I haven't tested this myself yet, but have you tried setting the popup to the empty string when you want to handle the click (chrome.pageAction.setPopup('')) and to your popup when you want to show a message. I'm not perfectly sure if the onClicked event handler gets called in that case (where the popup is dynamically set to the empty string), but it's worth looking into.
As far as I know, there is generally no way to programmatically open a popup window for a page or browser action. (Which is too bad, I would love this functionality; but you can imagine some of the annoyances if this were possible.)
I have a group of links on a page. when the user clicks a link it triggers an asynchronous request and a content area on the page is updated with the response html.
This works fine, except for if the user clicks the link with the 'middle-button' (or mouse wheel, whatever it's called!). Then a new tab opens and the response gets returned and rendered to that tab.
Is there any way for me to prevent this from happening?
catch the link with javascript and override the default link behaviour.
like this:
$('a.ajax').click(function(e){
e.preventDefault();
// do ajax stuff, and add an onfinish function that does
// something like document.location.href = this.attr('href');
});
You don't have to do the document.location.href, as I just noticed that a content area is updated. Just catch the default behaviour with the e.preventDefault();
// edit
The preventDefault won't stop the middle mouse button... Have you considered not using tags? I know it should be accessible so maybe a span containing the link, so you can add the onclick event on the span and hide the link with css?
Unfortunately no, Javascript wont have access to that sort of control for security reasons as it would be wide open for abuse.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.