|
JavaScript - Retaining Objects Instance Whilst Adding An Addeventlistener
Hi there
Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this... Code: <div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
and simply running that would then create the equivalent of doing Code: <div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve Code: /*
* triggerId
* the element in which the attributes will be applied to
*
* hoverBoxid
* the element in which will hover around the triggerId
*/
function hoverBox(triggerId,hoverBoxid){
this.triggerElement = document.getElementById(triggerId);
this.hoverBoxElement = document.getElementById(hoverBoxid);
if(this.triggerElement == null || this.hoverBoxElement){
return null;
}
self = this;
alert(this.triggerElement);
this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}
hoverBox.prototype = {
triggerElement : null,
hoverBoxElement : null,
state : false
};
hoverBox.prototype.activate = function(){
this.state = true;
};
hoverBox.prototype.deactivate = function(){
if(this.state != false){
this.hoverBoxElement.style.display = "none";
this.state = false;
}
};
hoverBox.prototype.update = function(evt){
if(this.state != false){
this.hoverBoxElement.style.display = "block";
this.hoverBoxElement.style.position = "absolute";
this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
}
};
A quick note theses function will work by them selfs if you just do Code: <div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>
<script type="text/javascript">
var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>
But not quite what I'm after i would like not to have to enter in Code: onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)" and have that done by the JavaScript Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me Similar TutorialsOkay, I'm really am not getting this. So I came here hopefully for some help. I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code: Code: function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
//Which is then call by
addEvent('click', someFunction, theElementObject);
So say I had the following code like so: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="./css/global.css" />
<script type="text/javascript">
function addEvent(type, func, elem) {
var netscape = document.getElementById && !document.all;
var ie = document.all;
if(netscape) {
elem.addEventListener(type, func, true);
}
else if(ie) {
elem.attachEvent('on'+type, func);
}
}
function clearTxt() {
var username = document.getElementById('username');
if(username.value == 'Screen Name') {
username.value = '';
}
}
addEvent('click', clearTxt, document.getElementById('username'));
</script>
</head>
<body>
<label for="username">Username:</label> <input name="username" type="text" value="Screen Name" id="username" maxlength="20" />
</body>
</html>
From what I can see and what I understand it should just on event of a click on the username input it should clear the username field. But instead I get a error message from IE saying, "null is null or not a object"???? Like that was any help. So could someone please help me figure out my misunderstanding of this method? Thanks, Jon W I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox. Here's the relevant parts of the code: Javascript (in an external file) Code: var body = document.body;
body.addEventListener("load", Foo(), false);
function Foo(){
addEventListener(document.getElementsByName("start"),"click", alert("hello"), false);
}
HTML Code: <html> <head> <title>BREAKOUT!</title> <script src="breakout.js" type="text/Javascript" > </script> <LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css"> </head> <body id="body"> <!-- etc.... --> Hi folks, I'm having problem setting up event handling using member functions. Consider the following code snippet: Code: function Widget()
{
...
this.register = function()
{
...
document.getElementById(this.id).addEventListener('click', this.default_click_handler, false);
}
this.default_click_handler = function(event)
{
this.do_something_useful(); //<--???
}
this.do_something_useful = function()
{...}
}
However I don't manage to call do_something_useful(), I get a this.do_something_useful() is not a function error. What am I doing wrong? Any help is appreciated, Thanks, A. I have created this statement and it does its job but not very efficient. How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page. Locate id get value and use same value to change the bgColor of the page Code: <input id="red" value="red">red
<input id="green" value="green">green
<script>
document.getElementById('red').addEventListener('click', function (e) {
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>
Your help will be much appreciated! Thanks! Is it possible to add events using addEventListener to multiple radio buttons with same id ? <input id="radId" type="radio" value="0" name="radioname">No <input id="radId" type="radio" value="1" name="radioname">Yes I tried to attach event using document.getelementByID BUT it always picks the first radio button. Is there a way around this, any help would be highly appreciated. Thanks I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest()
{
this.prop1 = '',
this.prop2 = '',
this.options = {initiallevels:0},
this.prop3 = '/blah',
this.prop4 = true,
this.function4 = function(x)
{
console.log(x)
},
this.init = function(options)
{
this.uid=options.uid
this.t=options.target
document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
}
}
myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})
myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})
And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! Hi, I have the following code: Code: function addHandlers()
{
var elementList = new Array();
elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
for(var i = 0; i < elementList.length; i++)
{
var curNode = document.getElementById(elementList[i].parentId).firstChild;
var item = elementList[i];
if(curNode)
{
/*if(curNode.addEventListener)
{
curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
}
else if(curNode.attchEvent)
{
curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)});
curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)});
}
else
{
curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
}*/
curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
curNode.onmouseout = makeCallback(item.parentId, item.regImage);
}
}
}
function makeCallback(parId, image)
{
return function() {
changeImage(parId, image);
};
}
function changeImage(parId, image)
{
document.getElementById(parId).firstChild.src = image;
}
The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas? Code: function offPar(){
alert(this.offsetParent.id);
}
function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");
mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);
}
window.addEventListener('load', init, false);
HTML :
<div id = "content">
<div id = "mid">
<div id = "inner">
<p class = "par">
</p>
</div>
</div>
</div>
I can add an event listener to the #mid div but I can't to the #inner div. Anyone now why this is? Sorry I can't provide more info. That's all I Know! TTFN John Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element. it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly? Here's my Code: Code: <script type='text/javascript'>
// Startup Script
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
}
function LoadEventListeners()
{
var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
// Create event Listeners for the alphabetic keys
for(var x = 0; x < Key_Table.length; x++)
{
Key_Table[x] = document.getElementById(Key_Table[x]);
Key_Table[x].addEventListener("click",
function(){
InsertChar(Key_Table[x]);
},
false);
}
}
function InsertChar(Char)
{
alert("Char is:" + Char);
// Textbox data
document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
}
</script>
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this: igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! Hi All, i have a javascript function which i pass 3 fields to which then check to see if they are empty but the two other fields txtDeveloperDetailEstimate and TxtAldonTaskNumber are numeric and i need to check for != NaN but when i fill something in to the comment area it comes back as red even though there is some text in it, how can i check for the numeric values of the other two without interupting the first check for comments etc? Code:
var DevFieldCheck = Array('MainDisplayContentChange_txtDeveloperComment', 'MainDisplayContentChange_txtDeveloperDetailEstimate', 'MainDisplayContentChange_txtAldonTaskNumber');
var obj;
function DevItemCheck(windowname) {
for (var i = 0; i < DevFieldCheck.length; i++) {
obj = document.getElementById(DevFieldCheck[i]);
if (obj.value == "" || obj.value == 0 || obj.value != NaN)
{
obj.style.backgroundColor = "#B20635";
return false;
}
}
Businesspopup(windowname)
}
Any help will be highly appreciated. **Update** Iv tried this aswell but it still turns red when there is a number in there Code: var DevFieldCheck = Array('MainDisplayContentChange_txtDeveloperComment');
var obj;
function DevItemCheck(windowname)
{
for (var i = 0; i < DevFieldCheck.length; i++)
{
obj = document.getElementById(DevFieldCheck[i]);
if (obj.value == "" || obj.value == 0) {
obj.style.backgroundColor = "#B20635";
return false;
}
}
if (document.getElementById('MainDisplayContentChange_txtDeveloperDetailEstimate').value = NaN)
{
document.getElementById('MainDisplayContentChange_txtDeveloperDetailEstimate').style.backgroundColor = "#B20635";
return false;
}
if (document.getElementById('MainDisplayContentChange_txtAldonTaskNumber').value == NaN)
{
document.getElementById('MainDisplayContentChange_txtAldonTaskNumber').style.backgroundColor = "#B20635";
return false;
}
AnotherDevpopup(windowname)
}
Im aware i have one line with "=" and the other with "==" i was testing both out...to see if it made a difference Good day! Here is the problem, setting the slider to the site, here's an example: http://wowslider.com/best-jquery-sli...near-demo.html and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides. When you see the code generates this error: Uncaught TypeError: Cannot read property addEventListener' of undefined I do not know what this error, help, error on this site: http://uh219381.ukrdomen.com/ Or here's the code: http://uh219381.ukrdomen.com/themes/...1/wowslider.js sorry for my English this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked. i've to check all the radio button in order to proceed with submission. here is the code...anyone pls help how to solve this..tq <script type = "text/javascript"> function validate_form ( ) { valid = true; if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); gender.focus(); valid = false; } if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) ) { alert ( "Please choose your Nationality" ); nationality.focus(); valid = false; } if ( document.myform.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); age.focus(); valid = false; } return valid; } </script> I have created a class providing various functions called BaseBrowser and the class definition by using prototype. Specific browser implementations are then acheived by extending BaseBrowser (eg as 'FF' for Firefox) as shown below. The window alert(); function is overridden for alternate message box popup (using layers in the same window). The function 'browser.customAlert()' can be called from either any code or an actual 'alert()' function. However whenever it is called the value of 'someVar' as defaulted back to the new instance value of false despite the instance 'browser' having already set it to true as it were a new instance. Why is this occuring as it should remember its state between function calls ? Code: var browser;
function BrowserBase(){
//instance variables
this.someVar=false;
function customAlert(){
this.someVar=true;
// . . . other custom alert code
}
}
function browserLink(){
BrowserBaseFF2p0.prototype=new BrowserBase();//inherit
BrowserBaseFF2p0.prototype.constructor=BrowserBase;
browser=new BrowserBaseFF2p0();
}
function BrowserBaseFF2p0(){
BrowserBase.call(this);//call parent constructor
//override generic functions for enhancement
if(document.getElementById){
window.alert=function(txt){
browser.customAlert(txt);
}
}
}
Hi the Is it possible to probe the name of the variable assigned to an object instance in JavaScript? For example: Code: function house(){
}
var bobhouse=new house()
if (instancename=="bobhouse")
//do something
In other words, can I do some sort of string comparison on the variable name "bobname", so I know it's actually called "bobname"? I feel I'm asking how to have a variable recognize itself as a variable. Hi All, i have thie following code Code: searchValue=document.getElementById('keyword').value;searchValue=searchValue.replace(" ", "_");
and if searchValue = this is my title the above code returns this_is my title instead of this_is_my_title any ideas? EDIT ==== ok solved it this works Code: searchValue=searchValue.replace(/ /gi, "_"); many thanks Luke Is there a way that I can run a second set of this script on the same page at the same time? If I want a 2nd instance of this script to run on the same page...what values would I need to rename in the 2nd instance? When I try to place this script a second time it only shows the 2nd scripts values or banner ads... I'm trying to make a Banner rotation placement on my sites inner pages (It's a Wordpress powered site) One Set of Banners that ROTATE directly Above Another Set... I like this script since it allows for a Random order on each page load and will ALSO cycle through Each Banner once before repeating the order, That way Each Advertiser will get seen before another is seen a second or third time... I know there are plug-ins for wordpress for advertising, but I have not found any that will rotate out the banners every x niumber of seconds, like this does... Is there a way that I can run a second set of this script on the same page at the same time? <script type="text/javascript"> // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg', 'http://tcraigtravis.com/', '_new'] ultimateshow[1]=['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg', 'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html', '_new'] ultimateshow[2]=['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 'http://www.gavinsmightychamps.com/index.html', '_new'] ultimateshow[3]=['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg', 'http://www.rockinghamcountymerchants.com/redrivergrill', '_new'] ultimateshow[4]=['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg', 'http://www.rockinghamcountymerchants.com/qualitycleaners', '_new'] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="250px" //set to width of LARGEST image in your slideshow var slideheight="250px" //set to height of LARGEST iamge in your slideshow var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=9000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> In Other words I would have one set of 5 ads rotating and directly below it another set of 5 Ads Hey, I have made/modifying a script that I can create AJAX objects on the fly. It is working fine in Chrome, FF, Opera, Safari but not IE -.- IE = nightmare Code: function ajax_object() {
this.receive = function(serverAJAXpage, whileLoading, onDone, dataIntoDivID) {
this.xmlHttp = createAjaxObject();
this.serverAJAXpage = serverAJAXpage;
this.xmlHttp.open("GET", this.serverAJAXpage, true);
this.xmlHttp.send();
this.xmlHttp.onreadystatechange = function() {
if (this.readyState == 1) {
eval(whileLoading);
//document.getElementById(mydiv).innerHTML=this.responseText;
}
if (this.readyState == 4) {
eval(onDone);
if (typeof dataIntoDivID != "undefined") {
document.getElementById(dataIntoDivID).innerHTML = this.responseText;
}
}
}
}
}
function createAjaxObject() {
var xmlHttp=null;
try {
xmlHttp=new XMLHttpRequest();
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
There is the function that handles the object and here is the objects being used: Code: <script>
var onlineUsersAJAX = new ajax_object(); onlineUsersAJAX.receive('ajax/onlineUsers.php', '', '', 'onlineUsers');
var recentPostsAJAX = new ajax_object(); recentPostsAJAX.receive('ajax/recentPosts.php', '', '', 'recentThreads');
</script>
IE throws the error: 'ajax_object' is undefined Thank you to anyone that can help =) How to I create the following code... Code: #moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
... and this code ... Code: <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> ... programmatically using Javascript? (I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX) Here the full code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
position:relative;
}
#moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var t=125;
var l=20;
$(document).ready(function() {
document.getElementById("movingword").style.top = t + "px";
document.getElementById("movingword").style.left = l + "px";
});
</script>
</head>
<body>
<font color=white><h1> Hello World </h1></font>
<div id="scenery">
<img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
<div id="moving">
<img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt="">
</div>
<div id="movingword">
<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
</div>
</div>
</body>
</html>
Helloo Im new to javascript.. I need help badly... here are two tabless. 1. information of a friend. 2nd table i get when i click da image (ADD ANOTHER FRIEND) but, on validation and submission.. the second table is not showing upp... When i once click ADD FRIEND.. i want the table to show up on reload and validation.... Thanks Here is my code <? if (isset($_POST['submit'])) { if (!$frndname) { $frndname_error = 1; $problems=1; } if (!$frndcity) { $frndcity_error = 1; $problems=1; } ///doo db stuff insertion } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function showTable() { var table = document.getElementById("myTable"); if (table) table.style.display = "block"; var div = document.getElementById("frndimg"); if(div) div.style.display = "none"; } </script> </head> <body> <form action="" method="POST" name="form1"> <?php if(!isset($_POST['submit']) or $problems) { ?> <table> <tr> <td colspan="2"> <table width="21%"> <tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </td> <td width="16%"><? if ($frndname_error) { echo ("<font color='#FF0000'>Name:</font>"); } else { echo ("Name:"); }?> <b><font color="#FF0000">*</font></b><br> <input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td> <td width="81%" colspan="3">City: <b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td> </tr> </table></td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;"> <img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg"> </div> </td></tr> <tr> <td colspan="2"> <table width="100%" id="myTable" style="display:none;"> <tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br> <input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td> <td width="47%" colspan="3">City: <b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td> </tr> <tr> <td width="4%" align="left" valign="top"> </td> <td>Phone Number: <b></b><br> <input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td> <td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td> </tr> <tr><td> </td></tr> </table> </td></tr> <tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr> <tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr> </table> <? } ?> </form> </body> </html> |
|||||||