Can I have two events in the same form? I'm trying to validate some fields (one event) and get the value of this list box (another one). I tried to put both in the form1_check, but it didn't work (because are different events? Maybe.). My code:
View 1 RepliesThis script allows you to replay the event-controls coded on your INPUT tags.
You must have a <div id="msgErreur"></div> in your HTML page.
PS : I'm working for an Intranet Webapp. All the users are on IE6.
So i don't mind with NS compatibility
-----------------
// Wait the end of load before manipulating elements
window.onload=doLoad;
function doLoad() {
if (document.forms.length > 0) {
for(i=0;i<document.forms.length;i++) { document.forms[i].onsubmit=doSubmit; }
}
}
function doSubmit() {
if (document.all["msgErreur"]!=null) {
if (document.forms.length > 0) {
message=document.all.msgErreur.innerText;
message=''
for(i=0;i<document.forms.length;i++) {
for(j=0;j<window.document.forms[i].elements.length;j++) {
cible=window.document.forms[i].elements[j];
if (target.value!='') {
cible.fireEvent("onchange");
cible.fireEvent("onfocus");
cible.fireEvent("onblur");
if (message!='') {return false;}
}
}
}
}
}
}
The idea is that when user focuses on an input element in the form the div at the most bottom of the form will explain what user is suppose to type into the field. So far nothing works. I don't receive any error but the code isn't working for some reason.
[Code]...
I am trying to achieve something that I have seen on many forms throughout the web; I am currently learning JavaScript so please bare with my beginner status. So I have a form and on every input button, I want the value to disappear when clicking on it; and if no text is entered, the original value is returned..
So far I have this inside every input button and i'm beginning to struggle with 'the next step': onfocus="if(this.value=='Email')this.value=''"
Is there a simpler way to achieve this with multiple buttons rather than copying this into every button?
I am trying to "ajaxify" my site. Now I have one problem:
$("#posts").children().remove();
$("#tag-sidebar").children().remove();
$.each(data.Tags_Sidebar, function (indexInArray, valueOfElement) {
var insert = $("<li>");
[Code]......
Now when I click one of those links (href1, href2, href3) generated, the click event won't execute! What's the problem? Also, is it right that I have to transfer the valueOfElement over, like I did? What does stopEventPropagation do? Prevent the href from being navigated to? That's what I am trying to do.
The data object is JSON fed from here:[URL]
The HTML is here: [URL]
how do I hook a button click event so that my handler fires first but does not affect the firing of other clickhandlers for the same button?
What I want to do is hook all the form submit button click events. When a submit button is clicked, my handler will stuff some hidden fields into the form the button is contained within. Then the handler returns and the built in form submit button handler posts the form back to the server.
I'd like some direction on creating a small piece of Javascript that will populate my <select> boxes. Basically, I have a form for users to create events, with a start time and an end time. (These are the two select boxes). For example:
Code:
<select id="startTime">
<option value="12:00AM">12:00AM</option>
<option value="12:15AM">12:15AM</option>
etc.....
</select>
What I am trying to do is:
1) Have times populated in 15 minute incrementals from 12:00AM to 11:45PM
2) Have some type of "error checking" available to where the End Time must be after the start time. It would be nice for the script to automatically change the end time field to a time that is after the start time.
I'm trying to figure out how to integrate jQuery Validation plugin with the qTip plugin [0] to show custom error message displays. I've
had partial success with the following code:
$("#RegistrationForm").validate(
{
errorElement: "span",[code]....
At this point, that successfully displays the validation failure message in a qTip tooltip when it occurs, but there are two problems
with it:
1) The error tooltip toggles between visible and invisible onmouseover and onmouseout. I'm sure this isn't really an issue with the Validation plugin, but rather something I need to figure out with the tooltip plugin. But, my bigger problem is...
2) Even when the invalid condition is fixed (valid data is later entered into the field), the error tooltip remains attached to the field that was previously invalid, even after the field is valid, and continues to toggle between visible and invisible onmouseover and
onmouseout. I'm fairly certain that this is because I've not yet destroyed the tooltip object, but, I can't seem to figure out a way to intercept the "valid" or "success" event with a reference to the element so that I *can* destroy the attached tooltip object.any experience with combining qTip with Validation, or, if I'm missing something in the docs (I've not been able to find anything like this yet) about how to handle/override event handlers for individual form element invalidation/success. I *did* try attaching a function to the "success" attribute of the validate function, but that seems to only give me a reference to the success label, and not the element that its attached to.
I have a series of images with an animation bound to mouseover and mouseleave events, and I'm trying to get my head around adding a click event that would prevent the mouseleave animation from occurring only for the image that was clicked, preserving everything else as is (until another image is clicked). I've discovered .stop() and I think I'm getting close, but some part of the logic is still escaping me.
View 3 Replies View RelatedI've got 2 pages: a current events page and a past events page the current events page loads fine as there is only about 10 events the past events page takes about 30 seconds to load and will crash if u click your mouse in the loading time.
The pages are near identical the only difference is the query that selects the events (> versus <)
The page loads immediately without:
But when i put it back in the above happens. I'm using jQuery.roundedcorners.
It's pretty common to assign a click even to a <div> (or other tag), such as:
Code:
// JQuery
$(document).ready(function(){
$("div").click(function(){[code]....
Of course this event won't be accessible from the keyboard, which might be nice. Now if it where an <a> tag, you can do this:
Code:
$(document).ready(function(){
$("a").click(function(e){
alert("clicked");
e.preventDefault();
});
});
The click event will fire if you click the <a>, OR if you tab to it with your keyboard and hit Enter.My question is: is there a way to make elements other than <a> tags accessible in this way? I recently discovered if you define a tabindex on your div, such as <div tabindex="0">test</div>, you can tab to that div, but click events don't seem to fire if you use your keyboard. Are <a> tags the only tags that can work in this way?
This works wonderfully in Firefox, but when it runs for the first time in IE it only creates the field, but won't create any attributes for the events. When debugging the events are null. How can I get this to work in IE. Code:
View 1 Replies View RelatedI am currently creating a small user object that will control some events which will be passed and store some data such as point values. Currently I am having some difficulties with the event method handleMouseDown with any property defined in the object. Code:
View 2 Replies View RelatedI have a general question regarding events. I have a container div, and many divs within it. Without attaching an event to each of the divs, can i attach an event to the container div, and somehow attain which div within it was the event fired over.
I am following the standards, and also do not to need to be concerned about IE, and its issues.
I'm having some difficulties with a menu I'm making. I build up the
menu through DOM. I append childnodes to a tree. 2 types of children
are possible: url (a hyperlink) and sub (a submap).
The tree is thus of a structure
main
|-url1
|-url2
|-submap
|--url21
|--url22
To open up the submaps I set the onclick event to a function I
created:
itemnode.onclick=function() { openMap(itemnode) }
The problem now is that 1 click in a submap results in several times
the openmap function. A click on the url21 node is in fact a click on
a child of submap so the function in the onclick event of this submap
is called. But it is also a click on a child of main, so this onclick
function is also called.
How can you limit that the onclick event handler is only called on the
1 node (ic. submap) where you actually clicked on submap instead of
its urls?
Full code listing below....
I have an object
<button id=summer>
Now I want to dynamically set an event for this object:
function foo()
{
}
myobject = document.getElementById("summer");
myobject.onClick = foo;
Problem is that I want to give the function an argument. "foo(this)" instead
of just "foo".
How can I achieve that?
I want to make my site more dynamic... but i dont find out how this works...
On my site there is at the left side the navigation bar and at the rigt side
i want to put a photo. The photo should change when someone puts the cursor
over the links in the left side.
Does anybody kno how this works?
I have code that looks like this:
function setupEventWrapper(obj) {
old_ev_handler = obj.onsubmit;
obj.onsubmit = function () {
do_something();
if (old_ev_handler != undefined) {
old_ev_handler();
}
if (event_cancelled()) {
undo_something();
}}}
it wraps the onsubmit handler (if any) within a new function which
do_something() and then calls the old event handler.
My problem is how can I detect if the event has been canceled by
old_ev_handler(). AFAIK an event can be cancelled in three ways:
* returning false, easy to check for
* setting event.returnValue = false on IE, easy to check for
* calling event.preventDefault() on DOM
How can I check if event.preventDefault() has been called?
I know some JavaScript mouse events are:
onClick, onMouseOver, onMouseOut, onMouseDown and onMouseUp.
Are there more like:
onMousePress, onMouseDrag, onMouseMove
In Java there are:
mouseClicked, mouseEntered, mouseExited, mousePressed, mouseReleased,
mouseDragged, mouseMoved and mouseWheelMoved.
Also in Java can detected which mouse button (left, middle or right)
has pressed, released or dragged.
is it possible to find out if function F5 (reload) button was pressed ?
View 2 Replies View RelatedI'm doing a tutorial from a book to drag and drop elements on a page into a shopping cart. I had everything working fine in IE until I added the function for key presses. What it should do is when 1 is clicked, the first item is moved into the cart, and if I press 1 again the item goes back to where it started.
The function that's giving me problems is keyDrag (at the bottom). I included the other functions in case you need to see them because keyDrag calls them. The error I'm getting in IE is "object expected" and it's at the line marked below in the keyDrag function.
What happens when I press 1 is the item that's supposed to go to the cart appears at the cursor as if I clicked and dragged it. But if I drag it manually into the cart, and then press 1, it will snap back to its original place without problems.
Code:
<script type="text/javascript" language="javascript">
if(isNS) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
[Code]...
I'm just not getting how to script for events. I know it's a heavy task, but would somebody be willing to break it all down for me? I'd really like to learn these. Code:
View 2 Replies View RelatedThis simple program displays the Keycode & event type for a key pressed. Good for a quick reference.
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body {font-family:Arial, sans-serif}
h1 {text-align:right}
td {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar",
"upChar", "keyTarget", "character"];
// clear table cells for each key down event
function clearCells() {
for (var i = 0; i < tCells.length; i++) {
document.getElementById(tCells[i]).innerHTML = "—";
}
}
// display target node's node name
function showTarget(evt) {
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if (node) {
document.getElementById("keyTarget").innerHTML = node.nodeName;
}
}
// decipher key down codes
function showDown(evt) {
clearCells();
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("downKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("downChar").innerHTML = evt.charCode;
}
showTarget(evt);
}
}
// decipher key press codes
function showPress(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("pressKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("pressChar").innerHTML = evt.charCode;
}
showTarget(evt);
var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
// use String method to convert back to character
document.getElementById("character").innerHTML =
String.fromCharCode(charCode);
}
}
// decipher key up codes
function showUp(evt) {
evt = (evt) ? evt : ((event) ? event : null);
if (evt) {
document.getElementById("upKey").innerHTML = evt.keyCode;
if (evt.charCode) {
document.getElementById("upChar").innerHTML = evt.charCode;
}
showTarget(evt);
}
}
// set page-wide event listeners
document.onkeydown = showDown;
document.onkeypress = showPress;
document.onkeyup = showUp;
</script>
</head>
<body>
<h1>Key and Character Codes vs. Event Types</h1>
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
<form>
<input type="text" id="entry" size="60"
onkeydown="showDown(event)"
onkeypress="showPress(event)"
onkeyup="showUp(event)">
</textarea></p>
</form>
<table border="2" cellpadding="5" cellspacing="5">
<caption>Keyboard Event Properties</caption>
<tr><th>Data</th><th>keydown</th><th>keypress</th><th>keyup</th></tr>
<tr><td>keyCode</td>
<td id="downKey">—</td>
<td id="pressKey">—</td>
<td id="upKey">—</td>
</tr>
<tr><td>charCode</td>
<td id="downChar">—</td>
<td id="pressChar">—</td>
<td id="upChar">—</td>
</tr>
<tr><td>Target</td>
<td id="keyTarget" colspan="3">—</td>
</tr>
<tr><td>Character</td>
<td id="character" colspan="3">—</td>
</tr>
</table>
</body>
</html>
I am currently working on a website that administers timed online tests, and we are trying to implement some measures to reduce the ability to 'cheat' while the test is running. These include disabling right clicks, and handling keystroke events. Additionally, we would like to end the test if the maximized browser popup window where the test is loaded happens to lose focus during the testing session.
I have implemented some code to call an event handler that will end the test if a window.onblur event is triggered during the session. It is working fine in Firefox, but IE seems to interpret window.onblur events differently. Basically, in Firefox I can click anywhere within the window without a window.onblur event triggering, but in IE if I click outside of the test table or form element etc. into whitespace, for instance, it fires.
In addition to using window.onblur, I have also tried top.onblur, and also putting onblur in the body tag of my html:
<body bgcolor="#ffffff" onBlur="lostfocus()">
Again, both work in Firefox, but neither of these alternate methods seem to restrict IE in the appropriate manner.
So my question is this: is there any way to craft this such that IE will play nice and trigger the event ONLY when someone clicks outside of the browser window (on to the start menu, for instance)?
<script language="javascript">
<!--
window.onblur=lostfocus;
function lostfocus(e) {
// student has attempted to cheat, end test
}
// -->
</script>
How would I write 2 onload events into the body tag?
I currently use:
onLoad="if (self != top) top.location=self.location" and have found a scroller that may work better than my current one but it has an onload command as well.
I can't seem to figure out how to do both.
What about if I have 3?
i have a problem with two occuring events in a form. On a input/text field I have registered an onChange Handler and I have defined a submit Button.
Now the users changes the value of the texfield and hits the enter-Key. Now it seems that both events occures, the onChange and the onSubmit of the form. Can I defined the order of the events or better cancel one event, when the other occurs (e.g. cancel the onChange when the user hits the enter-key)?