Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Good Morning,
I am having difficulty firguring out why this following Javascript method is not working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--Author: Alejandro Deguzman Jr-->
<html>
<head>
<title>Realtor Inquiry</title>
<script type="text/javascript">
/* <![CDATA[ */
function termAgreed() {
if (document.getElementByID.checked == true) {
window.alert("Works!");
}
}
/* ]]> */
</script>
</head>
<body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
</body>
</html>
What im am trying to accomplish with the code above is when the checkbox is checked a prompt will appear. I did'ny quite know how to search for this specific answer I was looking for.
1) As suggested above you need to call your function inside your HTML. Use onchange() and call the function on change of check box.
2)You need to correct syntax of selecting element. its Id not ID and also pass the Id of element you want to select.
function termAgreed() {
if (document.getElementById("agree").checked == true) {
window.alert("Works!");
}
}
<input type="checkbox" id="agree" onchange="termAgreed()" value="Terms" checked="unchecked">Agree with the Terms & Conditions
I modified your termAgreed slightly. Please note that querySelector is not available in older browsers. I added a portion at the end to add the change event to the checkbox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--Author: Alejandro Deguzman Jr-->
<html>
<head>
<title>Realtor Inquiry</title>
<script type="text/javascript">
/* <![CDATA[ */
function termAgreed() {
if (document.querySelector('#agree').checked) {
window.alert("Works!");
}
}
/* ]]> */
</script>
</head>
<body>
<form>
<input type="checkbox" id="agree" value="Terms" type="checked" checked="unchecked">Agree with the Terms & Conditions<br>
</form>
<script type="text/javascript">
document.querySelector('#agree').addEventListener('change', termAgreed);
</script>
</body>
</html>
First, you're not using getElementById correctly. You need to pass in the element you're looking to find. Like so, getElementById("agree"). And as others have already posted in the comments, you're not calling 'termAgreed' in your code.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
My code is below. But when I give the above code the element with id "demo" doesn't gets selected. How can I do that in JS?
document.getElementById("demo").onclick = function() {myFunction1()};
function myFunction1() {
document.getElementById("demo").classList.remove("flame");
}
.flame {
color: red;
}
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>
If my understanding is right, Try using this one
document.getElementById('demo').onclick = function(event) {
callback(event)
}
function callback (event){
var classList = event.target.classList
if (classList.contains('flame')) {
console.log('contains')
classList.remove('flame')
} else {
console.log('notfound')
classList.add('flame')
}
}
.flame {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>
</body>
</html>
First Why are your using a method to call another function when you can use onclick directly in the html element also make sure you are including the script in a right way since the function function1 needs to be defined before calling it in the Dom element.
So you can use this in the html element
<div class="candle">
<div id="demo" class="flame" onclick="myFunction1()">Hello</div></div>
And for the Javascript:
function myFunction1() {
document.getElementById("demo").classList.remove("flame");}
You can check the fiddle: https://jsfiddle.net/ytdmk6my/2/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to get this "this" to work, to bind it to an/any HTML element that the function is applied to. I'm trying to keep it universal to make it possible to apply the same function to multiple HTML elements.
Note:
I don't want to mess with ids nor classes and such since I want to keep the function as universal as possible.
<!doctype html>
<html>
<body>
<input type="button" value="Old" onClick="Change(this);">
<script type="text/javascript">
function Change(){
this.innerHTML = "New";
};
</script>
</body>
</html>
innerHTML won't work in this case. Being that this is an input, try using value instead.
var input = document.querySelector('input');
input.addEventListener('click', Change);
function Change(){
this.value = "New";
this.removeEventListener('click', Change);
}
<input type="button" value="Old" />
The problem is that when the page hits the input the Change function is not defined. Try the following:
<!doctype html>
<html>
<body>
<script type="text/javascript">
function Change(){
this.value = "New";
};
</script>
<input type="button" value="Old" onClick="Change.call(this);">
</body>
</html>
Note that I have changed the input's onClick to Change.call(this). And that the script is loaded before the control.
You can see a working fiddle here. Note that the JavaScript settings is configured so that the script is loaded in the head (Hit the cog in the JavaScript section).
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to do some Ajax and jQuery here, submitting a form while staying on the same page. I read the following topic to start what I wanted to do (which is consisting of several good examples) : jQuery AJAX submit form
Here is my HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="addTag.js" type="text/javascript"></script>
</head>
<body>
<form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
<legend>Add a tag</legend>
<input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
<input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
<input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
<button type="submit" id="button_save_tag">Add</button>
</form>
</body>
</html>
And the JS file :
$("form_addtag").submit(function(e) {
e.preventDefault();
var url = "add_tag.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("form_addtag").serialize(), // serializes the form's elements.
});
});
The execution is perfect : I can fill the form, click on the Submit button and it will pass everything field to add_tag.php. However, I always end up on mydomain.com/add_tag.php while I wanted to stay on the first page.
Your selector is incorrect:
$("#form_addtag").submit(function(e) {
You need the leading # to indicate that you want to search for an element by its "id". Without that, you were telling jQuery to add an event handler to every <form_addtag> element it could find, which is of course an empty list.
It's sort-of a big stumbling block with jQuery that the library doesn't treat such situations as errors. It can't really, because that would make life even more difficult, but it's still something that causes everybody some pain now and then.
In this case, you could remove the "action" attribute from the form, though that'd mean the page wouldn't work at all without JavaScript.
There are two problems.
Your jQuery needs to either be executed after the element it refers to on the page exists, usually by placing the code before the closing body tag, or it should be wrapped in a document ready call in the head of the page by using:
$( document ).ready(function() {
// your code here;} );
You're missing a # on your form selector. It should be: $("#form_addtag")
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am lost, I just started programming and the code I have doesn't quite show what I'm trying to do, and is unfinished. However, my problem is I am trying to figure out how to take HTML form data entered by a user, and when a button is pressed its submits the data to a string variable in the sites Javascript. The challenge is that I can't use any server-side script, only HTML, CSS, Javascript, and I have to JQuery. I have look everywhere on how to do this for weeks. I can't find anything helpful for what I'm attempting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
<!--
function storageCheck01(){
if(typeof(Storage)!=="undefined"){
activeSession();
}
else{
var b0002=document.getElementById("wrapper");
b0002.style.display="none";
document.write("No Support!");
};
}
function activeSession(){
if(typeof localStorage.visitCount !== "undefined"){
++localStorage.visitCount;
if(typeof sessionStorage.c02 !== "undefined"){
userData();
}else{
setCookie();
};
}else{
localStorage.visitCount = 1;
setCookie();
};
}
function setCookie(){
sessionStorage.c01=date();
sessionStorage.c02=screen.availWidth;
sessionStorage.c03=screen.availHeight;
userData(sessionStorage.c01, sessionStorage.c02, sessionStorage.c03);
}
function userData(date, width, hight, ){
}
addEventListener('load',storageCheck01,false);
-->
</script>
</head>
<body>
<form>
<!-- ADD FORM DATA TO RETRIEVE USERDATA -->
</form>
</body>
</html>
Well, it sounds like you are just trying to take a form and capture the user's input when they click submit. No need to post to a different file.
So, it is simply having a button putting an onclick event and then calling a function in the javascript. This javascript would use the document.getElementById(nameofObject).value.
Example:
<html>
<head>
<title>New Page 1</title>
<script language="JavaScript" type = "text/javascript">
<!--
function Test()
{
alert(document.getElementById("testinput").value);
}
//..>
-->
</script>
</head>
<body>
<form name="textfield">
<input type="text" name="T1" size="20" id="testinput">
<input type="button" value="Click Here" name="B1" onClick="Test()"></p>
</form>
</body>
</html>
Source: http://www.java2s.com/Tutorial/JavaScript/0460__DOM-Node/Getelementfromadocumentbyid.htm
If you just want to submit the data to the server, you don't have to use any JavaScript at all. When you put an "input" element in the form, for example, an "input type='text'" element, which creates a text box, the text box's value is automatically submitted to the server as a form variable, with the key being the name of the element, when use press the submit button. You can then use whatever code/platform you use on the server side to get the variable value.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want chance a Text with javascript i use the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript">
var Neu = document.getElementById("thema")[0].value;
function Aendern () {
document.all.meinAbsatz.innerHTML = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<input id="thema" type="text" value="Test Theme" />
chance theme
</body>
</html>
If I click on "chance theme" the "Text" chance to "undefined"
Method getElementById() returns a single element, not a set of elements. So there is no need in applying [0] to it. Also you should put the Neu initialization inside Aendern() function:
function Aendern() {
var Neu = document.getElementById("thema").value;
document.all.meinAbsatz.innerHTML = Neu;
}
DEMO: http://jsfiddle.net/RqgMb/
http://jsfiddle.net/FJr2t/
In the link above I made your code work.
Your two major problems are:
var Neu = document.getElementById("thema")[0].value;
Firstly, getElementById('thema') returns only one item, so you should drop the [0].
Secondly javascript code in your head gets executed once, when loading. So this line once gets executed at the very beginning and reads the value the input element has then.
So you should also move it into your Aendern method.
P.S.: Putting your code in window.onload etc. is not neccessary in this case, but you should definilty look at it and do it.