I trying to do simple registration form with error message for wrong data format. Till now I have index page with form, submit button that send the data to .js file where I make the validation. The problem is that I can execute function in the index page from the .js file and update my span message, but my page reload and I lose it. How I can make message that survive the reload or better to return the message after page reload?
If a button is tagged as submit, the page always reloads, this is how the submit property works. Unless you redirect it specifically somewhere, it would reload. My suggestion is link it to a database. Store the contents of text inputs, etc in a variable or a document in databases such as firebase so that even after the reload the data is stored in the cloud or on a database somewhere.
Since its a form, you're anyways going to have to store the data on a database so try out firebase / AWS and see if it works for you. When it submits, have an onEvent (HTML) or a variable and 2 if statements (Have an if statement to change a variable from false to true / other way round when submit is clicked and another if statement for the value of the variable to store the data), or any other method that works for you as this will make sure the data is stored so it can be saved after a submission.
I decided to use input onfocusout="myfunction(name.value) so when you click outside of the textbox where you typing you will get text that show you where you must to make changes if something is wrong. The problem with this is that now I must to have my code inside .js and in same time in my index page. It looks to me very fishy, but I saw this type of forms in many sites, but I am not sure how they achieved it with no using their validation code this way.
Related
So I have a NodeJS site and on the home page is a form containing some radio buttons. When the user clicks "Submit," I would like for the user to be redirected to another page based on the answer. This I have figured out (The buttons have an onclick attribute that changes the action attribute of the form element). However, I need to keep the data from the original form, so that after the user has "chosen their path," I know what path the took and the answers they made along it. Thank you in advance!
You could persist the client's state in a session. If you're using express, one alternative could be express-session. The way it works is that it assigns a unique identifier to the user in the form of a cookie and saves the data somewhere (memory, database, a file, etc. depending on which you choose). Then when the client makes another request, the server gets that data back with the identifier from the cookie.
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
This is going to be a difficult one to explain but basically I have an angular application with a login form which runs a function on submit which sends an ajax request to the server to do the login.
Now, I'm not using ng-submit but hijacking the normal submit attribute like this:
<form my-form submit="controllername.doSubmit()">
I then have an angular directive called "my-form" which uses {require: 'form'} in it's definition object and then does this in the postLink function:
element.bind('submit', function(event)
{
// Removed for brevity
scope.$apply(scope.submit);
});
So, basically this form submit stuff was written a long time ago and does a lot of other stuff like triggering form validation and stuff by default so I don't wnt to rewrite any of this or go back to using ng-submit. Aside form anything else I have a few big apps using this code which would need to change a lot.
Anyway, it all works fine on the surface but if I fill in the log in form and then do some other stuff (including filling in other forms set up the same way) and then leave my laptop for a few days and come back to the page, somehow all the form data has been added into the URL bar, after the ?? and before the # including the password in plain view!
Not sure why this doesn't happen straight away, ony after un-sleeping the PC, and not always. The other weird thing is that the names of the parameters are not the original ones (email, password) but the names of the parameters of the first form currently on the page (actionStatus, required), so Chrome is obviously getting very confused.
My instinct tells me that when the form is submitted, the formData is being stored somewhere for later because I'm not cancelling the default action of the form correctly when I'm running my javascript function and because it's a single page application that formData never leaves the memory. It's then thinking it's gone to a new page and putting that data in the URl, but it's getting the names wrong because the forms on the page has changed.
Sorry, I can't provide more code, just a fairly wooly description but I don't know what else to say really, it's all very strange.
I finally have an answer to this and the answer is totally unexpected.
I use a plugin called browserSync to sync multiple browsers I'm testing on and it had a feature called form syncing switched on.
I had chrome open and when I opened up another browser (typically in the morning when the computer first woke up) I had to log in and because they were on different pages it was copying my login details from Firefox into the first form it found in my existing chrome window. It was also putting the contents of Firefox's login form into chrome's URL.
Crazy.
In all of the sample code I have seen, it appears that the only function of onbeforeunload is to serve up an alert dialog box prior to the person leaving the page. Is that the only thing that can be triggered by the event or is it possible to do something else, like an unobtrusive function that sends off partial form data?
I am trying to capture abandoned shopping carts in Yahoo! Small Business and unfortunately I do not have access to any server side scripting, so I'm forced to work client-side only.
I was also thinking of doing an ajax posting of data after the email field was changed, and then comparing the list of all forms partially submitted against completed carts to determine which were incomplete.
You can save the partial form data in localStorage. Then, when another page is loaded, you could check for the presence of that data and AJAX it to the server, deleting it from localStorage on success. Or you might be able to just use that data in JavaScript, without involving the server, but that depends on your setup.
<body onbeforeunload="return ('You will lose all your data')" onunload="alert('You have gone away!')">
</body>
Onbeforeunload uses for alert box. Onunload for anything else.
You can technically fire off an ajax event, but there is no guarantee that it will complete before the page is actually reloaded.
We are trying to implement a web page that each time of page refreshing will not result in the form resubmit, how to achieve that? Is there any Javascript code or HTML can make it WITHOUT external javascript library(jquery, dojo or extJs)
The reason of such design is that the form is going to tie an unique relation to current data with means cannot do it twice but for security reason we have to use POST instead of GET, also after the action we still want to preserve user the right to do similar action on the same page to another relation. so how to avoid a consequence like that?
Thanks.
Suppose that the action to the form submits it to submit_form.php. That file can handle the data and do whatever it needs to do. Then in it's response, it can redirect the browser to a separate page (you'll have to look up the exact method of how to do this depending on what language you write your POST handler in). This separate page can show the results of the form submit using session variables or some other method.