event's are not getting added - javascript

<!doctype html>
<html>
<head>
<title></title>
<!--binding handlers to object-->
<script type="text/javascript">
<!--
function showAuthor()
{
alert("oscar wilde");
}
function enableEvent()
{
document.getElementById('someText').attachEvent("onmouseover",showAuthor);
}
function disableEvent()
{
someText.detachEvent("onmouseover",showAuthor);
}
//-->
</script>
</head>
<body onload="enableEvent();">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent();" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor();" />
</form>
</body>
</html>
I have used the above code to implement event handlers, but when I execute the program event handlers are not attached. Why?

I am guessing that you need to use addEventListener. And when using addEventListener, you do not need to put an "on" prefix with the event names.
Snippet:
<script type="text/javascript">
function showAuthor() {
alert("oscar wilde");
}
function enableEvent() {
document.getElementById('someText').addEventListener('mouseover', showAuthor);
}
function disableEvent() {
document.getElementById('someText').removeEventListener('mouseover', showAuthor);
}
</script>
<body onload="enableEvent();">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent();" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor();" />
</form>
Hope this helps.

This
document.getElementById('someText').attachEvent("onmouseover",showAuthor);
should have been like this
document.getElementById('someText').addEventListener("mouseover",showAuthor, false);
You don't want to attach an event but you want to add an event listener.
Furthermore, you don't want to detach any event but you want to remove an event listener, whose syntax is like this:
document.getElementById("someText").removeEventListener("mouseover",showAuthor, false);
var someText = document.getElementById("someText");
function showAuthor(){
alert("oscar wilde");
}
function enableEvent(){
someText.addEventListener("mouseover",showAuthor, false);
}
function disableEvent(){
someText.removeEventListener("mouseover",showAuthor, false);
}
<body onload="enableEvent()">
<em id="someText">we may be in the gutter ,but some of us are looking at the stars</em>
<form action="#" method="get">
<input type="button" value="Attach event" onclick="enableEvent()" />
<input type="button" value="Detach event" onclick="disableEvent();" />
<input type="button" value="show author" onclick="showAuthor()" />
</form>
</body>
For a detailed explanation of the above, please have a look at the following links:
EventTarget.addEventListener
EventTarget.removeEventListener

Related

addEventListener() Not Working - can't figure out why

Wrote a super basic script to try out addEventListener and it's not working ...
Why?
Here's the code:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
function validateForm(){
alert("Wheeeeee!");
}
window.addEventListener("load",validateMe);
}
</script>
</head>
<body>
<form name="" id="" action="" onsubmit="return validateMe">
First Name: <input type="input" name="first_name" id="first_name" />
<br /><br />
Last Name: <input type="input" name="last_name" id="last_name" />
<br /><br />
Email Address: <input type="input" name="email" id="email" />
<br /><br />
<input type="submit" value="Validate" id="button1" />
</form>
</body>
</html>
It seems you're trying to add the function from within the function itself. The function will not get executed, therefore it will not be added. Try moving the addEventListener statement outside of the function block. Or, make the function anonymous and declare it inside the addEventListener call.
Edit: I see now it does get executed on submit. But the load phase has already passed so adding it at that point won't do anything.
Remove validateForm(). You have a function within the function which isn't being called anywhere.
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
alert("Wheeeeee!");
window.addEventListener("load",validateMe);
}
Guessing from your case, You may want to use addEventListener() instead of in-line event usage.
You could remove in-line event onsubmit="return validateMe" from the form DOM, then your window.addEventListener("load",validateMe) needs to be called out of its function:
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
function validateForm(){
alert("Wheeeeee!");
}
}
window.addEventListener("load", validateMe);
JSfiddle Demo

Inserting the value in form's textfield onclick of a button using javascript

//This is a Js Calculator Code
<!Doctype html>
<html>
<head>
<title>Calculator</title>
<script>
function show(n) {
document.calform.screen.value = document.calform.screen.value + n;
}
function operation(op) {
document.calform.screen.value = document.calform.screen.value + op;
}
function equals() {
document.calform.screen.value=eval(document.calform.screen.value);
}
</script>
</head>
<body>
<center>
<form name="calform" style="width:200px;" method="post">
<fieldset border="1px">
<legend> Calculator</legend>
<input type="text" name="screen" /><br/><br/>
<button onclick="show('7')">7</button>
<button onclick="show('7')">8</button>
<button onclick="show('7')">9</button>
<button onclick="operation('+')">+</button><br/>
<button onclick="show('7')">4</button>
<button onclick="show('7')">5</button>
<button onclick="show('7')">6</button>
<button onclick="operation('-')">-</button><br/>
<button onclick="show('7')">3</button>
<button onclick="show('7')">2</button>
<button onclick="show('7')">1</button>
<button onclick="operation('*')">*</button><br/>
<button onclick="operation('/')">/</button>
<button onclick="operation('%')">%</button>
<button onclick="">=</button>
<button onclick="">C</button>
</fieldset>
</form>
</center>
</body>
</html>
The problem with this code is that it insert the value in the form's textfield on onclick event of a button but the value doesn't hold in the textfield after click event........ Kindly leave your suggestions to resolve this issue..
The problem is exactly what #showdev said: the form submits on each button click. As soon as it submits, the field disappears. What you need to do is have type="button" in your html, so it would look like this: <button type="button" onclick="show('7')">7</button>

