I want to tie a ServerHandler to a submit button so I can do validation of my form prior to submission. If the validation succeeds, then the POST of the form will be carried out. If the validation fails (due to an incomplete or incorrect field), then the POST will be stopped, and the ServerHandler can indicate the incorrect fields. The kind of thing you do in Javascript with event.preventDefault(), or returning false in the button handler for a submit.
var app = UIApp.getActiveApplication();
var form = app.createFormPanel();
var panel = app.createVerticalPanel();
// Add form elements to panel such as textboxes, radio buttons, list boxes etc.
...
...
var button = app.createSubmitButton("submit");
button.addClickHandler(app.createServerHandler("validate").addCallbackElement(panel));
panel.add(button);
form.add(panel);
app.add(form);
function validate(e) {
// Do the validation of the form
// QUESTION - How do we then disable or allow the POST?
}
So the kludge I'm currently doing is to have a validate button (normal button), which gets changed to a 'submit' button if the form validation done in the serverhandler is good. The user then has to click the button again to submit the form. I have to lock all the elements to prevent them changing any fields once the validation is good. There has to be a better way more akin to the Javascript route mentioned above, and referenced here: event.preventDefault() vs. return false
For reference, if you tie the validation ServerHandler to a submit button, it will always do a POST.
Related
I am attempting to trigger a form submit from an input [type=file] dialog box window. I'm trying to streamline the process of selecting an image and then having to click another button to submit the form to the database.
I have updated the question to include screenshots and code below to hopefully make the issue I'm having more clear.
Note:
It was asked why I don't add an id to the input button, but I can't, as the file input is invoked from the function, and as it's a windows process, I have no ability to add/change it.
Here's some code / pics to better illustrate the issue.
1 - The user clicks the change pic button to update their profile image. This button runs a shortcode [upload-user-profile-avatar].
2 - The shortcode triggers the standard input file open box window.
3 - After the user either double clicks a file, or single clicks a file and presses the open button, the form for the user profile avatar plugin is automatically submitted.
Attempts:
I originally started out using jQuery to attempt to attach to the form and submit it on click,
jQuery('input[type=file]').change(function(){
nameOfForm.submit();
});
However I read in a SO post that someone else was attempting something similar, and jQuery wouldn't submit the form, so they had to switch to javascript, which I did (since jQuery wasn't submitting the form)...and I came up with this for testing purposes.
var form = document.getElementsByClassName("update-user-profile-avatar");
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'file') {
console.log(inputs[i].value);
form.submit();
}
}
So this was helpful in so much that I could see that the open dialog window is grabbing the correct filename, but still, the form isn't getting submitted and I'm getting a form.submit() is not a function error in the console.
So then I read that html form submissions can have a lot of weirdness about them, so try something along these lines.
jQuery('input[type=file]').change(function(){
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'file') {
console.log(inputs[i].value);
HTMLFormElement.prototype.submit.call(form);
}
}
});
which produced this error:
'submit' called on an object that does not implement interface HTMLFormElement.
So I think I'm spinning my wheels here. I sense this is doable, I'm just not using the right method to do it.
I think you're looking for the change event:
Demo
$('input[type=file]').change(function(){
$('form').submit()
})
Unfortunately for security purposes the browser isn't going to let you access the open window. However with the .change() method, it will trigger whatever function you'd like once the value of the input has changed. Whether they double click a file to select it, or click the file and "open" button.
Using the JEditable JQuery plugin, and everything seemed to work fine in Firefox. However, in Chrome whenever I selected something out of a JEditable dropdown, or clicked Enter when editing a JEditable textbox, the form JEditable creates on the fly was being submitted, and my entire page was refreshing. I didn't want that to happen, as I've got it configured to call a custom function that makes an Ajax call to do the update. How do you keep the JEditable form from being submitted when changing the value of one of the form inputs?
My understanding from researching online is this is a Webkit-browser issue, not just a Chrome issue, as it seems Webkit-based browsers automatically submit forms when inputs in the form are changed.
After much trial-and-error I found one way to get around this is to use JEditable's bind function. The bind function gives you access to the form JEditable creates, and you can hijack the onsubmit event with that.
So first, create a function to override the form's onsubmit event.
var bindSubmitDisableWebkitSubmission = function(settings, self){
$('form', self).attr("onsubmit", "return false;");
}
Then bind that function to the various JEditable events that you don't want to submit the form.
$.editable.types['select'].plugin = bindSubmitDisableWebkitSubmission;
Note that using preventDefault and returning false (see below) didn't work.
function bindSubmitDisableWebkitSubmission (settings, self) {
$('form', self).submit(function(e){
e.preventDefault();
return false;
});
}
Using UiApp to collect data from a form, but I have users double clicking the submit button. This runs doPost twice. Granted, they have to click mighty fast to get it to actually post twice, but it happens.
My questions is: has anyone had experience in disabling the submit button, say with an onMouseUp? Is there a better way to do this? I've been told to be wary of adding multiple onClick handlers to buttons, as it can be unstable. Any stable solutions to this?
I have to use a submit button as there is a file upload in the form.
I've faced this problem and ever since Google introduced ClientHandlers, there is a way out.
Just add a client handler to your submit button disabling it (and remember to enable it when you are done with the server handler function or doPost)
var plswait = app.createClientHandler().forEventSource().setEnabled(false).setText('Please wait...');
var btnSubmit = app.createSubmit().addMouseDownHandler(plswait);
is my favourite.
The first answer didn't work for me because the MouseDown handler didn't let the ServerHandler run. But it gave me the right direction. I just added the Client handler to disable the button before I added the Server Handler...and that seemed to work to prevent the double click. Like this:
var submitButton = myapp.createButton("Submit");
var myServerHandler = myapp.createServerClickHandler("myServerHandler");
var pleaseWait = myapp.createClientHandler().forEventSource().setEnabled(false).setText('submitting...');
submitButton.addClickHandler(pleaseWait);
submitButton.addClickHandler(myServerHandler);
I had the same problem, but to work around it I created a second "false" button that becomes visible when the submit button is clicked, at the same time the "real" submit button visibility is set to false. Here's the basic code:
var button = app.createSubmitButton('Submit').setId("button")
.setEnabled(false)
var falseButton = app.createButton('Submit').setId("falseButton")
.setEnabled(false)
.setVisible(false);
var handler = app.createClientHandler()
.forTargets(button).setVisible(false)
.forTargets(falseButton).setVisible(true);
button.addClickHandler(handler);
panel.add(app.createHorizontalPanel().add(button).add(falseButton);
I already read some answers to this question on stackoverflow but I was not able to get my case working.
I have the components in GUI Builder and the code runs to function respondToSubmit after pressing Submit button, but the fileName is undefined. fileName is the content of Name in Input Fields in component File Upload. Any Ideas what is wrong?
function respondToSubmit(e) {
var app = UiApp.getActiveApplication();
var fileBlob = e.parameter.fileName;
throw(fileBlob); // fileBlob = undefined!!!
return app;
}
RECENT CODE:
function doPost(e) {
throw("doPost"); // never thrown so code does not run here!
var app = UiApp.getActiveApplication();
var fileBlob = e.parameter.FileUpload1;
return app;
}
I think you have to have your labels, text boxes, and submit buttons all in a Flow Panel, which then has to be enveloped by a Form Panel. I had this exact same problem, even the 'Unexpected Error'. I solved it by putting all of those elements into a Flow Panel.
There are two types of buttons - one is the regular button and the other is a Submit button (which can be placed only on a form panel)
Make sure you are using the Submit button and not a regular button
When you use a Submit button, there is no need to provide a handler function. Submit buttons, by default get handled by a special function called doPost(e). So, write a doPost function and you will be able to filename parameter.
The FileUpload widget documentation has a nice example of how this is done.
I replaced the type="submit" on my form with a type="button", to prevent form submits when the user presses enter. Will this prevent enter from submitting the form in all browsers?
Some browsers will still automatically submit when enter is pressed. If you really need some feature apparented to this, you might rather implement your own filtering with the onSubmit event handler.
Then, you can force the submission of the form by actually calling the submit method from Javascript. Of course, you would need to set a specific flag to allow your submit to go through this time. Something along the lines of (with jQuery)
//flag definition
var form_is_ready = false;
//event handler for the form submission
$('#your-form-id').submit(function() {
if (!form_is_ready) {
return false;
}
});
//function you have to call to actually submit the form
function do_submit() {
form_is_ready = true;
$('#your-form-id').submit();
}
That's just a crack shot piece of code written on the fly. You should adapt it to suit your needs.
This is a poor decision for usability and should be avoided.
It's seems not. This question suggests that submission will still happen in Chrome.