Learning to use Bottle.py and made a page with a button:
<!DOCTYPE html>
<html>
<head><title>button</title></head>
<body>
<script>function test(){
console.log("a");
document.getElementById("b").innerHTML = "abcd";
return false;}</script>
<form onsubmit="return test()">
<button type="submit">Button</button>
</form>
<div id="b"></div>
</body>
</html>
When I press the button, nothing prints out on the javascript console the div element does not get populated with text.
from bottle import route, template, run
#route('/button')
def b():
return template('button')
This is (obviously) a minified version of what is actually happening in my app.
Your javascript and html code are perfectly valid as #Blender said, have you checked if you have a valid code, by viewing the actual source that is delivered by the http response?
Related
I want to create a simple login and sign up page. I have created them separately using atom, and they were saved inside the same folder inside my computer. I added a css file and was able to link it to both fine.
Now comes the problem.
Note: This is just a fun little project which is why I only used localStorage.
I created a .js file inside my website folder.
//SIGN UP PAGE
function create(){
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
localStorage.setItem(username, un);
localStorage.setItem(password, pw);
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
if(document.getElementById("usernamel") === localStorage.getItem(username)){
if(document.getElementById("passwordl") === localStorage.getItem(password)){
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}else{
document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
}
}else{
document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
}
}
And made it to add values to the localStorage when create account button is pressed.
<script src="ssjavascript.js"></script>
This is the exact same code I used for both the html files to connect to the js files, and yet, only one works. No matter what, only one of the html files can connect to the js file. I've copied and pasted multiple times. I've tried different tags. I've tried everything I can think of and this is where I beg the internet myself for answers.
To test If it is working, I created an onclick() function to a button and told it to bring me to a separate page. None of it worked, I checked my spelling about 10 times now as well.
Also, Whenever I test the files I open them in browser, so I don't get any error messages. And I can't test them in atom because it just shows the code in a scroll box on view.
Edit:
ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
at login (ssjavascript.js:11)
at HTMLInputElement.onclick (sslogin.html:22)
This is what I got when clicking the button on the non-working page.
login is referring to the button clicked
ssjavascript.js is referring to the file I used to hold the javascript
sslogin.html is the page file
I don't know if this helps, I've lost track quite a bit.
Full Code:
Sign Up page
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="username">
<div id="passwordtxt">
Password:
</div><input id="password"><br><br>
<div id="security">
For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
You are also limited to 1<br>account, creating a new one<br>will erase previous data.
</div><br><br>
<input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
Already Have One? Log In
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
Log in page
<!DOCTYPE html>
<html>
<head>
<title>
Log In
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="usernamel">
<div id="passwordtxt">
Password:
</div><input id="passwordl"><br><br><br><br>
<input type="button" id="submitl" onclick="login()" value="Login"><br><br>
Don't Have an Account? Create One
<br><br>
<div id="errormsg">
</div>
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
the javascript file is already up above, and the profile page is just a blank until I actually figure out how to get someone there.
Also, I changed the Javascript to compare the value to localStorage instead of assigning but it seems to still not work as intended.
EDIT:
Thanks for the suggestions. Even if none of them singularly worked, I still wouldn't have fixed my problem if you guys haven't pushed me to do some more searching.
I found out, that using "" saved my variables as strings, so I used '' and it worked exactly how I wanted.
Again, thanks a lot for your help. :)
Thank you in advance for helping me with my issue. I was wondering if someone could explain this for me as i am self teaching about JavaScript JQuery. What i am trying to do is push a message into a variable that is in the parameters of a function. Then i want to display the message using the function by calling it back to the html file that i originally had. So i want write a message in my function and print to my html page. I think i maybe in the right direction here is my source code. I am trying to get use to write with external javascript files as i think it is much cleaner way of working with HTML, CSS3, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=".js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<form>
<input type="button" value="Click me" id="message "onclick="test();" />
</form>
</body>
</html>
External JavaScript file.
function test(message){
alert("Hello");
}
Use this.value to get the value of the input
<input type="button" value="Click me" id="message" onclick="test(this.value);" />
And then use the message you get
function test(message){
alert(message);
}
To show this message on your page, create an element on the page
<div id="message"></div>
Then, in your test function, instead of alert, set the innerText or innerHTML to the message
document.getElementById('message').innerText = message;
To show message in popup do it this way
Html:
<input type="button" value="Show message in popup" id="message "onclick="test2('hii this is my message');" />
JS:
function test2(message)
{
alert(message);
}
To show message in div
Html:
<input type="button" value="Show message in div" id="message "onclick="test('hii this is my message');" />
<div id="message"> </div>
JS
function test(message)
{
document.getElementById("message").innerHTML = message;
}
Demo : Fiddle
Adding the message: The easy way to do this would be by using jQuery or a javascript library of your choice. Otherwise, you can simply do this:
Create an empty div to display the msg with an id="msg"
and in your javascript function:
document.getElementById("msg").innerHTML = "Your message";
jQuery is much more fun: you can use readily available functions like .html() and .append()
You definitely want to do this, as it is much MUCH cleaner to do so. It also lets you use the same code in multiple places.
Look at this: http://www.w3schools.com/js/js_whereto.asp
(down by 'external JavaScript')
Essentially, you need to save the .js file as an actual file, like filename.js:
<script type="text/javascript" src="filewithcode.js"></script>
where filewithcode.js is the file path to the JavaScript file you have created.
Hope this helps
I am calling a perl script from the form in HTML file (index.html).
<form method="post" action="cgi-bin/test.pl">
more cmds....
<input type="submit" align="left" value="Submit">
</form>
The perl scripts executes successfully. but it remains in test.pl.
It doesn't return back to index.html. there are many more actions to be done after the perl script.
How to return the execution pointer back to index.html?
Look at CGI #Generating a Redirection Header
print CGI->redirect('http://somewhere.else/in/movie/land');
Or redirect using javascript's window.location
print CGI->header() . qq{
<html>
<head>
<script>
window.location.assign("http://somewhere.else/in/movie/land")
</script>
</head>
<body>
<p>redirecting...</p>
</body>
</html>};
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.