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.
Related
I have a table in which the last column of each row holds a Button that is intended to trigger a popup to "edit and save" certain values of that row in my React app. Part of the criteria was that clicking outside the popup would also close it while preventing the user from clicking things in the background until the popup closed.
To do this, I opted to use a package called reactjs-popup. Currently for all criteria, it works perfectly. The next step, though, was to run a function when the button is clicked so that I could pull data from the API to populate the fields. However, I found that I couldn't call any functions from the onClick of the button used as a trigger. This is the main snippet of code:
import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
trigger = {
<Button onClick = {() => { loadInfo() }}
}
modal
nested
>
{ close => (
<div className = "modal1" id = "popupForm">
// popup content with input forms with values to be populated
</div>
}
</Popup>
The main problem I have is the "onClick" part of the Button in the trigger. No matter what I put in there, it is never ran when I click it. When I test the same button as a standalone, and not as the trigger for the popup, it works fine.
I also tried using
onClick = {loadData()}
But this just caused the function to constantly run as soon as it was rendered, and inevitable break due to too many renders. Does anyone know why this reactjs-popup component does not allow onClick within its trigger? And if so, how to get around it? Thanks!
I believe you want to loadInfo when the popup opens.
For that, there is a prop onOpen in Popup which accepts a function . You can use that,
Or you can manually set open prop using state. Have a button outside popup and update the open state when it clicked.
I am trying to run a script that when a if() statement returns false it closes the current tab window of the google sheet or it redirects to another URL (as long as one of these work, thats ok for me).
I understand that this may be possible through using HTML but i don't know HTML well enough to do this.
I have found the below code which is meant to redirect to a different page which I tried but this does not work:
return HtmlService.createHtmlOutput(
"<form action='http://www.google.com' method='get' id='foo'></form>" +
"<script>document.getElementById('foo').submit();</script>");
Does anyone have any ideas?
See code that this is in below below:
if (name == password)
{
Browser.msgBox('You have succesfully logged in');
sortOutSheets();
}
else (name != password)
{
var response = Browser.msgBox('Login Failed - do you want to login again?', Browser.Buttons.YES_NO);
if(response == "yes")
enterPassword();
else(response == "no")
HtmlService.createHtmlOutputFromFile('Close Window');
}
}
I have now turned to writing the HTML in another HTML file but still no luck
Here are the steps that I would program.
Show Dialog box in spreadsheet asking for a password
User enters password
User clicks Submit button
Client side code calls the server and sends the password to code in GS file
Server code tests the password
If password is good, build new HTML and open another dialog box
The opening of a new dialog box will automatically close the first dialog box
The new dialog box will have a <a> tag link in it, built with a new url on the server
When the new dialog box opens, automatically run code with window.onload = function() {var aTagElement; aTagElement = document.getElementById('idOfLinkTag');aTagElement.click() }
The client code will automatically run when the dialog box opens, and programmatically click the link, which will open a new file in the same browser tab
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 want a html-form to
open a new window (which contains 2 frames)
send the data of the form to one of these frames as a request
Is this possible? Currently, the form just opens a new window with and sends the request to the URL of the page that processes it. But what I want is that the new window that opens has two frames, one of which processes the form data.
I hope you understand my question and thank you for an answer.
Option A
you will need to use AJAX and make those steps:
Open new window
Send request by using AJAX
Get response
Put response to DIV in new window
Option B
you will need to create special html file that will be default page one of frame. next you will need to copy whole form with values of inputs to this file and trigger the submit. this way is without AJAX but it's more hmm.... twisted?
tell which option you prefere and then i can help you with code if you want of course
You can open and access new window by:
newWin = null;
newWin = open("page.html", 'win1')
if(newWin&&newWin.open&&!newWin.closed){
newDiv=newWin.document.createElement("DIV")
newWin.document.body.appendChild(newDiv)
newWin.focus()
} else {
alert("The window is not open")
}