I want to build a simple form with Sencha Touch, and attach a submit handler to it. Either I'm a n00b, or this is surprisingly hard to do. Here's what I want:
Attach an onSubmit handler to the form, not a onClick handler to the submit button
Cancel form submission when the form is submitted.
The problem is that regular Sencha Touch buttons are not buttons at all - they are just a bunch of divs and spans. Hence, tapping on the submit button doesn't fire the native form submit. As a result, a handler will need to be attached to the "button" to fire a submit on the form, and then capture the submit of the form to do what I want. This is doable, but doesn't sound elegant. Is there a better way of doing this?
The second problem is that of event canceling. How do I get a handle of the submit event object so that I can call preventDefault on it? Is there any other way to do this in the Sencha Touch world?
If you want to perform a stand submit action on a form, you need to set the "standardSubmit" config property to true, which will force a standard submit when the form is posted.
And yes, you must attach an event handler to a button but it' very easy. All you have to do is setup the button like so:
{
xtype: 'button',
text: 'Next',
handler: this.tapHandler //<= common tapHandler for the page
}
Then setup a handler like so:
// Toolbar button handler function
tapHandler: function (button, event) {
switch (button.text)
{
case "Submit":
myForm.submit({...config object see API...})
// to cancel event simply return false
return false;
break;
}
}
You have got an option "submitOnAction: true,", which lets you submit when user clicks button Ok/Go on the virtual keyboard on mobile device (works fine for iPhone/iPad).
app.views.newItemForm = Ext.extend(Ext.form.FormPanel, {
submitOnAction: true,
activeItem: 1,
...
Related
I am using <q-modal>(Quasar Framework) for a form. On clicking Add button a form will pop over. In this, I am validating each form tags, after clicking submit button. To close the modal, I am using #click="$refs.maximizedModal.close()" for submit button.
Everything works fine. Now I need to retain modal if the validation is not returning true or if validation satisfies then the modal need to be closed.
Is there any method to do conditional submit in Vue js?
You should make a custom function for the submit of the form and use it, something like this :
....
methods{
checkForm(e){
if(VALIDATION_IS_TRUE){
//Validation has passed, we submit the form OR close the modal
$refs.maximizedModal.close(); // Maybe this.$refs.maximizedModal.close()
e.target.submit();
}else{
//The form is not validated, do something to inform the user
}
}
}
and instead of using the #click for the submit button, add this to the form element :
<form #submit.prevent='checkForm($event)'>
Hope this helps!
Hi I have created a zend_form_element_submit. Now i want to display a confirmation message when someone clicks on submit. And when the user selects yes or ok, the form should be submitted. I read about javascript confirm() function, but was wondering if there is anything provided by zend.
You can do it using Zend Framework but in my opinion, I think it's more user-friendly to use javascript to handle this kind of thing.
For example, you would trigger a jQuery Dialog (modal confirmation) once the user click on the submit button. More information about jQuery Dialog here.
To do that, you should assign an identifier to your Zend_Form subclass and assign a javascript submit handler to that form.
To assign an id to the form, use the setAttrib() function in your Zend_Form::init() function:
/**
* init the form
*/
public function init()
{
$this->setAttrib('id', 'search-form');
.....
}
and then you can use this event handling code to override the form's submit function:
// submit search form
$('form#search-form').submit(function() {
if (confirm("....")) {
return true;
}
return false;
});
The FlashMessenger component is what you need in this case. You can choose to render the messages via direct HTML or via JavaScript.
FlashMessenger Action Helper
FYI: you can build a partial view template which only gets rendered if there are >0 messages.
On the button you can set an attribute:
$button->setAttribute('onclick', 'if (confirm("Are you sure?")) { document.form.submit(); } return false;');
I have a page with some generated HTML that survives the form's reset button. It is a problem because that HTML is inconsistent with the values in the cached default form.
In principle I guess it could be solved easily if I could force a hard reload from the server when the user presses the reset. However I see that the Chrome browser does not support the onReset event (in fact it is deprecated in HTML5).
But perhaps I could work around the missing onReload event. Can I re-define what happens when the reset button is pressed? In my case the apply and reset buttons are located in general HTML templates which I cannot change. Can I attach a function to the button from JavaScript?
You can replace the "reset" button , by a regular button.
And use the "onClick" event, to trigger a page reload.
EDIT
oops I missed the template part,
You can add a function to a button from Javascript.
First you need to "get" the button, with something like document.getElementbyId('resetButton');
If the button doesn't have a ID, you still can to retrieve it by doing javascript dom traversal
then you can add a function like :
var resetButton = document.getElementbyId('resetButton');
resetButton.onclick= reloadPage;
function reloadPage(){
window.location.reload();
}
I have a form with three radio button options, and a "submit" button (no checkboxes, no text fields). Yet if a user clicks the submit button, without choosing an option, the form still submits it, picking the first option anyway. What's the best method to prevent a form from being submitted if the user DOES NOT check any of the radio buttons? (My CMS is ExpressionEngine, and this form is generated using the CartThrob extension, just FYI. But it's not a CT issue as far as I can tell.)
With jQuery you can return false if there is no value for that input.
$('form').submit( function() {
if ( !$('input:radio[name="myRadio"]').val() ) {
alert('Fix this!');
return false;
}
});
You may need to change ! to =='', but that's the idea.
I'm creating a webapp for the iPhone, based in HTML/CSS/JS. I'm using forms to receive input and pass data to the script, but a problem I'm encountering is that the keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).
Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.
Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()
document.activeElement.blur();
You could try focus()ing on a non-text element, like the submit button.
Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
To detect when the return button is pressed use:
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.
The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:
jQuery solution
We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:
Does the touched area represent the input?
Is the input focused?
Given these two conditions we then fire a blur() event to remove focus from the input.
ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS solution
Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)
In that situation the solution would be:
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
Hope it helps!
$('input:focus').blur();
using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.
Be sure to set, in CSS:
body {
cursor: pointer;
}
otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
For anyone using Husky's code in AngularJs here is the rewrite:
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.