I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>
Related
hope You all have a great day.Here I'm trying to create a form without submit buttons,but when press enter on the text-box the whole text-box gonna hide.why is this is happening?,is it actually possible to create a form without a submit button or is that is a mandatory thing?,thanks for Your valuable time.
<form >
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
When you hit 'enter' it submits the form.
I believe this is a natural part of a 'form' behavior for accessibility. Input inside of a form is meant to be data the user sends or inserts somewhere which is likely the reasoning behind this.
You can add to the Html form onsubmit="return false" or return preventDefault() as an event handler / function with other handling code you may want to provide.
Try this:
<form onsubmit="return false;">
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
I have a simple (mostly-working) submission form:
<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
<input type="text" placeholder="Title" name="title" required>
<input type="text" placeholder="ISBN" name="isbn" required>
<button id="submitBook" type="submit" onclick="addingBooks()">Submit</button>
</form>
My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.
I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.
If you need more then please let me know.
To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it
<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>
another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.
<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>
another and even better solution would be to not use the onclick attribute at all, use the addEventListener function
document.getElementById('submitBook').addEventListener("click", function(e){
e.preventDefault();
//other stuff
});
This prevent enter submit,but at the moment prevent enter in inputs.
I need that enterkey work in inputs but not submit form.
<template id="form-template">
<form action="save-passport" #keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded" >
<input type="submit" v-show="loaded" v-on:click="saveForm" value="Save" />
<input type="text" required="required" name="field-11" >
<select required="required" name="field-13"><option value=""></option>
</select>
</form>
</template>
Had the same problem. Solution I did was to put the submit method on the opening form tag. Then no need for the input/button type="submit" inside the form at the bottom.
<form class="form" action="" method="POST" #submit.enter.prevent="createForm()">
Also other options available on inputs:
#keydown.enter.prevent
#keyup.enter.prevent
#submit.enter.prevent
I did it this way
first i removed vue modifiers from form tag.
second i chaged type of input from submit to button
and third this my saveForm function
saveForm:function(){
if (someCondition){
event.preventDefault();
}else{
document.forms[0].submit();
}
}
You need to use the prevent modifier. Another thing, your webpage itself must have the focus. Meaning, if you just visit the webpage, prevent won't work. But, if you click somewhere in the form, prevent will work for you.
You can still submit the form via JavaScript using something like document.forms[0].submit();
Good Day
I am using an ASP.NET webform where I have wrapped the following button inside the form tags:
<form runat="server">
<button class="btn btn-primary" onclick="window.location='http://google.co.za';">Login</button>
</form>
ISSUE: The problem is that when clicking on the button, it just directs to the current page...does not redirect. However, when I remove the form tags, the button works. If I leave the form tags and I use an anchor tag to relocate, it works as well...It is just the button that is giving me issues.
Why is that?
I am using Twitter bootstrap as well(extra info..)
Thank you
Add type="button" attribute to your button tag. Without it button works as submit.
I have a piece of code like this.
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
How do I keep track of when what is the text entered in the form's textarea when the user navigates away from the page? I want to prompt the user with a warning message so he/she doesn't lose the text.
Thanks.
You could use the javascript/jquery blur event, and if the user hasn't clicked the desired button have it display the form values. This might help JQuery Blur Validation Problem
Stu
Take a look at this Javascript code snippet:
http://www.boutell.com/newfaq/creating/disableclose.html
This takes advantage of the window's onbeforeunload event which fires when the user is about to leave the page.