Execute JavaScript on Form Submit - javascript

I have a form displayed on a layer (I'm using ChicoUI as UI Framework), everything is managed through Google Apps Script. Everything went fine (The submit sends data to a google spreadsheet), but I need the following: When the submit button is pressed I need to change the layer content through a simple js line. to display the classic "Thank you message" with a close button.
As far as I saw, everything leads to return something in the gs script, for instance in the doGet() method.
It´s posible to execute a framework method instead of returning something? Remember that I have no issues with JS, but with Google Apps Script.
Thanks a lot in advance!

Here is an example I have done with jQuery. I think it might help to understand what you want to achieve.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#myform").submit(function(event) {
event.preventDefault();
google.script.run.withSuccessHandler(function(e){
alert("Thank you"); // Here you can write thank you message.
}).myFunction(this); // passing forms data to apps script.
});
});
</script>
<form id="myform">
<input name="user1" id="user" type="text" value="">
<input name="user2" id="user" type="text" value="">
<input name="user3" id="user" type="text" value="">
<input type="submit" value="Submit Form">
</form>

Related

Redirect to user defined location

I'm trying to write a form in which user writes a location and the page redirects there after submit. How can I accomplish that? I have problem to find out how to put something to action="" when I do not know the value yet. Something with this logic:
<form action="how-to-get-this-value">
<input name="location" type="text">
<input name="submit" type="submit">
</form>
I can use whatever I want to do this (javascript, css, php...).
You don't need to make a <form> to do this. Forms are used more often for processing data. Instead, you can use Javascript. There are many ways to do this, but if you want to use a <form>, the easiest way is to redirect the user when they submit the form as follows:
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<form id="form">
<input id="url" type="text">
<input type="submit" onClick="red(); return false" value="Submit">
</form>
Of course, you would probably want to add verification methods to make sure the user gets to where they want to get (ie typing "google.com" would take them to "https://www.google.com/" instead of "yourdomain.com/google.com/").
Alternatively, you can simply remove the <form> tags, and it will work the same.
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<input id="url" type="text">
<input type="submit" onClick="red()" value="Submit">
There are a lot of good answers for this question. But I advise you to do the following...
Create a HTML form like this:
Them submit it to the php page with this. This can also be the same page.

Mobile upload refreshes page and file does not upload

I've asked this question to the admins of Smartjobboard software yet they are so inactive ill ask here...
On mobile phones/Ipads a jobseeker is able to apply to a job with a CV by uploading it and submitting it. However for some reason when a user uploads a CV it will sometimes refresh the page and the CV will not be uploaded..However on desktop the upload never breaks and works flawlessly
I'm pretty sure its something to do with the page speed or/and how the page loads. But to be proactive in getting this fixed and working as it should I thought id ask you genius people for help :)
Anyway the codes... (Posted in pastebin)
Apply_now.php - http://pastebin.com/JasSWTEg
The form for applying :
<form method="post" enctype="multipart/form-data" id="applyForm" action="{$GLOBALS.site_url}/apply-now/">
<input type="hidden" name="is_data_submitted" value="1">
<input type="hidden" name="listing_id" value="{$listing_id}">
<fieldset>
<div class="inputName" style="width:19%">
[[Attach your CV]]:
</div>
<div class="inputField" style="margin-top:7px;">
<input type="file" name="file_tmp" />
</div>
</fieldset>
<input class="button-green" type="submit" value="[[Apply Now]]" onclick="return applySubmit();"/>
</form>
Apply Script :
function applySubmit() {
$("#ApplicationForm").hide();
$("#applyForm").ajaxSubmit(
{
url: $("#applyForm").attr("action"),
type: "POST",
success: function (data)
{
$("#messageBox").html(data);
}
});
return false;
}
I'm unsure if there is a problem within the applying script/php/code it self. I'm working on the pagespeeds now to eliminate render blocking etc etc to see if its causing the issue.
As said in the comments, add a action tag to your html form.

Submit a Form without redirecting

