JavaScript - Read Only Textfield Onclick Event?

Hi,

I am trying to get my onclick event to handle both of the function below. I want the event to return false (stop executing) if any of the two functions return false. Here is my code:
Code:

function isNumeric(elem, helperMsg){
            var numericExpression = /[0-9]+/;
            if(!elem.value.match(numericExpression)){
                SaveRecord();
                return true;
            }else{
                alert("You cannot enter numbers in the Comments field.");
                return false;
            }                                   
        }
        
        function lengthRestriction(elem, min, max){
           var x = elem.value;
           if(x.length >= min && x.length <= max){
                SaveRecord();
              
           }else{
                alert("Please enter between " +min+ " and " +max+ " characters in the Issue Number field");
               
           }
        }

Please help me. Thank you.

hi,
i need to be able to take the values from two text boxes and change the location of a sprite on my canvas, i've searched the internet and it doesnt really explain how to do it for me. here is my code:

x: <input type="text" name="x" id="x"/><br />
y: <input type="text" name:"y" id="y"/><br />
<input type="submit" value="Submit" onClick="ChangeCo()" /><br />

function ChangeCo()
{
}

and i need the function to take the x and y values from the text boxes and change the values of my variables:

var block_x;
var block_y;


block_x = 290;
block_y = 70;

Thankyou in advance

I'm having an issue where a programmatic click event is not behaving the same way the cursor click event is. A cursor click returns the correct object from GetObject(). The programmatic click triggered by a USB device is returning undefined from GetObject(). How can this be resolved?


Edit: It appears that it does not recognize eval(document.getElementById(gButtonList[gButtonId])).onclick(); as an event. Why is this? How can I get it to recognize it?

Edit2: Resolved it myself. See green text below.

TestPage.htm:
Code:

<script language="JavaScript" src="../bin/USBHelperFile.js"></script>
<script language="JavaScript" type="text/JavaScript">

function BuildButtons()
{
    for (var i = 0; i < testArray.length; i++)
    {
        // Create Div  [Buttons created programmatically] 
        var divNode = document.createElement('div');
        divNode.id = 'div' + i;
        divNode.onclick= ClickFunction;
         etc... 
    }
}

function ClickFuntion(nodeButtonNum)
{
    alert(GetObject()); 
     Returns the index for a cursor click. Returns undefined for
    the programmatic click triggered by the USB device 
}


function GetObject()
{
    var node = event.srcElement;
    return node;
}
</script>

USBHelperFile.js:
Code:

 This JS file works with a USB hardware device that can navigate
through divs and click them when they have focus. 

function HelperFunction(keyCommand)
{
    switch (keyCommand)
    {
        case: "click":
             // eval(document.getElementById(gButtonList[gButtonId])).onclick();
             var target = eval(document.getElementById(gButtonList[gButtonId]));
            target.fireEvent("onclick"); 
            break;
    }
}

Hi I would like to use javascript to control what tooltip displays when a tab is rolled over depending on which tab was clicked.

Code:

  <li id='1tab_1a' class='selected'><a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' ><a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>
 
 <li id='1tab_1c' ><a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>

For example when the Customer Info tab is selected I would like the tooltips to be like above but when Order is the tab selected I would like the
tooltip to say Customer Info Detail, Order Detail Screen, and Phone Detail. How could I use an onclick event to control what tooltip is being
displayed depending on which tab is selected? I have about 20 sets of customer info and sometimes not everyone contains all of the tabs and I
would also like to be able to add more customers.

I assum the following html code:

<div id="id1" onclick="click()">A<div>
<div id="id2" onclick="click()">B<div>


Do you know how to get ID = id2 when I onclick on A?

I was trying to help someone on another forum and seem to have run into a brick wall.

The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine.
However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all).
Perhaps some other more experienced forum members can identify what I doing wrong at this time.

I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet!
Code:

  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

