I have one problem with modal window.
I have couple section and in one section ( which is hidden ) I have button with ng-click='function()'.
<section class='hidden'>
<button class="mobileUpdate" ng-click="openMobileUpdateModal()">SMS</button>
</section>
openMobileUpdateModal() open modal dialog.
Problem is when I hit enter key on any input field in form it opens me modal window.
Any idea how to prevent this?
Thanks
Quoting the docs on form/ngForm:
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
ngSubmit directive on the form element
ngClick directive on the first button or input field of type submit (input[type=submit])
[...]
...the following form submission rules in the HTML specification:
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)
So, depending on the rest of your setup, you could solve the problem by changing the order of buttons, by detecting and filtering key-events, by introducing additional form elements etc.
in your openMobileUpdateModal() function place the if condition to detect the key event.
if the pressed key value is 13(enter key) return from the function else continue the function.
Please add button type to the model dialog button .
<section class='hidden'>
<button class="mobileUpdate" type="button" ng-click="openMobileUpdateModal()">SMS</button>
</section>
In form if we have any button enter click on input field will trigger the click event of the button.
So always add type="button" to all the buttons in the form other than submit Button
<form>
Name <input type="text"/>
<button type="button">open model</button>
<button type="submit">Submit Form </button>
</form>
Related
I am having a input in react component,
When the input is inside , Enter button will trigger a click, but if input is not wrapped inside form, Enter does not work,
Is wrapping input by form the only way to activate Enter button ?
<div>
<input name=“name” type="text"
value={somevalue} onChange={this.handleChange}/>
<button id=“searchbutton”
onClick={this.handleSubmit}>
{search label}
</button>
</div>
Is wrapping input by form the only way to activate Enter button ?
Your other option is to use a keypress handler on the input and check for the Enter key.
The reason it works when this is in a form is that browsers automatically click the submit button on a form if the form has only a single text input and the user presses Enter. Without the form, you don't get that automatic behavior.
//By default in form type of button is "submit". Change that to :
<button type="button" id="searchbutton"
onClick={this.handleSubmit}>
{search label}
</button>
I'm using Parsley to validate forms. I'm using 2.8 wbich is a more current version. When any button on my form is clicked (even it's not submit), Parsley will trigger a submit. For example I have this button which clears an uploaded photo.
<button id='attached-clear' onclick="App.clearPhoto('#attached')")
Clear
</button>
This will trigger a "submit" when Parsley is enabled. So when the user tries to clear the form it is submitted instead. I tried various options on the form of:
<form ... data-parsley-excluded='input[type=button]' ..>
And:
<button data-parsley-excluded="" ...>
But it always submits. If I disable parsley then I don't have a problem.
You need to add button type= 'button', submit is default value for type MDN ref
<form>
<button type='button' onclick="console.log('hello')">Clear</button>
</form>
In my JSP code, I try to use ng-submit on a form.
The problem is that there are many validations for the textboxes of that form which are implemented using ng-disabled in Submit button.
Now if I click enter key on a textbox then those validations will not be implemented and the form will be submitted.
How can I add the conditions here?
The only option I could think is to move all the conditions of ng-disabled to Javascript function.
<form name="customersForm" ng-submit="findCustomers(custName, custCity)">
<button type=submit **ng-disabled="validateInputs(custName,custCity)"**
id="listButton" ng-click="findCustomers(custName,custCity)"><span>Find </span></button>
Add the novalidate attribute to your form and add the required attribute to your form elements. From there, you can play with the validation of your form with the ng- directives. The form wont be submitted until all the fields are properly filled.
Thank you for any help.
I am trying to use Parsley for Form Validation. My form has one submit button and some other buttons to dynamically add inputs to the form. But when I press these other buttons, form validation is carried out. But I am not submitting any form.
How to prevent form validation from happening when I press other buttons than submit button?
Sorry, I dont know how to JS Fiddle. My code is like the following:
<form method="post" action="confirm" data-parsley-validate>
<input id="brand" data-parsley-trigger="submit" required />
<button id="addQuantity">Add</button>
<input type="number" required data-parsley-trigger="submit" />
<input type="submit" value="Submit">
</form>
When I press Add, the form is validated. How should I prevent this?
Thank you very much.
The tag button which was introduced in HTML5 is equivalent to input type="submit" hence when you press add it will automatically fire submit action. What you can do is replace the tag to input type="button" or you can prevent the default action in jquery like this
<script>
$('#addQuantity').click(function(event)
{
event.preventDefault();
//do your action goes below
});
</script>
I found adding formnovalidate to the button skipped form validation for the form only when clicking that button.
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>