Save progress and submit button for a form - javascript

I have a form, where most fields are required. Once the form is submitted series of automated tasks gets initiated.
I want to provide users the ability to save their progress and come back and complete the form.
Cookies isn't a option, as users will be logged in to their account and should be able to continue their application from different devices.
The application is saved in the database. I need to do it in a way so that submit button submits the form, checks for all the required fields. (It does this currently).
I also need to have a save progress button which will ignore the validation and just save the data currently filled. ( No automated tasks etc should run when form is saved using this button.).
Is there a way to achieve this? If so how do i go about it?
The solution above may not be the right / most effective solution. I'm open to any other suggestion.
Thank You

On the second button you can use the formaction attribute.
Please note this works only on for buttons with type="submit". Then you can send the save progress info to a different page then just store the info.
<button type="submit" formaction="saveprogress.php">Save Progress</button>

If you are having two submit buttons, 1. Submit and 2. Save Progress, then it will be very easy.
Add onClick action on Submit button to validate the form, and after complete validation(return true for correct validation) you can save the data in database.
And on Save progress, just on click of button, you can directly save the data into database.
You need to make the changes in database schema. Add one more column(is_validated), to specify whether the data is validated or not for the user(As mentioned by you, you are firstly logging in user in your application).
When you are fetching data again, you can show the form according to is_validated flag.

Related

Hot to update Postback data directly using ViewState or some other method to clear hidden field?

I have a hidden field that stores some Ids of items to be updated when a button is clicked on the page. This is working fine. However, if the user clicks the Update button, then waits for page to reload, and then refreshes the page manually (using browser Refresh button), the data is resubmitted and creates duplicate data in the database.
Is there a way to clear the hidden field in the Postback data so that if the user does refresh the page manually, the hidden field will be empty and no updates to the database will be made?
So far, I have tried to manually update the ViewState using the code below after the database is updated.
ViewState["hdnBulkIds"] = "";
I have also tried to exclude the hidden field from the ViewState and manually clear it using jQuery on page load.
$( document ).ready(function() {
$('#<%= hdnBulkIds.ClientID %>').val("");
});
In both cases, I cannot seem to update the data "instance" that is sent to server on manual page refresh so the hidden field retains its original values from original button click.
I guess the question can be simplified to this: Is there a way to update the Postback data directly using ViewState or some other method to clear the hidden field?
This is a big issue with webforms in general and a big reason you should consider jumping ship to MVC. There may be an elegant way to handle this through webforms, but I'm not aware of any.
Once the user submits a form the browser "remembers" that submission and the refresh will re-submit it. There is nothing you can do about that, you have to detect a second submission through other means.
Your best/most true solution is to do a redirect after you get all of your data, and use your query parameters to re-build the page in the state it needs to be in. Then when the user refreshes the screen it will resubmit the redirect instead of the form submission.
Page.Redirect() or something along those lines is the function that lets you do a redirect. Trouble is, a page redirect will erase all state webforms was maintaining about the page, you have to rebuild all of it.
You also might be able to implement some sort of "CSRF" token style system. Generate a random number and store it in the user session on page load. When the user posts back, invalidate that number somehow. That way, if they post-back again with the number you can cancel the request.
That's a hackey way of going about things, doing a redirect is the "tried tested" method to my knowledge.
Another option is if the postback edits a value, check for duplicates or if the value is edited and if there are duplicates don't let the user double-submit.

Pass multiple Field Values and submit through HTML Link

There is a website that I do not have access to on the back-end that I go to monthly, type in my email address, check a few boxes and hit a submit button.
A while ago I found out You can append
?fieldname=value
to the end of the url to have it automatically fill that value into the field with that name. But is there anyway I can expand on this and fill in multiple values and hit the submit button?
Thanks!
Adding ?fieldname1=fieldvalue1&fieldname2=fieldvalue2 etc.. can add many more parameters send to the server.
Some website use those parameters in the page so when you add the good parameters, you will get the page with the modifications that those parameters did on it.

Back button which goes back to filled in form

Is there a way to add a Back button which reloads a form with the inputs filled in?
I have a form with some input fields and a save (submit) button. When clicking submit, if the mandatory fields aren't filled in, a new page opens with a message. If I use the browser's Back button, I receive this message:
Confirm Form Resubmission
This webpage requires data that you entered earlier in order to be
properly displayed. You can send this data again, but by doing so you
will repeat any action this page previously performed. Press the
reload button to resubmit the data needed to load the page.
ERR_CACHE_MISS
So basically, it asks me to Refresh, and then confirm by clicking OK on a pop up window, after which the form reloads but with empty fields.
I have tried thinking of everything, but I can't find a solution. Thanks.
If it's possible, I would change the structure so that the form posts back to itself, and runs the validation of the mandatory fields. Then, if everything's ok, it will continue whatever processing is necessary. If there's a problem, it can show the form again, but in your code you will have access to the values already submitted, so you can pre-populate the form with these values and then display it to the user. It's a pretty standard design technique for this sort of thing.

Disable JS Submit Validation Checks

I don't really know how to explain this one very well so here we go.
I am trying to implement the Stripe payment button on my page. When the submit button is click, the JS validates the users input. That said, I do not have access to the JS file.
I am trying to add the ability for users to choose weather to pay by check (in which the stripe form elements disappear and other appear related to paying by check).The problem is, when the user selects to pay by check and click submit, the validation checks for the stripe form are run, they of corse fail and the submit action is aborted.
So how, when the user selects check, can I disable the Stripe actions?
Thank you in advance for any help.
You should have different forms for the different payment methods, so that the Stripe form doesn't think it is being submitted.
Here's my guess as to how you could disable the listeners, anyway:
$("#payment-form").unbind('submit');
You have a couple different options. One would be to work with the event handlers in javascript when the user chooses to pay by check. Another option (probably simpler) option would be to have 2 submit buttons and show and hide them depending on how the user intends to pay.

Switch to POST from GET, need to submit a form to two different locations

[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();

Categories