Here is the full code that 'almost' works:
Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
    ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
    ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
    ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
    ['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
    ['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
    ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
];

function tabGroup(which) {
  var sel = document.getElementById('imgGroup').getElementsByTagName('div');
  for (var i=0; i<sel.length; ++i) {
    sel[i].style.display = 'none';
  }
  var tmp = 'imgGroup'+which;  // alert(tmp);
  document.getElementById(tmp).style.display = 'block';
}

function setBigImage(info) {    // alert(info);
  document.getElementById('bigImage').src = info;
}
window.onload = function() {
  var img;
  for (var i=0; i<imgGroupArray.length; ++i) {
    for (var j=0; j<imgGroupArray[i].length; ++j) {
      img = document.createElement('img');
      img.setAttribute('src', baseURL+imgGroupArray[i][j]);
      img.setAttribute('height','100px');
      img.setAttribute('width','75px');
      document.getElementById('imgGroup'+i).appendChild(img);
    }
  }

// Following modified from:
// http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
  var sel, tmp, elem;
  var j=0;
  for (var i=0; i<imgGroupArray.length; ++i) {
    sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
    while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
  }

  tabGroup(0);
}

</script>

</head>
<body>
<div id="tabMenu">
 <div style="float:left">
  <li onclick="tabGroup(0)">Tab 1</li>
  <li onclick="tabGroup(1)">Tab 2</li>
  <li onclick="tabGroup(2)">Tab 3</li>
  <li onclick="tabGroup(3)">Tab 4</li>
  <li onclick="tabGroup(4)">Tab 5</li>
  <li onclick="tabGroup(5)">Tab 6</li>
 </div><br>
 <div id="imgGroup"
  style="width:300px; height:300px; border:1px solid red; float:left">
  <div id="imgGroup0" class="imgBlock"></div>
  <div id="imgGroup1" class="imgBlock"></div>
  <div id="imgGroup2" class="imgBlock"></div>
  <div id="imgGroup3" class="imgBlock"></div>
  <div id="imgGroup4" class="imgBlock"></div>
  <div id="imgGroup5" class="imgBlock"></div>
 </div>
 <div id="bigImageDiv"
  style="width:250px; height:300px; border:1px solid red; float:left;">
   <img id="bigImage" src="" alt="bigImage here!">
 </div>
 <br style="clear:both">
</div>
</body>
</html>

I'm trying to figure out a way to put this in all js code with the onclick event handlers and the parameters. I have 3 links that switch the style of my page. Right now I have them working with inline event handlers. Here are my code snippets below.

HTML:

Code:

<head>
    <link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
    <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
    <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
</head>
		<div class="styleLinks">
		<a href="#" id="style1" onclick="setStyleSheets('style1'); return false;">Style 1</a>
		<a href="#" id="style2" onclick="setStyleSheets('style2'); return false;">Style 2</a>
		<a href="#" id="style3" onclick="setStyleSheets('style3'); return false;">Style 3</a>
		</div>

JS:

Code:

function setStyleSheets(title) {
	//set styles and set cookie
	var i; 
	var attribute;
	var today = new Date();
	var expDate = new Date(today.getTime() + 7*24*60*60*1000);
	var styleSelected = "";
	if (title=="style2"){
		styleSelected = "style2";
	}
	else if (title=="style3"){
		styleSelected = "style3";
	}
	for(i=0; (attribute = document.getElementsByTagName("link")[i]); i++) {
		if(attribute.getAttribute("rel").indexOf("style") != -1 && attribute.getAttribute("title")) {
			attribute.disabled = true;
			if(attribute.getAttribute("title") == title) attribute.disabled = false;
			SetCookie ('style', styleSelected, expDate, "/");
		}
	}
}

i m very new to this thread so i will try to be as clear as possible

i m try to create a website where i n have inserted a menu (this menu template i found online which is free.)
Code:

<div id="menu">
  <ul class="menu">
	  <li><a href="#" class="parent"><span>Home</span></a>
	<li><a href="#"><span>Cities</span></a>
				<div><ul>
					<li><a href="#"><span>Pune</span></a></li>
					<li><a href="#"><span>Mumbai</span></a></li>
					<li><a href="#"><span>Delhi</span></a></li>
					<li><a href="#"><span>Madras</span></a></li>
				</ul></div>
	</li>
			<li><a href="#"><span>Login</span></a></li>
            <li><a href="#"><span>About Us</span></a></li>
			<li class="last"><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table.

I have identical code in my index that works, so I'm just guessing the error is somewhere else, I know IE is not the best target to aim for - but I really want this to work in the windows default browser....

Here is the php page...
PHP Code:
<HTML>
    <HEAD>
        <TITLE>
            Family Home Page
        </TITLE>
        <SCRIPT TYPE="text/javascript" SRC="AddFamilyMemeber.js">
        </SCRIPT>
    </HEAD>
    <BODY>
        <TABLE>
            <TR>
                <TD>Father:</TD>
                <TD>
                    <SELECT ID="Father">
                        <?PHP
                            $con=mysql_connect("localhost","XXXX","XXXX");
                            if (!$con)
                            {
                                die('Could not connect: '.mysql_error());
                            }
                            mysql_select_db("XXXX",$con);
                            $result=mysql_query("SELECT * FROM FamilyMembers");
                            while ($row=mysql_fetch_array($result))
                            {
                                echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>";
                                echo "<BR/>\n";
                            }
                            mysql_close($con);
                        ?>
                    </SELECT>
                </TD>
            </TR>
            <TR>
                <TD>Mother:</TD>
                <TD>
                    <SELECT ID="Mother">
                        <?PHP
                            $con=mysql_connect("localhost","XXXX","XXXX");
                            if (!$con)
                            {
                                die('Could not connect: '.mysql_error());
                            }
                            mysql_select_db("XXXX",$con);
                            $result=mysql_query("SELECT * FROM FamilyMembers");
                            while ($row=mysql_fetch_array($result))
                            {
                                echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>";
                                echo "<BR/>\n";
                            }
                            mysql_close($con);
                        ?>
                    </SELECT>
                <TD>
            </TR>
            <TR>
                <TD>FirstName:</TD>
                <TD><INPUT TYPE="text" ID="FirstName"/></TD>
            </TR>
            <TR>
                <TD>MiddleName:</TD>
                <TD><INPUT TYPE="text" ID="MiddleName"/></TD>
            </TR>
            <TR>
                <TD>LastName:</TD>
                <TD><INPUT TYPE="text" ID="LastName"/></TD>
            </TR>
        </TABLE>
        <BUTTON TYPE="button" ONCLICK="Submit()">Submit</BUTTON>
        <BUTTON TYPE="button" ONCLICK="Abort()">Abort</BUTTON>
    </BODY>
</HTML>

and here is the javascript that works in the index but not here...
Code:

function Abort()
{
	document.location="AddFamilyMember.php";
};

When I load the page everything looks ok, but click on the abort button, and all that happens is that the little error symbol pops in the lower left of IE. The names of the two files are "AddFamilyMember.php" and "AddFamilyMember.js".

Sorry, but I honestly can't see where the problem is....

Hello....I have written a PHP script for a secure client login system and it is working on Firefox and Chrome. But it doesn't work on Safari and IE. I have noticed that some of the javascript functions do not work at all while a few of them work. Can somebody please take a look and let me know what could be wrong?

I am pasting the part of my code that does't work up he

<script type="text/javascript">
function newdir(i)
{
alert('Newdir!');
var newdir=prompt("Please enter the name of the folder");
if (newdir!=null && newdir!="")
{
document.getElementById('newdir').value= newdir;
document.getElementById('folder').value= i;
document.getElementById('download').value = '';
document.myform.submit();
}
}



</script>

<?php

$dir = '../Users/gcreddy/'

echo '<tr><td></td><td></td><td><a href=# onMouseOver="this.src=\'images/delete_s.png\';" onMouseOut="this.src=\'images/delete.png\';" onClick="setdir(&apos;'.$dir.'&apos"><img src="images/delete.png" name="Delete"></a></td><td></td><td></td><td><a href=# onMouseOver="document.newdirimg.src=\'images/newdir.png\';" onMouseOut="document.newdirimg.src=\'images/newdir_s.png\';" onClick="newdir(&apos;'.$dir.'&apos"><img src="images/newdir_s.png" name="newdirimg"></a></td></tr>';

echo '<tr><td></td><td></td><td>Upload file:<input type="file" style="background-color:gray;" name="datafile" size="40"></td><td><a href=# onMouseOver="document.load.src=\'images/upload_s.png\';" onMouseOut="document.load.src=\'images/upload.png\';" onClick="upload(\''.$dir.'\')"><img src="images/upload.png" name="load"></a></td><td><input type="hidden" name="login" value="'.$user.'"><input type="hidden" name="password" value="'.$password.'"><input type="hidden" name="number" value="'.$indexCount.'"><input type="hidden" id="folder" name="folder" value=""><input type="hidden" id="newdir" name="newdir" value=""></td><td><input type="hidden" id="download" name="download" value=""></td><input type="hidden" id="Delete" name="Delete" value=""></tr></TABLE></form>';

?>

When I click on the create folder button (newdir.png), I don't see the alert message that I gave for debugging. I have the SAME problem with 2 more buttons on the same page.

I would be glad if somebody could let me know what the problem / solution is.

Regards,
G.C.Reddy

I am using 2 ajax functions in the program. One for login and one for logout.
The login one is showUser which is working correctly by using the form onsubmit method, however the logout button (IN BOLD) onclick method is not working. Pls help.


Code:

<form  onsubmit="showUser(document.getElementById('uid').value,document.getElementById('pass').value);return false;" >
  <div id="txt"><b>Enter your username </b>
    <input type="text" name= "username" id="uid">
    <br>
  <b>Enter your password</b> <input type="password" name="pass" id="pass">
  <br></div>
  <div id="txt1" style="display : none">help</div>
  <input type="submit" value="Login" /> 
 <input type="button" onclick="logout(document.getElementById('uid').value); return false; " name="logout" value="Logout" />
 <input type="button" value="Register" class="register"/>
</form>

The following coding works in Konqueror 3.5.10 on Ubuntu 8.04.3 LTS but not on Firefox 3.0.10 Linux/3.5.7 XP, Opera 10.10 Linux or IE8 XP.

I can't see why but it may be to do with the recursion (showtable calls onclick calls addit which calls showtable ...). Somehow it is not seeing the addit routine the second time round.

It is meant just to add a line. Eventually it needs to be a complex table but this is for illustration. There are other ways to solve this but this would be the simplest - if it worked!

What happens is that one line is added OK but then it chokes. This is what makes me think it is the recursion but I can't see otherwise how to make it write the updated text. I realise I should have a document.close() in it as well and I have tried adding <![CDATA[ ... ]]> as well.

Other than in Konqueror, it gives an error message saying object not found (in IE8) or more explicitly:

Code:

function onclick(event){
    addit(4);
}

with 'addit is not defined' in Firebug.

In Konqueror it works sweetly.

Code:

<!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' xml:lang='en' lang='en'>
<head>
<script language='Javascript' type='text/javascript'>
if(typeof(sections) == 'undefined'){
    var sections=['Text 0','Text 1','Text 2'];
}
function addit(ilocal){
    sections.splice(sections.length,0,'Text '+ilocal);
    showtable();
 }
function showtable(){
    var i,j,ip1;
    for(i=0;i<sections.length;i++){
        ip1=i+1;
        document.write('Section ',i,':  ',sections[i],'<br>');
    }
    document.write("<input type='button' value='Add' onClick='addit(",ip1,")' /><br>");
    for(j=0;j<sections.length;j++){document.write(sections[j]," ");}
}
</script>
</head><body>
<script language='Javascript' type='text/javascript'>
showtable();
</script>
</body>
</html>

Clues would be very much appreciated - my baldness coefficient is increasing daily!

Hi Everyone,

How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below.

Code:

var start = new Image();
start.src = "start.jpg";
ctx.drawImage(start, 50, 50);

Thanks!

hello everyone, i am new to all this..

i need help regarding..

i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.)

