Saving input->values without embed php - javascript

Main problem is values written in input elementss disseapear after page reload (submit , refresh etc.)
I have a completed form ... /form element. Traditionally, I can insert a php line.
<input value="<?php if(isset($_POST['foo']))echo $_POST['foo'] ?>">
This solves the submit part. However, I feel that this is the worst solution, in my case. I have hundreds of input elements in my form. There are even some inputs to produce input tables. Number of input elements are so much that i became curious about finding a work around.
Is there a way to store input->values before the submit operation and inject them after page reload?
So that, the user can upload a file, file will be parsed by php core. And when the page reloaded both user originated inputs and file originated values are exist.
To simplify:
After "file submit & read & append file values to form", user shouldn't need to fill inputs that s/he already filled. I need an idea to achieve this, different then "inserting a php line to every single input element."

In such a situation I could recommend sending the file via AJAX and handling the response of that thereafter and then only injecting the values from the process and uploaded file when you get the response from the server.
Alternatively you could use localstorage or cookies to persist the information. However both local storage and cookies have a defined limit on what they can store. Cookie can only store 4KB in total which doesn't allow much.
Without uploading via AJAX, you could write a javascript function to find all inputs with jQuery/javascript and save their values in localstorage and on new page load to a check to see if there are any present and inject them back into the same inputs based on id/class/ etc with jQuery making sure to delete the localstorage values when done.

Related

Any way to make form submission synchronous?

