To prevent user from enabling button using inspect element - javascript

We are using a submit button in a timesheet which gets disabled once the month is finished. User cannot submit on next month.
Problem some user go to inspect element and remove disabled and submit the form.
<a id="submit_time_sheet_id" href="javascript:void(0);"
onclick="isAllDaysPunched()" class="btn btn-xs btn-primary"
disabled="disabled">FinalSubmit</a>
User removes disabled="disabled" and form gets submitted.How to prevent user from modifying code

This will always be possible. You can't prevent anyone from using the developer tools to manipulate your form. That's why you always have to check data sent to the server server side.

“How to prevent user from modifying code?”
The answer is: you can't. How your website is opened is absolutely only decided by the respective user. Any person may download the HTML/JS/CSS source code of your website and modify it according to their needs. Or they directly invoke the form submit using tools like cURL.
The only way to prevent the submitting of data in a specified period, is to check the state – whether a user can submit data or not –on the server-side.

According to this Answer
you can recheck your validations in the submit action.

Related

Print and submit form at the same time - jQuery.print

My question is how can I print and submit a form at the same time.
I am using the following code, but if printing takes longer than 2 seconds, it cancels the submit of the form.
<button class="btn btn-primary" id="saveandprint"
onclick="jQuery('#printableArea').print() + setTimeout(function(){document.getElementById('save').click()}, 2000)">
Save And Print</button>
The jQuery plugin I am using for printing:
<script src="jQuery.print.js"></script>
Thank you!
If the browser is navigating to another page to submit the form, no. If it's being sent over ajax, then I believe so.
If you need the print operation to occur only when the form's submitted, it's better to have it triggered on the page the browser is being directed to. Loading and fetching of resources won't pause if the browser's waiting for the user to confirm a print dialogue.

How to reload page with javascript without sending POST information again

I have a page, to which I POST information via form method="post". I would like to relaod it with JavaScript, but location.reload(true) and location.reload() makes browsers ask if I want to send the POST data again.
I would like to make JavaScript reload the page with GET instead of POST to skip the POST data.
How can I achieve that?
window.location.href = window.location.href
try
To reload a page without post data using javascript the easiest way I've found is to use an extra form to submit - this works regardless of whether the url is # or anything.
<form name="reloadForm">
<button type="submit">
Continue
</button>
</form>
<script>
document.reloadForm.submit() ;
</script>
That will show a button briefly on screen that the user can click continue on but the script will automatically submit it - this method sorts out a number of problems - the form is empty so it will not submit any post data (the button isn't named so even that won't submit a value). It works even if the url is set to #, and finally it gives a backup in case the user has disabled javascript (or the javascript doesn't work for some reason) they've still got a continue button available to click.

How to execute javascript before submitting form from any button type consistently

I'm updating an existing application that has several different button types on some pages that submit forms. I need each button to be able to execute some javascript right before submitting a form. I put my js code in the onsubmit event of the form, but not all buttons execute it. I created a sample that shows 3 different buttons that all submit the form. Buttons 1 and 3 will display the alert I entered into the form's onsubmit event. Button 2 does not. I know I could put the alert code in the onclick for button 2 before the submit() call, but I really need a way that is consistent with all buttons. I need all buttons to execute the alert in my sample and I want to update code in one place and have it work for all buttons that are submitting this form. Is this possible? Let me know if I need to provide more information.
Code:
<html>
<body>
<form name="form1" action="x.html" method="get" onsubmit="alert('onsubmit javascript executed');">
<br><br>
<input type="submit" value="1. html input type submit">
<br><br>
<input type="button" value="2. html input type button with onclick" onclick="document.form1.submit();">
<br><br>
<button style="width:180px;margin-right:5px;height:30px" onclick="document.form1.submit();">
3. html button with onclick
</button>
</form>
</body>
</html>
Update: 1/15/2014
Thanks for the ideas, but unfortunately, it is not addressing the issue of creating one solution that works for all buttons that may cause a submit event. I spent all day yesterday trying different options based on the responses of both Jordan and Benjamin but still have not had luck. So I thought I would take a step back and explain why I am trying to do what I am asking about.
I have a classic ASP application. On the pages that require input from the user, I am getting many users that are timing out and when they click a button that submits the page they lose their information. So I am adding a javascript timer to the page to first warn the user they are about to time out and then let them know that they have timed out so that they can copy and paste their work somewhere else to save it. A key point is that the way this app was designed is that most pages submit to a hidden iframe so that the page doesn’t have to be reloaded. If the user times out they don’t know it because it happens in the hidden iframe and they think the app just locked up.
My solution to this problem was to create a javascript timer on the page. It creates a variable with the start time that the page loaded and counts down each second displaying a javascript message at set times. I set it up and it works great, with one exception. If the user submits a page (to the hidden iframe), their session timeout gets reset, but my javascript variable that tracks time does not. This would lead to them getting a timeout message when they have not really timed out. My first thought was that this would be an easy fix because after the page loads I can write a javascript function that finds every form onsubmit event and prepend a line of code to update my timer variable. However, based on my original question, this is an issue because the form onsubmit event is not being called if the button is not a submit button even though it calls the submit() function of the form. Ideally, I wanted to provide code that could be added to each form page that would not require any other updates to that page.
Unless someone has a better idea, I think I’m going to have to update some existing code on each page. For any <input type=submit> or <button type=submit>, the update to the form’s onsubmit is fine and that is handled automatically by the javascript code I add to the page that finds all the forms and updates the onsubmit event. But for each <input type=button> and <button type=button> I will have to manually check their onclick event and each function that it might call to see if it calls the submit() function. If it does, then I have to do like Jordan pointed out and make it call a function where I can enter my code before calling the submit().
Any ideas to address my issue or to suggest a different method are appreciated. Thanks again.
Maybe you could instead submit the form from an event handler on the non-standard buttons, and have your code execute beforehand:
HTML
<button onclick="formSubmitHandler()">Submit</button>
JS
function formSubmitHandler() {
// your code
document.form1.submit();
}

