I have HTML form with <input> field and 2 buttons
to visit 2 different sites:
<form>
<input
type="search"
name="q"
>
<button
type="submit"
formaction="https://www.example1.com/"
>
Action 1!
</button>
<button
type="submit"
formaction="https://www.example2.com"
>
Action 2!
</button>
</form>
When I type something in the text field and click the Enter key, the form always picks the first button's action.
How can I make the form remember and execute the latest action instead?
So if I click on the Action 2! button, then clicking the Enter key will always delegate to that action, until I click on the other Action 1! button that would change the default to that action.
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 have a question about button control and form control. So, I wanted to show data inside field of the form according to the button clicked.
For example:
Button 1 clicked -> show the text field inside the form with text like "you clicked button 1".
Button 2 clicked -> show the text field inside the form with text like "you clicked button 2".
Maybe someone here can give an example.
Thank you.
Just Use jquery and capture the all button click event and get the name of clicked button and set the value to msg text filed like this .
$('button').click(function()
{
$('#msg').val("you clicked " +$(this).attr('name'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" >
msg : <input type="text" name="msg" id="msg" >
<button name="button1" id="button1" >button1</button>
<button name="button2" id="button2" >button2</button>
<span id="msg"> </span>
</form>
I want to submit the input value when pressing enter.
<input value={{company.name}} {{action 'save' company.id company.name}} on="enter">
Here, the save action fires when I click the input field. And the save action does not get fired when clicking enter.
I have also tried with on='submit' with the same result.
Is the input inside a form? because you can do something like
<form accept-charset="UTF-8" {{action "postMessage" on="submit"}}>
{{input type='text' class="form-control" autofocus="true" valueBinding="content" autocomplete="off"}}
</form>
and define the postMessage in the actions array of your component
I have an unusual problem. My form loos like this:
<form>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
ng-show="ts.test.current && ts.test.userTestId">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
ng-show="ts.test.current && !ts.test.userTestId">
Acquire
</button>
</form>
What I need is for the enter key to trigger the action of the current button primary. Note that the button primary can be one of two buttons depending on the state of other items on the page.
Can anyone suggest how this could be done? I saw reference to the ng-enter directive but if possible I think it would be better for me not to use non-standard directives.
Here is what I have tried so far. Unfortunately when I click enter nothing happens:
<form ng-show="ts.test.current && ts.test.userTestId"
ng-submit="$state.transitionTo('s.e.q');">
<button ng-class="{'btn-primary': ts.test.current == true}"
type="submit">
View
</button>
</form>
<form ng-show="ts.test.current && !ts.test.userTestId"
ng-submit="getTest(ts.test)">
<button class="btn"
ng-class="{'btn-primary': ts.test.current == true}"
type="submit">
Acquire
</button>
</form>
From the docs
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]) To prevent
double execution of the handler, use only one of the ngSubmit or
ngClick directives. 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)
So the trick becomes having only one button of type "submit" in your form at any given time, and choosing that button based on the state of your model. With multiple buttons, enter will trigger the ng-click on the the first button with type="submit" (and it will call ng-submit, although that's not needed here)
Unfortunatly, you can't modify the "type" of a button with a binding like this:
<button type="{{isPrimary ? 'submit' : 'button'}}">Acquire</button>
Also, ng-show doesn't remove the button from the DOM, so your current solution leaves you with multiple buttons of type="submit", in which case only the first one (hidden or not) will have it's click function executed.
If you only wanted to have one button visible at any given time, then changing ng-show to ng-if will do the trick (see this Plunk).
If you want both buttons visible, then the only solution I can come up with that doesn't involve creating a custom button directive is to duplicate your button blocks so that you use a different block based on your condition (see this Plunk).
<form>
<div ng-if="ts.test.userTestId">
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
type="submit">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
type="button">
Acquire
</button>
</div>
<div ng-if="!ts.test.userTestId">
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
type="button">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
type="submit">
Acquire
</button>
</div>
</form>
Change the button which should not submit the form to <button type="button">
button "clickable, but without any event handler until one is assigned"
See also: AngularJS: All buttons inside form triggers submit?
Do try ng-if instead of ng-show
CODE
<form>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
ng-if="ts.test.current && ts.test.userTestId">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
ng-if="ts.test.current && !ts.test.userTestId">
Acquire
</button>
</form>
You need to provide a submit method on the form itself and then just mark buttons as type="submit" if you want them to submit the form.
See Angular documentation on ngSumbit.
Reading your code it looks as though you only want one button visible at any given time. Based on that, I think what you really want is modify the label on the button depending on the condition of ts.test.userTestId.
Here's a jsfiddle demonstrating 1) the form submit handling, 2) the label change on your View/Acquire button, and 3) the fact that you can have an extra button if you really want it.
function ButtonController($scope) {
$scope.ts = {
test: {
userTestId: ''
}
}
$scope.getTest = function (value) {
alert('getTest called');
}
$scope.submit = function () {
if ($scope.ts.test.userTestId) {
alert("call $state.tranistionTo('s.e.q')");
} else {
$scope.getTest($scope.ts.test);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>The button</h2>
<div ng-controller="ButtonController">
<form ng-submit="submit()">
<input type="text"
ng-model="ts.test.userTestId">
<button type="submit">{{ ts.test.userTestId ? 'View' : 'Acquire' }}</button>
<br><br>
Here's an extra button which also submits the form. Notice that the submit routine
still only runs once and having this extra button doesn't cause any problems.
<br>
<button type="submit">Some other submit button</button>
</form>
</div>
</div>
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>