I have a file upload form which needs to have certain fields created in the multipart request before other fields. It works great if I order my form like this:
<form method="POST" enctype"multipart/form-data" action="/upload/">
<input type="text" name="newFileName">
<input type="file" name="file">
<input type="submit">
</form>
However, if I change the order of my form so that the newFieldName field comes after the file field, things break, as newFieldName needs to be parsed first by my upload handler. Is there a way to specify priority as for which fields get serialized in which order?
Related
What is the name and id of a input used for, how are they similar and how are they different
As shown in this example:
<label for="username">Enter your username:</label>
<input id="username">
id can be used to connect inputs with their labels. Also you can use id to find the element in JS (DOM manipulation) and add css styles to that input. Although you can do both with name, it's not common practice.
In languages like PHP or/and in forms sending data to some url (without reading the form data without getting the values of input items in JS and then sending it through ajax/fetch) name is used to label the data being sent to destination.
for example in PHP we read input values like this:
$var = $_GET['some_input_name'];
$var_posted = $_POST['some_other_input_name_but_with_post']
in this does not work with id.
if you send a form data to some url with GET method, you can see your input names added to the action (destination) url.
for example:
<form action="http://example.com/" method="get">
<input name="username" type="text">
</form>
will send and attach data to:
http://example.com/?username=text_entered_in_the_input
I'm trying to achieve below result using simple HTML form:
{"name": "Abc","email": "abc#abc.org", "message":"msg"}
HTML code:
<form name = "myform" action="URL" method="POST" enctype="application/json">
<input type="hidden" name="name" value="Abc">
<input type="hidden" name="email" value="Abc#abc.org">
<input type="hidden" name="message" value="msg">
<input type ="submit" value="Submit">
</form>
But this doesn't work. Someone suggested to use below and it worked but not sure how it is encoding data into JSON format.
<form name = "myform" action="URL" method="POST" enctype="text/plain">
<input type="hidden" name='{"name":"Abc","email":"abc#abc.org","message":"'value='msg"}'>
<input type="submit" value="Submit">
</form>
Can someone please explain how the above works? Thanks in Advance.
The enctype attribute simply has no option to encode as JSON.
There was a proposal to add support, but it was abandoned.
text/plain encodes the data in a plain text format which is not reliably machine parsable (e.g. you can't distinguish between a new line as data and a new line as a record separator). You should never use it in production. It was designed as a debugging tool but, frankly, having software that can display parsed application/x-www-form-urlencoded data is more useful for that.
The code you have "works" because the plain text format just concatenates the names and values, one per line, and you have half a JSON text in the name and the other half in the value.
It's very fragile, and would be more so if the user was inputting any data themselves.
I have some HTML forms and I need to provide additional parameters which the user will not fill up in the form UI. I understand I can do it using query parameters or hidden form fields. Examples :
a form whose data must be submitted to the server together with an option chosen in the previous web page
Ex: URL /createImage?option=option_value (accessible via GET by user) would contain the HTML code below
Query parameter
<form action='/createImage?option=option_value'>
<input type='textfield1' name='var1'>
</form>
Hidden field
<form action='/createImage'>
<input type='hidden' name='option' value='option_value'>
<input type='textfield1' name='var1'>
</form>
(in this case, I suppose a third solution would be to use a HTTP session variable instead)
a fake form used to associate a POST HTTP request with a image.
Query parameter
<form action='/createContainer?image=image1'>
<input type='image' src='container.png'>
</form>
Hidden field
<form action='/createContainer'>
<input type='hidden' name='image' value='image1'>
<input type='image' src='container.png'>
</form>
(in this case, I suppose a third solution would be to use a standard img HTML tag and use Javascript to send the POST request to the server on its click() event)
Are there any upsides/downsides in each one of those approaches or is it just a matter of personal preference?
So, i'm developing a form that will be checked by a program to be executed with the data. How do you dump the data into a .json file with html forms or any other language?
For sake of the project i'll give a section of the html form to help understand.
<form action="/folder/data.php" method="post">
<div>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
</div>
<div class="button">
<button type="submit">Sumbit!</button>
</div>
</form>
In my (limited) experience, "action" in the links to a PHP file to process the submitted form fields, like so: Insert input data from HTML form into JSON object and then store it in MYSQL).
Basically, you'll be converting your input fields into a JSON object with 'json_encode' (for PHP) or something similar.
You may want to check out this question: How to send a JSON object using html form data
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>