This question may be connected to this Stackoverflow-question:
Form submit button will not submit when name of button is "submit"
Well, I have a basic HTML formular for uploading files which is looking like this:
<form action="UploadServlet" enctype="multipart/form-data" method="POST">
<input type="file" id="uploadName" name="file">
<button type="submit" id="uploadButton" class="btn btn-primary">Upload</button>
</form>
Now, when pressing "Upload" the file is correctly uploaded and processed. But when adding a name attribute to the submit button:
<button id="uploadButton" name="anyname" type="submit" class="btn btn-primary">Upload</button>
Then the request brokes (by using the TamperData plugin in Firefox is seems that the request is being sent as text/html instead of application/...). I tried to find some answers, but the only thing I found was the above mentioned question. I am not sure whether this question is connected to this. I strongly assume that the problem is assigned to "multipart/form-data", isn't it?
It also may be a servlet-problem: when using a name attribute for the submit button I am getting a NullPointerException in org.apache.tomcat.util.http.fileupload.disk.DiskFileItem.getString (due to a request.getParts()-call).
Now that I've found the source of the problem I really want to understand it. Thanks for your replies :-)
Related
I just spent ages trying to get Blazor not to submit and reload the page but fire off my methods instead on enter key. With
<form>
<input type="text" class="form-text" #bind-value:event="oninput" #onkeydown="Enter" #bind-value="#searchString" />
<button type="button" class="btn btn-primary" #onclick="Search">Search</button>
</form>
Whenever I hit enter the page would get reloaded if I used the enter key instead of click, preventing the results from showing. So I added
<button type="submit" disabled hidden></button>
Which fixed it.
Now this to me looks like a workaround. Is there a more elegant way to do this? If I had the original button as submit it wouldnt work either. I think this works because there is a submit button for the enter key to hit, but being disabled it cant do anything.
Using the form tag is wrong in most cases under Blazor, anyway you can find a good example of using conditionally keydown here:
https://www.syncfusion.com/faq/blazor/forms-and-validation/how-do-i-conditionally-preventdefault-inside-the-input-component-in-blazor
I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>
How do I do a browse button, that when clicked on will just open the browse box, and store the link to the file in its value, I don't want it to connect to any server or anything (so i'm not sure what to do for the action and method attributes...). Basically after the user browses for a file, they can click another button and an onclick event occurs, but when I try it, it's not functioning properly.
<form action="" method="POST">
<input name="fileupload" id="fileupload" type="file">
<input value="OK" type="submit" onclick="change_bg_img('Untitled.png');">
</form>
You have an input of type="submit". Clicking it will submit the form, so the JavaScript will run, then the page will reload in its default state.
If you don't want to ever submit the data to the server then:
Don't use a <form>
Use type="button" not type="submit"
As mentioned, you don't actually need a form here.
I've made a working example on jsfiddle:
http://jsfiddle.net/h774q/2/
Use a button. And for best practices keep your click event handler out of the markup ;)
I have a button on an html page declared like so:
<button type="submit" name="action" value="sort">SAVE CHANGES</button>
My company demands we support older versions of IE, and in versions 8 and lower when the user goes to submit the form, it passes the text between the 2 button tags. So i need to use an input tag instead. Can someone help me figure out how to create an input tag where the type=submit, the name=action and the value=sort, but hte text on the button says 'SAVE CHANGES'.
Thanks!
Like this:
<input type="submit" name="action" value="SAVE CHANGES" />
However if the value="sort" is important to you perhaps you could move it to an input type="hidden" element.
An option is to use an image button with the text SAVE CHANGES on it.
<input type="image" src="save_changes.png" name="action" value="sort" />
Don't give your submit button a name, make a hidden field with the name and value you want.
<button type="submit">SAVE CHANGES</button>
<input type="hidden" name="action" value="sort" />
So, when the form is submitted, the value "action=sort" will be submitted.
The requirements seem to exclude solutions other than using <input type=image>, which has serious problems; in particular, the coordinates of the clicked location are transmitted, and probably a revision of the requirements will therefore exclude this, too.
Using JavaScript, you could tweak the data before it gets sent, or maybe use an image with an onclick handler that turns it to a button in a sense.
Normally, problems like this should be solved by modifying the server-side code. But if you have some reason why the field name (in the submitted data) must be different from the text in the button, then there does not seem to be any solution, with the given conditions.
What is the difference between HTML <input type='button' /> and <input type='submit' />?
<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.
A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).
It should be also mentioned that a named input of type="submit" will be also submitted together with the other form's named fields while a named input type="button" won't.
With other words, in the example below, the named input name=button1 WON'T get submitted while the named input name=submit1 WILL get submitted.
Sample HTML form (index.html):
<form action="checkout.php" method="POST">
<!-- this won't get submitted despite being named -->
<input type="button" name="button1" value="a button">
<!-- this one does; so the input's TYPE is important! -->
<input type="submit" name="submit1" value="a submit button">
</form>
The PHP script (checkout.php) that process the above form's action:
<?php var_dump($_POST); ?>
Test the above on your local machine by creating the two files in a folder named /tmp/test/ then running the built-in PHP web server from shell:
php -S localhost:3000 -t /tmp/test/
Open your browser at http://localhost:3000 and see for yourself.
One would wonder why would we need to submit a named button? It depends on the back-end script. For instance the WooCommerce WordPress plugin won't process a Checkout page posted unless the Place Order named button is submitted too. If you alter its type from submit to button then this button won't get submitted and thus the Checkout form would never get processed.
This is probably a small detail but you know, the devil is in the details.
IE 8 actually uses the first button it encounters submit or button. Instead of easily indicating which is desired by making it a input type=submit the order on the page is actually significant.