I am developing a simple Dojo application. I have a bit of a problem with my forms.
I have a form like this:
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
<label for="${id}_login">Login</label>
<input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
<label for="${id}_password">Password</label>
<input name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
<input type="submit" data-dojo-attach-point="loginButton" data-dojo-type="app.BusyButton" label="Login!" />
</form>
In the app I have:
this.loginForm.onSubmit = function(e){
// Do Ajax calls etc.
// ..
// Prevents actual submission
return false;
}
However, if anything goes wrong with the Javascript before that "return false", the form is actually submitted, which results in an error (my node app will return Cannot POST /login as there is no POST action defined for that URL).
How can I make 1000% sure that the form doesn't get submitted in any case? I know I could get rid of the tag altogether since I do everything with Ajax, but... then I wouldn't get the nice data = that.loginForm.getValues(); for example. (I mean, it is a form after all)
(NOTE: I am NOT interested in non-javascript downgrading, really. The app is a 1-page ajax app, and there is no point in getting it to work if the user doesn't have AJAX) )
preventDefault will stop the browser from performing the default action (ie: submitting).
this.loginForm.onSubmit = function(e){
e.preventDefault();
// Do Ajax calls etc.
// ..
}
See here for more information.
Related
This question already has an answer here:
Moving google apps script to v8 file upload stopped working from sidebar
(1 answer)
Closed 2 years ago.
I don´t know if there is a way on making this work, but I want to make a form with input type=file.
But when I submit the form it won't work cause of the input type=file and cause of my access permission is set to me only in the Google Apps Script.
Well the code goes like this, I'm just showing the base code which I'm having trouble with. Whenever I remove the line with the input file it will submit the form and add in a spreadsheet the value I've input in the first name text box. And I've notice that it also works when I leave the input file line, when I change the permissions in my script, when I publish the code as a web app, and in the "Who has access to the app" put "Anyone, even anonymous", the thing is that I don't want that anyone could access the webapp. I'm just thinking on rewritting the gs code to check the user accessing the web app, but I'm not sure if this would be safe.
GS Code:
function doGet() {
var template = HtmlService.createTemplateFromFile('HtmlName');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
var firstName = formObject.firstName;
DriveApp.getFolderById("anyID").addFile(driveFile);
ss.appendRow([formObject.firstName,
]);}
Html File
<!DOCTYPE html>
<html>
<body>
<form class="w3-container" id="myForm" onsubmit="handleFormSubmit(this); ">
<p>
<input class="w3-input" name="myFile" type="file">
<input class="w3-input" type="text" name="firstName">
<p>
<input class="w3-button" type="submit" value="Submit">
</form>
</body>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
}); } }
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
</script>
</html>
There is a known issue regarding the use of <input type="file" /> on Google Apps Script HTML Service when using the new default runtime (Chrome V8)1. As your code isn't using features not supported by the old runtime, try to disable the new runtime (click on Run > Disable new Google Apps Script runtime powered by Chrome V8).
If disabling the new runtime doesn't work try using FileReader.
NOTES:
See Tanaike's answer to Moving google apps script to v8 file upload stopped working from sidebar
I'm building a registration form in Angular 2 that asks a user to provide their website's URL before submitting.
When the form is submitted, I need the provided URL to be in the style of "http://www.google.com". To steer the user towards that format, I want the form field to autofill the initial "http://" as soon as the user clicks on the field (or when the user begins typing - either case would be acceptable). Currently I have placeholder text in the field that says "Please provide your website's URL", but I'm having trouble making the "http://" prefix appear when the user actually clicks on the field or starts typing.
Any ideas would be appreciated. Here is what the form field looks like when the user clicks on it. It's contents should switch to "http://" when clicked or typed in. Here is what the code looks like at the moment:
<div class="form-group">
<input
class="form-control"
type="text"
name="companyUrl"
[(ngModel)]="user.companyUrl"
placeholder="Company url"
required pattern='https?://.+'
#companyUrl
>
<div *ngIf="companyUrl.errors && (companyUrl.dirty || companyUrl.touched)" class="text-danger">
<div [hidden]="!companyUrl.errors.required">
Company URL is required.
</div>
<div [hidden]="!companyUrl.errors.pattern">
URL should begin with http:// or https://
</div>
</div>
<div>
Add a function to add the prefix on click event of the input.
Something like below:
<input #companyUrl (click)="addHttpPrefix()" >
And in this function
1. Get the value of companyUrl.
2. Check if it begins with http then skip else prepend with http://
if(companyUrl.indexOf('http') > -1) {
companyUrl = 'http://' + companyUrl;
}
This way when the user initially clicks on the input http:// would be appended.
if the (click) event does not meet your requirement you can try using (change) or other events.
I'm using spring security for normal login form, where users register and then enter their username and password to login. I'm using login with facebook and login with google options, I'm able to authenticate users and finally get user's info like email, first name, last name etc, After logging into either fb/google I'm using fb/google user email(unique) as user name and system generated password as login credentials so that these values will be entered automatically to spring security login form and then if I click on submit button he/she will be able to login and then session handling will be taken care by spring security as in case of normal user who registers in my website.
Since, all the steps described above are automated except last step i.e. submitting the form
I want to automate the last step also using either javascript or JSP. i tried submitting the form using javascript inside JSP but its unable to
<%
if(Success_login_with_facebook/Success_login_with_google)
{
email = fb_email/google_email;
Sql query to get username and password from db using email;//unique row will be returned
uname_db = username;
uname_pass = password;
out.println("<script>document.forms('login').submit();</script>");
}
%>
<div id="autologin" style="display:none">
<form name="f" id='login' action="<c:url value='j_spring_security_check'/>" method="POST" >
User ID <input size=35 type='text' id="first" name='j_username' value='<%=uname_db %>'/>
Password<input size=35 type='password' name='j_password' value='<%=pass_db %>'>
<input type="hidden" name="_spring_security_remember_me" value=true>
<input style="height:30px" name="submit" type="submit" value="Sign In">
</form>
</div>
Your solution should work, but it's missing one thing. You need to make sure that the form exists before trying to submit it wis JavaScript. In your example, you're doing an out.println above the form. Move this to below the form, and the JavaScript should work fine.
The reason why it did not work is because the html form has submit button name as "submit", and if we try to run the javascript document.forms['login'].submit(); it will not submit the form. If the form submit button name is other than 'submit' then it will work.
This code is almost perfect for what I need:
<form onsubmit="location.href='http://www.mysite.com/' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" />
<input type="submit" />
</form>
The only thing missing is if they user puts in an input that does not exist I want it to take them nowhere or redirect back to the same page. Right now it takes them to an error page and they have to use the back button to go back and try again.
Any help will be greatly appreciated.
Thank you
Could you perhaps write a small PHP script that you use as the form action? Inside this script, you could check the supplied user input and validate that the URL exists. If it does, you could do a header() redirect to the given page. If it does not exist, you could redirect them to the desired page.
<?php
$input = $_POST['myInput']; // You'll also need to add in a name='' tag in the HTML!
$desired_page = ''; // page you want to go to if inputted file cannot be found
if (file_exists($input)) {
header("Location: $input");
}
else {
header("Location: $desired_page");
}
It'd need a lot of refining, but that's the idea. Would that do what you want?
I am writing a form to be inserted in clients' webpages that is to be submitted with an AJAX request for processing. Then, depending on the client's settings, I want to either display a "Form Successfully Submitted" victory message, or I want to redirect the user to my site (by submitting the form to my site) for additional processing.
I'm using jQuery to try to get this to work. My strategy is to put a "live" binding to the submit event on my form, which then prevents the default submission and does a jQuery post using the form values as parameters for processing at my site. If the form passes validation AND its determined that the user needs to be redirected, the form submission is triggered again, but this time the submit handler returns true, which should enable the default, right? It does return true (I checked with alerts), but the form is not submitted. Here is sample code:
<form id="myform">
<!-- Elements in here -->
<input type="submit" value="Submit" name="submit" id="submit">
</form>
<script>
var handleSubmit = true;
$("#myform").live('submit', function(){
if (handleSubmit === true){
$.post('http://example.org', $('#myform').serialize(), function(response){
if (response.success){
if (response.redirect){
handleSubmit = false;
$('#myform').attr('action',response.redirect);
$('#myform').submit();
} else {
alert('success!');
}
} else {
// replace form contents with response.html (the form w/ errors)
}
}, 'json');
return false;
} else {
// submit form (default action)
return true;
}
});
</script>
I've tried different things like putting the submit trigger within a setTimeout, or using 'bind' instead of using live, but the result is the same.
One thing that is perhaps important to note is that the above code and the code for the form itself is also generated from an AJAX request from the client's site.
Any guidance you could give would be much appreciated. I am also definitely open to different ways of doing this.
Thanks!
The problem that you're having is actually with the input element:
<input type="submit" value="Submit" name="submit" id="submit">
The redirecting form submit is failing because names of form controls within a form element are exposed as properties of the form in the DOM and can cause conflicts with the form's original properties. Conflicts like this will fail silently when triggering events through jQuery's event functions. Changing your input element to the following should fix the problem you're having:
<input type="submit" value="Submit">