I am working on my first web application and I am trying to use javascript to submit a form by clicking on text. When I click on the text nothing happens. It should just open to a simple webpage for now. I know how to process forms with html, but when I try and use javascript nothing happens. I am using unix and i have already configured my server and chmod 755 the cgi file. I not it is not a server error as I have executed cgi files on it before. I am following this tutorial:
http://www.thesitewizard.com/archive/textsubmit.shtml
Here is my test html:
<html>
<head>
<title>EDVT Report Generator</title>
<style>
h1 {
text-align: center;
}
<script language="JavaScript" type="text/javascript">
function getsupport ( selectedtype )
{
document.supportform.supporttype.value = selectedtype ;
document.supportform.submit() ;
}
</script>
</style>
</head>
<body>
<h1 id = "title">Test</h1>
<form name="supportform" method="post" action="/cgi-bin/hello.py">
<input type="hidden" name="supporttype" />
Paid Support or
Free Support
</form>
</body>
</html>
And here is the cgi file:
#!/usr/bin/python
import cgitb, cgi
cgitb.enable()
print "Content-type:text/html\r\n\r\n"
print '<html>'
print '<head>'
print '<title>Hello Word - First CGI Program</title>'
print '</head>'
print '<body>'
print '<h2>Hello Word! This is my first CGI program</h2>'
print '</body>'
print '</html>'
I am at a complete loss with what is wrong as I do not have much experience with javascript. Any help is appreciated!
You cannot nest a <script>element inside <style>, the only allowed content is CSS. See e.g. the MDN docs.
Move <script> to either <head> or <body>:
<html>
<head>
<title>EDVT Report Generator</title>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getsupport ( selectedtype )
{
document.supportform.supporttype.value = selectedtype ;
document.supportform.submit() ;
}
</script>
<h1 id = "title">Test</h1>
<form name="supportform" method="post" action="/cgi-bin/hello.py">
<input type="hidden" name="supporttype" />
Paid Support or
Free Support
</form>
</body>
</html>
Related
Hello I am making a login website and i just want to have the javascript with the password and username in an different file just to make it a little bit harder to find(its just a school project). But my problem is that it wont verify and redirect to my Main.html code after you click the login button.
As you can see in the code i have tried to connect it with the code.
<script src="Login.js"></script>
Here is the html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>kjedelig AF</title>
<link rel="stylesheet" href="Login.css">
</head>
<body oncontextmenu="return false;">
<form class="box" action="Login.html" method="post" name="login">
<div class="login">
<h1>Kjedelig AF</h1>
<input type="text" name="usrname" placeholder="Username">
<input type="password" name="pswrd" placeholder="Password">
<input type="submit" onclick="return check(this.form)" value="Login">
</div>
</form>
<script src="Login.js"></script>
</body>
</html>
And here is my javascript code witch i have problems connecting to the html code:
<script language="javascript">
function check(form){
if(form.usrname.value == "dd" && form.pswrd.value == "dd") {
window.location.href= "Main.html";
return false;
}
else
{
alert("Iks dette er kjedelig AF :)")
}
return true;
}
</script>
First of all, include your JS file at the <head>. there is no good reason not to.
To fix your issue remove <script language="javascript"></script> from your .js file
you should use <script language="javascript"></script> when inside .html file not .js
Two reasons:
The script link to the JS file should be anywhere within the
<head></head> tags
The JS file shouldn't have the <script language="javascript"></script>, all that the JS file needs to have is:
function check(form){
if(form.usrname.value == "dd" && form.pswrd.value == "dd") {
window.location.href= "Main.html";
return false;
}
else
{
alert("Iks dette er kjedelig AF :)")
}
return true;
}
Hope this helps.
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
Ok, I saw this tutorial http://css-tricks.com/dynamic-page-replacing-content/, pretty cool actually!
My problem is as flows, I have a page that not only has contents but also specific javascript content, and css. Is there a way to load those files dynamically, would It be correct? What if I have a hard coded on the page, how would I load that css/js script?
Thanks in advance.
[Edit]
Some code:
<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
alert('the document has finished loading!!');
// do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
(*)<input type="text" name="fullname" />
<input type="submit" value="Send" />
</form>
</body>
</html>
Let's say I wanna load that page dynamicaly and load the validation and related javascript placed on header. Should load files readeing the headers? how can I know which one had been already loaded?
Thanks for the answers!
"I guess he means hard-coded, static. – Utkanos" - Edited
You can change the CSS stylesheet dynamicly by changing the href attribute.
Javascript can also be loaded dynamicly by loading the script self into the div or by writing the script src to it.
Here an simple example:
CSS 1:
body {
background: black;
color: #333;
}
CSS 2:
body {
background: red;
color: white;
}
HTML:
<html>
<head>
<title>Test page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>TEST!!!!!</h1>
<div id="code"></div>
<input type="button" id="but" value="click!" />
<script>
var css = 1;
$('#but').click(function() {
if(css == 1) {
css = 2;
} else {
css = 1;
}
$('link').attr('href', '/includes/css/test' + css + '.css');
//test();
test2();
});
function test2() {
$('#code').html("<script>alert(\"It works!!!\");<\/script>");
//Or parse the src
//$('#code').html("<script src=\"js/your_js_file.js"><\/script>")
}
</script>
</body>
</html>
So it's posible to load CSS and Js into your page after the page is loaded.
Hope this helps!
So I'm trying to change the background a following page depending on what icon is clicked and I'm not sure whats wrong with my code! This is just a test page (Please excuse the weird code, but i need it in the actual site itself!)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
background: url('<?php echo $_GET['image']; ?>';
}
</style>
<script>
function showWeather(Weather) {
//alert(Weather);
myform.weather.value=Weather;
// alert(Weather);
// ._Weather
myform.submit();
}
</script>
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradientsky.jpg">
<div id="weather">
<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
<input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>
</body>
</html>
You have a couple problems here, I'll try and address them:
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
</form>
You're missing the "ul" wrapper. List-items can not exist by themselves.
You're saying showWeather('cloudy'). 'cloudysky' is not a full filename, so maybe it's cloudysky.jpg?
The user is clicking a link and being sent to another page, so any changes you make here with javascript won't stick once the user returns.
document.getElementById(test) needs to reference a string, like so document.getElementById("test")
Give those a shot and report back.
Your changeBgImage function didn't pass through the string 'image'
Try this:
<script type="text/javascript">
function changeBgImage (image) { // added Image
var element = document.getElementById('test');
element.style.backgroundImage = "url('"+image+"')"; // added single qoutes around image
// Took out window.location - see comments below for explanation
return false;// Added to stop Link execution
}
</script>
</head>
<body>
<div id="test">
<form method="post" action="cloudy_name.php" id="myform">
<li class="button-color-1"><img src="images/cloudybubble.png" width="211" height="180" align="left"></li>
</form>
</div>
I added all javascript functions into the onclick, both showWeather and changeBgImage
See comments below.
IDEA: on the link create a link to a php file. something like chg_bg.php?image=cloudy
On the php file, create some code to set the background
<style>
background: url('<php echo $_GET['image']; ?>';
</style>
I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>