I need to download a file from a server and to get a pop-up 'save as' box on the client. I can't do this in Ajax, so I create a hidden form in the client JavaScript, and I submit the form in the JS when a button is clicked. The server gets a POST, and it sends the file back as an attachment, and the client produces the 'save' box.
So far, so good, except that there are two problems here:
1 - I want the JS to delete the newly-created form when the user has completed the download. I suppose I could just leave a useless hidden form in the DOM, but it's not ideal. The problem is that form.submit() executes asynchronously, so I don't know when to delete the form - I can't simply do it after executing form.submit()
2 - Sometimes the user actually needs to download two files. This code doesn't work:
form1.submit(); // download file 1
form2.submit(); // download file 2
The client only executes/completes one of the submits - I can do both by putting an alert between the two, for example, but I need to do it properly.
If I was doing this with Ajax, I'd just make the calls synchronous, but I can't find a way to do this with form submission. Ideally I'd like an attribute to make the submit synchronous (something like .setAttribute('async', false), which doesn't work).
Any ideas? Or another way to download two files with two save-as dialogs?
A great trick is to use a cookie. The trick works like this:
Create your temporary form, and add two extra fields that you populate, one with a cookie name and the other with some unique value (could be random, could be a timestamp or a counter; doesn't really matter).
Submit the form.
At the server, the code should do whatever it normally does to create the download. It should also create a new cookie with the given name and value. Return the response.
Back at the client, right after submitting the form, start an interval timer to check (every 100ms or so) to see if there's a cookie with the chosen name and chosen unique value. As soon as you see the cookie, you know that the form response has arrived!
As to downloading two files, I don't think there are any provisions in HTTP for two attachments. You can of course return something like a zip file.

Simple HTML form into SQL DB using PHP, getting hammered by bots

I have a very simple HTML form which is for pre-registering for my car show. Unfortunately it has attracted the attention of spammers because there's an "address" field which they use to inject their spam URLs into.
I've added javascript form validation which says if the address field contains any slashes (like "http://") then it pops up a box telling spammers to go away.
I've added htaccess that I thought was supposed to stop users from being able to hit the PHP file which is used to submit the form into the DB without coming from my domain first.
I had recaptcha, but they were able to get around that as well so I removed it since it wasn't effective.
I know one flaw is that I can browse directly to my PHP file and it will insert a blank row into the database - how can I prevent this as well?
Does anyone have a good site or steps to take to stop these bots from hitting my form?
ReCaptcha, if well configured, should have solved your problem. There's no easy way to "go around that".
I've added htaccess that I thought was supposed to stop users from
being able to hit the PHP file which is used to submit the form into
the DB without coming from my domain first.
That's probably your problem. The bots are problem just calling the registration page with the right parameters. One way to get around it would be to display a hidden input field on your form, populate it with some random value, and check that you get the same value when the form is submitted.
But again ReCaptcha should work... if it doesn't you should ask a specific question about that.
first of all, validate the data that are send from the Form, check them if are valid, not empty. etc. If you are using a framework those have validation classes(use it), else create some,
second put back the captcha and don't send any data to the server if this isn't valid

Save the client HTML content back to the Server as a HTML file

I want to create an HTML form on the Server. When the client completes the form and clicks submit, I want to be able to save HTML form and data in a single HTML file on the server.
The best suggestion I have seen is using JavaScript. Use a client side script that on click will save the document.InnerHTML to a var that can then be submitted back to the server.
Is this the best approach, or is there an easier way?
Even though I have no idea why you want to save the whole html code because I'm sure there will be parts that are the same for every user and you will be wasting memory, but ok.
So there are two ways to do this:
1. is javascript as you said
2. would be to put all the generated html code into a hidden form input (already on server side)
the first one seems more comprehensive and this is what I would do but the second one would also work for users with js disabled.
I wouldn't really recommend this way, because I'm still a huge fan of saving data in a database, but here's a general outline of what to do:
User fills out the form and submits.
Server-side code executes a method:
a. String holding the template for your HTML page with placeholders for the fields.
b. Use String.Format to put all the user input into the correct places.
c. Create a file, write the string to the file, and save.
d. Return file name to user.
HTML files are not that large, but still you risk using up your hard drive space. Also, you need write permissions which introduces security risks.
Going the database route:
1. User fills out the form and submits.
2. Server-side code saves the data to a database, and returns a link (with querystring string of ID and possibly a user id to help with security) to the user.
3. Whenever the user goes to the link, the server-side code repopulates the form with the ID passed.

Processing a file upload with javascript before saving to database in Cakephp

I have a form that includes a file upload.
I need to extract some meta information using javascript from the file before saving the contents of the form to my database.
What would be the best way, if any, of achieving this?
To clarify: The issue isn't the with extracting the file meta but rather how to access the $_FILES array and execute a js file with this data before finally allowing the form to submit to the server.
How I am achieving this currently:
I submit the form to the controller action
It saves the data and then it sets a view variable with the location of
the uploaded file before re-rendering the initial view upon successful form submission
The view checks if the variable is set, and if it is, executes the
javascript which basically extracts the meta now that it can access where the file is, and updates the db
with an ajax call.
The above method is not ideal in that the meta belongs to the same row of data that is saved when the form first submits so ideally I would like to include it initial form submission and not when the page is rendered again after the form has been submitted. Seems like a bit of a dirty hack to me but I can't as of yet see another way this can be achieved.
I would suggest uploading using ajax (SWFUpload/Uploadify) and then sending data back to the view with the processed file data.
You can upload the file, issue a number of callbacks, and finally return the rendered filedata back to the waiting javascript function that issued the request.
Just my two cents
What sort of metadata? To answer your question, yes, this is possible, but only if the browser supports the File API. This excludes IE9 and older. For more information, see this MDN article on FileReader. There are various libraries that will extract specific types of metadata from files. For example, if you are interested in parsing EXIF metadata from an image file, you should look into something like jQuery-fileExif.

File Upload and Cookie

Hello I am working on multi step registration form and it contains file uploads in the intermediate step . I am storing each value in the form in the cookie to work it with browser back button and and reset the same in the final form which i want to post at the. But how to store the file upload in the cookie so that i can set it when user clicks on a browser back button. Also i need to submit it along with the final form.
You can't store a file in a cookie, you are going to have to store it on the server and keep a reference to the server within the cookie if you want it to work as you describe.
Something you could do is keep the entire form on one pageload and swap the content of a div dynamically. That way you could just hide the form elements you don't need, including the file form. A submit button at the end would take all the hidden inputs, with the file and post them all to the server.

Categories