Any way to make form submission synchronous? - javascript

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.

Related

What exactly is Django's FileField doing when one clicks the "Browse" button and selects a file? Can I replicate this behavior with Javascript?

When rendered, a Django form with a FileField will have a "Browse" button. When clicked, this allows a user to browse through their system, select a file, and hit OK, presumably giving some reference to the file's location, its contents, etc.
This is before the "Submit" button is hit, so nothing is sent to the server—and there are no network requests made, thus there is no actual Python running anywhere. I assume Javascript is doing something because the name of the file pops up, and, somewhere, a reference to the file is stored (and sent to the server when the user clicks "Submit"). The FileField is populated somehow, but I'm not sure how.
What exactly is going on here?
I ask because I'd like to replicate this behavior with some AJAX/Javascript alterations. My intended process is this:
User makes recording (I use WebAudioTrack)
User clicks "Save," this sends a Blob from the AudioBuffer to some view via AJAX
That blob is processed into a WAV file and saved as a temporary file (or something like this).
Via some other script, that file is used to populate the form's FileField as if the user had clicked "Browse" and selected a file manually themselves
I'm having problems with Step 4, and it's because I don't know what's actually going on when a FileField is populated (or any instance of a user selecting a file for some HTML field).
(Just to emphasize, I'm talking about what happens before the user clicks the Submit button.)

Saving input->values without embed php

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.

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.

Can you use JavaScript to detect a file download window created server side?

I have a jQuery plugin I use to dynamically create and render a form on a default.aspx asp.net page, then submit it. The page it gets submitted to is a pdf.aspx page. The page builds a PDF then uses Response.Write to write the file (application/pdf) to the browser. I use the same method to render XLSX files to the browser as well. It works really great, but I need a callback or some event to tell the button when to stop spinning. This prevents the user from continuously clicking the Excel or PDF buttons. Does anyone know a way to detect the file dialog window when it was not created using JavaScript? I am also open to other methods of callback from the server side as well.
The way I do that was suggested in response to a question I asked here a while ago by T.J. Crowder. I can't find the response from the last time I wrote this up because the Stackoverflow "search" facility is so incredibly lame, so I'll probably type in a blog post. The basic idea is that your client code (Javascript) should append an extra parameter when it submits the request for the download. The parameter should contain some generated random string (probably just the current timestamp is good enough). The server then looks for that parameter, and when it's preparing the response with the download file it also sets a cookie and gives it that random value.
Right after the submit (or right before; it doesn't really matter), the Javascript code should start an interval timer with a routine to look at the value of document.cookie and see if it contains that random string. As soon as the cookie does contain that string, then you know that the server has sent back its response and that the file download dialog has been presented.

Categories