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.
Related
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
Here the following code for validate the form control. I write this for front end validation. How can I reuse this validate.js file for node server for back end validation without rewrite the same validation code for node server.
Here my Validate.js
jQuery.fn.extend({
zigzag: function () {
if( $(this).val()>10)return true;
else return false;
}
});
and I used this in html.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="validate.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
if($('#in').zigzag()){console.log('true');}
else{console.log('false');}
});
});
</script>
</head>
<body>
<input id="in" type="text" name="lname"><br>
<button>click</button>
</body>
</html>
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>
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</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!