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>
Related
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>
I am trying to add value to a text field in a web view using javascript. First, I add value using this code :
webView.evaluateJavaScript("document.getElementById('birds').value = 'username';", completionHandler:nil)
second I need to press Enter button to run next function. Here is text input's info:
<input type="text" name="submit" id="birds" placeholder="Write username or name and press enter" "="" class="ui-autocomplete-input" autocomplete="off">
How can I programmatically trigger enter button?
Just select the form and call submit
document.getElementById("myForm").submit();
This article could be worth a read though, you may need to select the submit button and call the onClick method instead, it depends how that particular form handles sending it's data.
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.
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>