I want to submit a form without redirecting page. Form is submitted to third party so i can't make changes in php.
What I want to do is:-
Submit for without visiting third party page.
After successful submit show alert.
Current I am using hidden iframe and form target to hidden iframe but I am not satisfied. Is there is any better way to do this using javascript or jquery.
My Form:-
<form target="iframe" action="http://www.example.com" type="post" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
My Iframe:-
<iframe style="display:none" id="iframe"></iframe>
You need to use Ajax for that kind of request.
Please look at some tutorials, this for example http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html
Change the iframes id attribute to name:
<iframe style="display:none" name="iframe"></iframe>
You can use jquery here
<form action="http://www.example.com" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
and after in jquery you write like
// bind to the form's submit event
$('#myform').submit(function() {
alert("ok");
return true;
});
Consider using a PHP proxy.
Copy the script from here to anywhere you like on your own server.
Modify line 11 so that it points to the URL you are posting to at the moment.
// Destination URL: Where this proxy leads to.
$destinationURL = 'http://www.otherdomain.com/backend.php';
Then in your ajax script, change the URL to your proxy.php script.

why this dijit.form doesnt submit?

Why this form wont submit?
<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="Cart.php" method="post">
<input type="text" name="searchName"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="searchName" />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioOne" value="full"/> <label for="radioOne">Full</label>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioTwo" value="short"/> <label for="radioTwo">Short</label>
Data Select
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="2">Data1</option>
<option value="1">Data2</option>
</select>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>
Some javascript too:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit/layout/AccordionContainer");
dojo.require("dijit/layout/BorderContainer");
dojo.require("dijit/layout/ContentPane");
</script>
Maybe its a stupid question, but ive been looking at it several hours and still cant figure it out.
Thanks in advance
I'm not sure what do you meet by won't submit. I moved your code into JS Bin (http://jsbin.com/iziwen/1/edit) and it works fine:
If you experience problems on the server side I suggest you change encType="multipart/form-data" to enctype="application/x-www-form-urlencoded" (or do not use it at all as it is the default value) - you do not need multipart/form-data, you are not sending files (see more here).
If this won't help, please specify won't submit more precisely.
EDIT: I do not use dijit/form/Form submit functionality, I just grab form data and send those via XHR to my web service, but I had a look at how submit functionality works and it seems so you need an <iframe> to use submit functionality. So this is what I changed:
A. Form definition - target:"formSubmitIframe" points to iframe id:
<form
id="myForm"
data-dojo-id="myForm"
data-dojo-type="dijit/form/Form"
data-dojo-props="action:'Cart.php', method:'post', target:'formSubmitIframe'"
>
B. Added iframe:
<iframe name="formSubmitIframe" src="about:blank"></iframe>
Once all works for you add style="display:none;" to iframe to hide it.
See it in action in JS Bin: http://jsbin.com/iziwen/7/edit
N.B.: I do not recommend submitting a form this way. If you do not need to go cross-domain or sending files, simply get form data via var data = dijit.byId("myForm").get("value"), so you will have form data in JSON and then send them up via dojo/xhr or dojo/request (for dojo 1.8+).
Also dojo/xhr is capable to send form just by providing a form id to it - here is a nice example: http://livedocs.dojotoolkit.org/dojo/xhr

Auto-submit form through Grease-Monkey

I have been using different script for auto submitting form like:
document.getElementsByTagName('form')[0].submit();
But all these refresh for endless time without submitting the form. I tried using alert statement which worked fine but still the form was not submitted.
<form id="level" method="post">
<br/>
<label for="answer">Answer:</label>
<input type="text" name="answer" id="answer" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
.
With all your questions, I could try another conclusion.
If you're trying to make a brute-force attempt to retrieve a password, the server could have identified your ip and just stall your request because you've tried too often. Or even notice you're inhumanly fast with your request. These kind of things are a base defense against brute-force attacks.
The code should work fine.
Another guess could be that the page actually does something different when clicking that button, in stead of the normal submit. So you could try simulating a click on the button in stead of submitting the form directy.
$('#submit').click();
that line of code is right, maybe it is DOM issue, there is another <form> before or something else
you can try to access by ID
or jQuery :
$("#level").submit();

Categories