Can javascript simulate a button click?

I am designing a site where it would be problematic if macros were allowed to run freely.
I have thought of a way to stop a macro made by simulating the HTTP requests from a button click but this would be in vain if they could insert javascript scripts which just "click" the button and proceed as a normal user would.
By simulating a button click, I mean, the button is pressed and the Form the button is in runs with the php code associated with it.
Logic tells me javascript can do this but I would like to know for sure, thank you for any input!
A button may be always clicked programmatically. For example you may have a page with a form like this:
<form>
<input type="text" />
<button>Do something</button>
<input type="submit">
</form>
then it is possible just to open debug console and type
document.getElementsByTagName('button')[0].click();
which will click the button, or
document.getElementsByTagName('input')[1].click();
which will click the submit button of the form, or just
document.forms[0].submit();
to submit the form without clicking the button.
There is no way to prevent user from mastering JavaScript code on client. You have to add some validation on server side in order to prevent unwanted user actions.
the only thing you can do is validate the request on the server.
once you hand the page over to a client, you have no technical control over how it might be used.
What you can do for example, from:
Say you're making javascript game. You use AJAX to send the score of the player to
the server for logging. After looking at the script, a malicious user could run your AJAX code
to send a score of 1,000,000 even if they earned only 5,000.
You can't prevent this from happening on the javascript side. However, there should some way to authenticate AJAX requests on the server side, you might be able to pass a security "token" to javascript that a hacker couldn't get ahold of.

How to submit form with data before logging someone out?

I'm using the document.form.submit() function for a rather large input form (hundreds of fields, it's an inventory application). I'm calling this after the user has been idle for a certain amount of time and I would like to save any data they've typed. When I try this the page reloads (the action is #) but any new text typed in the fields is not passed in the REQUEST, so I don't get to put it in the DB. Is there some fundamental reason why this happens or is my code just not playing nice together (I'm using the EXTJS grid view to show the form and a library for tracking idle time)?
Thanks,
Robert
I guess I put the answer here. What I found was that doing this:
setTimeout('frm.submit();', 2000);
caused the page to reload but didn't submit the form. When I did this:
frm.submit();
The form was submitted and the data was passed. I don't know why the first way didn't work, but I don't need to know that:)
Might the server be voiding out the input values. Say if your page on the server looks like this:
<form action="/page.cgi">
...
<input name="Fieldx" value=""/>
</form>
I think it'll void out the field. Or this the server action might be setting it indirectly. In JSF, something like this.
<input name="Fieldx" value="#{bean.nullProperty}"/>
What do you have on the server and what's your browser?
I would try to catch the HTML post request to see if the input fields are included. If they are then your server has problem.
But regarding what you said, I think it's because there's conflict in the way your browser handles JavaScript DOM. This may be the case if you leave out the submit button on your form and it works.
The submit method of HTMLFormElement objects should just submit the form, as if the user had clicked the submit button. So, if the action attribute of the form is set to #, it would just seem to refresh the page, because it’s sending the form data to the same page.
Strange that it still does it when you set the action attribute to another page though.
Is the method attribute of the form set to get or post?

Categories

Resources