I am having my webpage get the value of a textbox and check it to a value of "bypass". If the stuff in the textbox equals the value of "bypass", then the website will redirect to google. But it doesn't work, even if you put in the correct values.
My Code is this:
<!DOCTYPE html>
<head>
<title>ACA2</title>
</head>
<body>
<center>
<form>
<p><input type="password" name="pass"><br></p>
<p><button onclick="bypassCheck()">...</button></p>
</form>
<p>Back</p>
</center>
<script type="text/javascript">
function bypassCheck() {
var aaa = document.getElementByName('pass')[0].value
var bbb = "bypass";
if(aaa == bbb) {
window.location.assign("www.google.com")
}
}
</script>
</body>
</html>
The issue is that it's not getElementByName, but getElementsByName, as in plural. So it would be:
var aaa = document.getElementsByName('pass')[0].value
use document.getElementsByName and window.open("https://www.google.co.in/") with proper https URL. If you provide only www.google.co.in then you won't be redirected to google.
Below is the working code:
<!DOCTYPE html>
<head>
<title>ACA2</title>
</head>
<body>
<center>
<form>
<p><input type="password" name="pass"><br></p>
<p><button onclick="bypassCheck()">...</button></p>
</form>
<p>Back</p>
</center>
<script type="text/javascript">
function bypassCheck() {
var aaa = document.getElementsByName('pass')[0].value
var bbb = "bypass";
if(aaa == bbb) {
window.open("https://www.google.co.in/")
}
}
</script>
</body>
</html>
Related
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
I want the data in the text field to transfer to a popup, but when I trigger the popup, it is always blank, no matter what is in the box.
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
</body>
<script>
function popup() {
window.confirm(name.popupMess);
}
</script>
</html>
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input id="popupMess" type="text"><br>
</body>
<script>
function popup() {
alert(document.getElementById('popupMess').value);
}
</script>
</html>
You forgot the " in name="popupMess".
function popup () {
var text = document.querySelector("input[name='popupMess']").value;
window.confirm(text);
}
Hi here is my jsfiddle that demonstrates the functionality
http://jsfiddle.net/7pjqfcvd/2/
you have to
mark the input element with an Id
<input type="text" id="popupMess"/>
use the id in document.getElementById call to obtain the input element
var elem = document.getElementById("popupMess");
retrieve the value from the element and pass it into the messagebox
window.confirm(elem.value);
But still if you want to use name then try this...
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
<script>
function popup() {
var d = document.getElementsByName("popupMess");
window.confirm(d[0].value);
}
</script>
</body>
</html>
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>
first.html
<!DOCTYPE html>
<html>
</head>
<body>
<form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
</form>
</body>
</html>
other.js
function validateUsernamePassword()
{
var idNum = $("#userId").val();
alert('Well the id is :' + idNum);
// more code
}
The alert doesn't print the passed ID ... why ?
Modify your html like this:
<html>
<head>
<title></title>
</head>
<body>
<form>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
<input type="hidden" id="userId"></input>
</form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
</body>
</html>
Or you could do just this:
function validateUsernamePassword()
{
var idNum = localStorage.getItem("idNumber");
alert('Well the id is :' + idNum);
// more code
}
The second one is good since you already have the item in localstorage, so ther is no need of assign its value to another element
this trick may help you:
<html>
<head>
</head>
<body>
<dl>
<script>
window.var1 = "hello, world";
</script>
<input type="button" value="click" onclick="clicked()">
<script>
function clicked(){
alert(window.var1);
};
</script>
</body>
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.