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
Related
I have a single page React app with a simple login form with two buttons LOGIN and BACK. If I click BACK LastPass still offers to save the entered username/password, even though I didn't login.
Is there any way to tell LastPass that the back button is a cancel button for the login form and that it shouldn't try to save the username/password in that case?
HTML looks something like this:
<input name="username" type="text" />
<button type="submit">LOGIN</button>
<button>BACK</button>
You can use <input type="reset" /> or <button type="reset">.
As its name says, a reset button is ment to cancel a form. When it is activated, all user inputs are cancelled and the fields are reset back to their default values, i.e. the ones that were specified in the HTML code.
In JavaScript, You may intercept an activation of the reset button by using the reset event on the parent form, i.e. form.onreset=..., form.addEvementListener('reset', ...) or <form onreset="...">.
Note that, as for submit buttons, it's a bad practice to intercept the click event directly on the button by using onclick: although there is no universal standard way to cancel the form as there is with the enter key to submit it (escape key don't cancel the form by default), you can't be sure that there is no other way to cancel the form than click on the reset button.
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>
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 :-)
I have a form with input type="email". Now I need the submit button to be disabled until the input field is empty, however if the user enters anything the button should be enabled.
Using ng-disabled on the button, but the problem is that the button remains disabled even after I enter something into the field and remains disabled until I enter a valid email id.
My guess that the html5 validation occurs before the angular js functionality can evoke or something like that.
<input type="email" class="span3" name="emailValue" ng-model="emailValue">
<button class="btn " type="button" ng-click="submit()" ng-disabled="!emailValue">
Any kind of help is deeply appreciated. I'm new to front end so i'm lost as in where to look for.
try
<button class="btn " type="button" ng-click="submit()" ng-disabled="emailValue==''">
that should work
................................................
You have to be sure it's a falsy value first. Simple
$scope.emailValue = '';
in the corresponding controller will do the trick
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 ;)