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 ;)
Related
I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>
I have the form below ..
<form name="myForm" novalidate>
<label for="test_element">Test</label>
<input required id="test_element" type="text" ng-model="ctrl.test">
<button ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
</form>
I'm using the Dynamic Assessment Plugin from here:
https://chrome.google.com/webstore/detail/dynamic-assessment-plugin/aahpafpbmmgednbflpalchnlbicaeppi
The tool doesn't give a great example of how to fix the error:
Submit buttons and image buttons allow users to explicitly request submission of the form and to control the change of context. Forms that are submitted by other mechanisms might change the user's context before they are ready, causing frustration or confusion.
What would be the best way?
I dont want to change <button> -> <input type="submit"> since there's angularjs code behind the scenes handling the submit
I have read a little bit about ng-submit, here's the link.
I think for that we can make it something like this:
<form ng-submit="ctrl.save()">
<input type="text" ng-model="ctrl.test">
<input type="submit" value="Submit">
</form>
I hope that documentation can help you :D
There's no obligation of having one submit button inside a form.
You can view an example in the documentation stating:
Finally, to make the form submittable we use the button element
with no input[type=submit] button.
You can also perfectly have no button at all, for instance a form consisting only in checkboxes.
<button type="submit" ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
For a Project, in which we are not yet allowed to use php, I want to create a login page. I just can't figure out how to make it so the cancel button and the submit button take me to predefined pages. I want to be able to input some dummy data into the username password fields and when I press submit be sent to the "logged in" part of my site.
<button type="submit" value="profil.html">Login</button>
I tried it like that but it doesn't work. I also tried that:
<form action="profil.html" method="get">
You can use little bit of js to achieve it cleanly.
<button value="Cancel" onclick="window.location.href='otherpage.html'"> Cancel</button>
Set the action in the form. Use a submit button to submit the data to that URL.
"Cancel" means "Give up on the form and go somewhere else". To go somewhere else: Use a link.
<button>Login</button>
Cancel
I have this form:
<form name="input" action="http://s164074194.onlinehome.us/mail.py" method="POST">
Username:
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
On submission, the mail.py script is called and the user is redirected to its output...
I'd like the user to just stay on the same page as the form, right now when I click submit on the form I'm redirected to mail.py, which is on another site. Is it possible to disable this redirect action and instead just invoke the script?
Thanks
As #josh mentioned, you probably want to submit the form via AJAX, but if the script is on another site, then I don't think you will be able to do that.
Probably your best bet is to have a hidden iframe with the real form that gets submitted, and when the user clicks the button on the visible form, some javascript copies the field values to the hidden form, and submits it.
You might also be able to just specify a target on the form to be the hidden iframe, and not worry about the javascript part, but I haven't tried it.
Submit it via AJAX.
One solution would be to have mail.py redirect the browser to a different page once it has finished running whatever functions with the form data.
I'm not sure of the situation you have but if you don't have access to edit mail.py then perhaps you can get a local copy of it if possible.
If Possible then write a name same name in "action='current_filename'"
<form name="input" action="current_file_name" method="POST">
Username:
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
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.