Detecting the appropriate button with javascript

I have a form with two buttons -
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
Here one button is for approve and another button for disapprove. I have a Javascript function "submitForm()" which is called "onclick" of these button. The function is like this
function submitForm(){
//if('approvedButton' is clicked){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
//}
$("#reviewApprvDisapprvForm").submit();
}
In this function I have set the action with javascript. Here, I am trying to find for which button click the "submitForm()" method is called. There are two buttons - "approveButton" and "disapproveButton". How can I do this, can anyone help me?
Thanks in advance
I would do it like this:
Remove the onclick="" from the HTML, set the image inside the input element, add the action to the form directly:
<form:form id="reviewApprvDisapprvForm" action="/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" type="submit"><img src="/images/buttons/samplesApprovedButton.png"/></input>
<br />
<input id="disapproveButton" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
$(document).ready(function() {
$('#disapproveButton').click(function(){
//your disapprove logic here
});
});
This can help
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm('approve')" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm('notApprove')" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
and then
function submitForm(buttonVal){
if(buttonVal=='approve'){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
}
$("#reviewApprvDisapprvForm").submit();
}
Thanks

javascript function

i have Html document A.html and javascript file A.js, how to write a code in javascript within html body THAT SPECIFIES FUNCTION res AS THE EVENT HANDLER FOR THE onclick EVENT FOR THE BUTTON DEFINED IN THE FORM?
A.html-----------
<body>
<form>
<input type = "button" id="butt1" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
</script>
</body>
This is a pretty poorly written question, but I think what you want to do is pretty straightforward. When you include an external script with
<script type="text/javascript" src="A.js"></script>
It's all there for the following execution. Thus if A.js has the following:
function res() {
...
}
You can use specify that in your HTML, as such:
<button onclick="res()" value="call res()">
I think this is what you mean..
a.html:
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>
a.js:
function res()
{
alert("function logic to go here");
}
If you want all the code on the one page..
<head>
<script type="text/javascript">
function res()
{
alert("function logic to go here");
}
</script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>
A.html
<script type="text/javascript" src="A.js">
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
A.js
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
All at once
<script type="text/javascript">
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
</script>
<form>
<input type="button" id="button" name="test" value="Click me" onclick="inform()">
</form>
Calling function in javascript
if(condition in which you want onclick to b called)
document.getElementById('button').click();

return js value in HTML

First tentative steps into client side. I'm having trouble finishing the following. My question is how do I return the value of a function in a HTML statement ...
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
</body>
I'd appreciate your help
Thanks in advance
G
<head>
<script language="Javascript">
function checkjava() {
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php"
method="get"
name="your_form"
onsubmit="this.answer.value=checkjava();">
<input type="hidden" name="answer">
<input type="submit" value="click me">
</form>
</body>
No need for the id attribute.
<form action="enabled_catch.php" method="get" name="your_form" >
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" onclick="document.getElementById('answer').value=checkjava();" value="click me">
You would do something like that:
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form" onsubmit="document.getElementById('answer').value=checkjava();">
<input type="HIDDEN" id="answer" >
<input type="submit" value="click me">
</form>
</body>
Basically on form submit you would set the value of the answer input to the result of the function call.
EDIT: placed onsubmit on the wrong element before (embarrassing).
I would have an id on the answer tag and then do it in the form onsubmit event.
Something like:
<form onsubmit="document.getElementById("answerId").value = checkJava()" action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" id="answerId" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
Browser-side scripting is event driven. Unless an event is triggered, nothing happens.
You could listen to the click event on your submit button, and then manipulate the value of your hidden field:
<input type="hidden" id="answer" name="answer" value="")>
<input type="submit" value="click me"
onclick="document.getElementById('answer').value = checkjava();">
Note how we had to give an id to the hidden field, in order to be able to reference it with getElementById().
Also note that JavaScript is case sensitive: checkjava() and checkJava() are not the same.
<script>
document.your_form.answer.value = checkjava();
</script>
Unless you want to use a fancy JS library. =)

Categories