My understanding with forms, is that if the form has an ng-submit action associated with it, then pressing the Enter key would invoke that action, typically mimicking the click of the form's "submit" button. I have a form that does not have have a button, but a custom image of a button within a div tag and the div tag has the ng-click action. When I press Enter, nothing happens. What am I missing?
Make your button type submit and add a class attribute and style your button to make it an image like:
<form ng-submit="someAction()">
<button type="submit" class="submitbutton">Submit</button>
</form>
And do style your button in css like:
.submitbutton {
background:url('....') // your custom image
}
Then your custom image will act as the submit button and invoke the form action when click the enter key.
It worked for me by adding ng-submit, ng-controller & button type as submit
<form ng-submit="func()" ng-controller="MyController">
<button type="submit">Submit</button
</form>
if your form contains md-autofocus - remove it.
worked for me.
For Angular 13:
<form (ngSubmit)="search()">
<input type="text" id="inputword" />
<button type="submit" id="send" class="btn btn-lg btn-primary">Search</button>
</form>
Related
The form's submit button is this one: <input type="submit" className="btn btn-default" value="Vender"/>, I know that I can add a JQuery script but I want to keep using solely React. I am not using React-bootstrap, just regular Bootstrap. I also tried adding data-dismiss="modal" but then it closes the modal form without changing the app's state
Use the <form> element's onSubmit property.
<form onSubmit={this.onSubmit}>
...
</form>
You can close the modal and update the app state from within there.
I am dynamically creating form fields using ng-repeat. I have a div with several inputs/selects and when I click an "add" button, they gets duplicated. No problems so far. However, I also want to perform form validation when the submit button is clicked. Right now, I am doing the following to alert users a field is invalid when the submit button is pressed:
.ng-submitted select.ng-invalid, .ng-submitted input.ng-invalid {
background-color: red;
}
This works as expected provided I have not dynamically added inputs to the form. If I add new inputs to the form, .ng-submitted gets added to my form element (without submit being pressed) and all the required and invalid inputs turn red. You can see an example of this here: https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview
Not only do I not want the inputs turning red when simply adding elements, I also don't want the form submitting unless someone has hit the submit button. There must be something I don't understand about submit with angular forms and help would be appreciated.
EDIT: further testing shows that the button element is the problem.
<button ng-click="addRow()">add</button>
This works fine however:
<input type="button" ng-click="addRow()" value="add"/>
Not sure why this is though.
The default value of the type of a button is "submit". So clicking it submits the form. Putting type="button" explicitly prevents the form being submitted when the button is clicked.
If you want to use form submit you need to use ng-submit on form and change button type to submit.
<form name="form" ng-submit="addRow()">
<div>
<div ng-repeat="row in rows track by row.id">
<input type="number" min="0" ng-model="row.id" required/>
</div>
<button type="submit">add</button>
</div>
</form>
There were multiple changes needed in your code. I have fixed them in this plunker: https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview
What I am trying is, to disable the action of close in ng-dialog pop up until any other button is clicked.I want to do that until I give some text on input in pop up and click on save button the pop up should not be closed either by into (*) mark
Suppose you have a template of pop up like below :
<button type="button" ng-click="closeThisDialog('button')" ng-disabled="demoForm.$invalid" class="btn btn-default pull-right">x</button>
<br>
<form name="demoForm">
<h3>Close button disabled untill no input</h3>
<p>Here input field is required so untill input box is not valid you cannot close the dialoug.</p>
<p>Once you enter the input close btn will be enabled</p>
<input ng-model="confirmValue" required/>
<br>
<br>
<button type="button" ng-disabled="demoForm.$invalid" ng-click="closeThisDialog('button')" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-default">Save</button>
</form>
You can add form in your pop-up template just shown in above template.
Now as per your requirement user should not close the popup until he didn't enter any input so there is validation in form.
Just disable close button until form is not valid.
Check out this demo
You can refer more here in doc of ng-dialog.
the easiest way of having control over ngDialog via buttons is to change the default boolean of closeByDocument and showClose to false. Then you can only use buttons to exit.
I'm building a form and within that form is a secondary function that I wish to run. However, when I click the button for my secondary function, backbone fires and runs validation over the whole form. How do I either:
a) Make Backbone ignore that specific button and do nothing when it's clicked
or
b) (Preferred) Tie Backbone validation to only the form submit button or the button type "submit".
Example:
<form name="myForm" >
<input type="text" name="yourName" ng-model="yourName" required />
<input type="text" name="postcode" ng-model="postcode" required />
<button id="checkPostcode" type="button" >Check Postcode</button>
<button id="submit" type="submit" >Submit</button>
</form>
In this case, I only wish Backbone to run validation when the submit button is pressed, so that I can run my checkPostcode function without interference.
Thanks :)
You should add an eventListener to the button and prevent the default. Something like this:
var view = Backbone.View.extend({
events: {
"click #checkPostcode": "checkPostcode"
},
checkPostcode: function(event) {
event.preventDefault();
// the actual check would go here
}
});
Live Demo
Consider the following form:
<form>
<div>
<label>Status: </label>
<button ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id" btn-radio="status.id">
{{ status.name }}
</button>
</div>
<div>
<label>Name: </label>
<input type="text" ng-model="job.name">
</div>
</form>
When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo
Why is this happening? How could I stop this side effect?
From the ngForm docs:
This is because of 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)
Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.
To remedy, just put type="button" on your buttons.
<button
ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id"
btn-radio="status.id"
type="button"
>
{{ status.name }}
</button>