I'm trying to create my very first HTML code. My code is:
<html>
<head>
</head>
<body>
<input type="button" id="apply" value="Push Me" onclick="javascript:faa();" />
<input type="button" id="apply" value="No, Push Me Instead" onclick="javascript:foo();" />
Official website of Foocorp Inc. (Not really.)
</body>
<script type="text/javascipt">
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
</script>
</html>
Whenever I push the button with value "No, Push Me Instead" it works fine. The button "Push Me" doesn't do anything when I push it. What am I doing wrong?
text/javascipt should have an r in it.
HTML 5 makes the type attribute for script elements optional when you are writing JavaScript. When you are dealing with JS, the attribute serves no purpose other then to be an opportunity to make types that break your code so omit it entirely.
Works fine when I move the other function to the same script:
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
You have to change script type spelling, as there is a spelling mistake
<script type="text/javascript">
Related
I've gone through most of the relating questions regarding this and haven't found a solution that helps me (I've applied them one by one). I have an HTML form that I am publishing as a web app through google. I need to prefill an input box with that parameter.
code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('html')
.evaluate();
}
html.html
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
</body>
</html>
As I said, I've tried many suggestions in similiar questions, but can't seem to find one that works. The id is that I can type in my url + ?formid= and have that populate in the input. How can I make this happen as described?
Thank you!
When Web Apps is accessed with the URL of url + ?formid=###, you want to put the value of ### to the text box.
The URL is like https://script.google.com/macros/s/###/exec?formid=###.
If my understanding is correct, how about this answer? Please think of this as just one of several answers.
Modification point:
In this modification, I used google.script.url.getLocation() for retrieving the query parameter.
Modified script:
Please modify html.html as follows.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
<script>
google.script.url.getLocation(function(location) {
document.getElementById("formid").value = location.parameters.formid[0];
});
</script>
</body>
</html>
By above modification, when you accessed to Web Apps with https://script.google.com/macros/s/###/exec?formid=12345, 12345 is put to the text box.
Reference:
getLocation(function)
If I misunderstood your question and this was not the direction you want, I apologize.
Using Jquery:
<script>
$(function(){
google.script.run
.withSuccessHandler(function(v){
$('#formid').val(v);
})
.getTheValueOfV();
});
</scrip>
With Regular JavaScript
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(v){
document.getElementById('formId').value=v;
})
.getTheValueOfV();
};
</script>
Code.gs:
function getTheValueOfV() {
var ss=SpreadsheetApp.getActive();
return ss.getRangeByName("TheRangeWhereYouFindtheValueofv").getValue();
}
You can put the script in the head or in the body your choice. If you use JQuery you need something like this in the head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Below is my HTML file in Google App Script.
It creates a dialogue box on a spreadsheet. When the ok button is pressed I want it to run a function that I have created in App script and also close the dialogue box.
When I am clicking OK the app script code is not running. What can I do better?
Thanks.
<!DOCTYPE html>
<html>
<head>
<h3>Welcome</h3>
<meta charset="utf-8">
<title>SEOMango</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Ok" class="create ok_button"
onclick="close1();" id="ok_button"/>
<!--JQUERY-->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function close1()
{
google.script.host.close();
google.script.run.withSuccessHandler.doSomething();
}
</script>
</body>
</html>
try something like this:
function close1()
{
google.script.run.withSuccessHandler(end).doSomething();
}
function end()
{
google.script.host.close();
}
You first need to execute you function on google side doSomethingthen if it is successful call end() function with google.script.host.close() inside of it to close your sidebar/dialog box.
as #tehhowch mentionned it you are here closing your Html page before executing your function doSomething().
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
This page: http://rippertshirts.co.uk/products/bazinga-t-shirt-brand-new-funny-geeky-big-bang-theory-ripper-s-m-l-xl/
I cannot add an item to the cart in Google Chrome.
Here is the input:
<input type="submit" value="Add to Cart" class="Cart66ButtonPrimary purAddToCart" name="addToCart_68" id="addToCart_68" disabled="disabled">
Can anyone think of a reason for this? Could it be the disabled="disabled feature"
I tried adding this to my header.php but no luck :(
<script type="text/javascript">
jQuery(document).ready(function(){
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input").removeAttr("disabled");
return(true);
});
});
</script>
Try to wrap your code inside DOM ready handler since you'are putting your jQuery code in the <head> section of your page:
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input:text").removeAttr("disabled");
return(true);
});
});
<input type="text" name="q" placeholder="Search..." />
<input type="image" src="images/searchBtn.png" name="q" />
<div id="searchResult"></div>
css...
#searchResult{width: 1000px; height: 200px;}
How to do????
This is a sample which I have tried. try this.
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load('search', '1');
function DoSearch()
{
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(document.getElementById("secrchBox").value);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
EDIT
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load("search", "1", { "nocss": true });
function DoSearch()
{
var ss = document.getElementById("secrchBox").value;
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(ss);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
Now default css will not load. You can customize as your wish.
you put the <iframe>, <script>, or whatever Google gives you inside your div!
<div id="searchResult">Google code here!</div>
You may have three options.
-The hardest one is to parse google result page. This could be done with php and some regular expressions work. If you are an experienced developer, this is the best.
-Second is to use googlesearch API. This one is very easy to implement. You can see how to do it here. It supports REST calls, which are super easy to use. Pros: Relatively easy to implement, lots of documentation and examples. Cons are that you have an usage quota of 100 queries per day. Also remember that you need to get your API-KEY and register to use it.
-Third one, Include an Iframe. This is super easy to implement, just one line of code, but it's not clean and probably you don't want to have google's page inside yours.
Probably there's another one mixing a lot of javascript and Iframes, but, I don't see the point of doing that since there are many better options.
Let me know if you have any questions..
Thanks!,
#leo.