my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field.

i am able to do it for simple text field

as
onclick="javascript: showCalendar('idname')"

but how to do it in this case, where can i declare this ?

I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

head
Code:

<script language=javascript type='text/javascript'> 
function hidediv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.visibility="hidden";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'hidden'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'hidden'; 
} 
} 
}

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById) 
divs[i].style.visibility="visible"; 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'visible'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'visible'; 
} 
} 
} 
</script>

body
Code:

<form name="PublicOrderPage" action="save_client_information.php"  onsubmit="return validateForm()" method="post">


<div id="div1" style="width:600px; height: auto;background: yellow;">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Name:</b></td>
    <td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
	<td style="padding-left:25px;"><b>Home Phone:</b></td>
    <td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
  </tr>
  </table>
  <br/>
 <table width="270" border="0"> 
	<tr>
		<td style="padding-left: 180px;"><b>Email:</b></td>
		<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
	</tr>
</table>
<br/>
<table>
	<tr>
		<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" >  </td>
	</tr>
</table>
</div>




<div id="div2" style="width:600px; height: auto;background: yellow; ">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Site Street:</b></td>
    <td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
	<td style="padding-left:25px;"><b>Site City:</b></td>
    <td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
  </tr>
  </table>
  <br/>
  
  <legend><h3>Inspection Type</h3></legend>
 <table width="270" border="0"> 
	 <table width="602" border="0">
    <tr>
      <td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
        Full Home</td>
      <td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
        4 Point</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
        Condominium</td>
      <td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
        Wind Mit</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
        Roof Cert</td>
      <td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
        Drywall</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
        Re-Inspect</td>
      <td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
        Follow-Up</td>

</table>
<img src="CaptchaSecurityImages.php" />
Security Code: 
<input id="security_code" name="security_code" type="text" />
<br />
<input name="save_client_info" type="submit" value="Save" />
</div>
</form>

When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

Any help would be greatly appreciated.