JavaScript - How To Return To Original Image

Hi,
Because I'm using an asp script to submit this form, I cannot do a validation on the submit and so have chosen to do the validation with the onblur and the onmouseout functions.
The validation works well for the checking the first input, id CommenterName. If it's blank, the alert displays and then the cursor is moved to the email check. When the alert is dismissed the focus returns to the first input, but, and this is the problem, returning to the first input, triggers the second alert.
How do I return the focus to the first field without triggering the next alert?
Changing the order of the inputs in not an option.


Code:

	function checkCompletitionName(){
	    if (document.getElementById("CommenterName").value.length == 0)
	    {
		    document.getElementById("CommenterName").style.backgroundColor = "#efefef";
			alert("Please type your name.");
			document.getElementById("CommenterName").focus();
			return;
	    }
	    else
	    {
		    document.getElementById("CommenterName").style.backgroundColor = "white";
	    }		
	}
	function checkCompletitionEmail(){
		
	    if (document.getElementById("Email").value.length == 0  || (document.getElementById("Email").value.search("@") == -1 || document.getElementById("Email").value.search("[.*]") == -1))
	    {
		    document.getElementById("Email").style.backgroundColor = "#efefef";
			alert("Please check the email address for errors.");
			return;
	    }
	    else
	    {
		    document.getElementById("Email").style.backgroundColor = "white";
	    }		
	}
	function checkCompletitionComment(){
	    if (document.getElementById("Comment").value.length == 0)
	    {
		    document.getElementById("Comment").style.backgroundColor = "#efefef";
			alert("Please type your comment.");
			return;

			document.getElementById("Comment").focus();
	    }
	    else
	    {
		    document.getElementById("Comment").style.backgroundColor = "white";
			
	    }		
	}

the HTML code:
Code:

<form name="form1" method="get" action="/asp/formmail.asp">
	<p>
		<label class="labelContact">Select Category:</label>
		<select class="inputContact" name="category" id="category">
			<option selected="selected" value="support" id="support">Support</option>
			<option value="sales" id="sales">Sales</option>
			<option value="other" id="other">Other</option>
		</select>
	</p>
	<p>
		<label class="labelContact" for="CommenterName">Name <span class="redasterisk">*</span>:</label>
		<input size="42" class="inputContact" name="nameCommenter" id="CommenterName" onblur="checkCompletitionName()" type="text" />
	</p>
	<p>
		<label class="labelContact" for="Email">Email Address<span class="redasterisk"> *</span>:</label>
		<input size="42" class="inputContact" name="email_address" id="Email" onblur="checkCompletitionEmail()" type="text" />
	</p>
	<p>
		<label class="labelContact" for="Phone">Phone Number:</label>
		<input id="phoneAreaCode" class="inputContact" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> -
		<input id="phonePrefix" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> -
		<input id="phoneLastFour" onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4" />
	</p>
	<p>
		<label class="labelContact" for="RegistrationNo">Registration Number:</label>
		<input size="42" class="inputContact" name="registration" id="RegistrationNo" type="text" />
	</p>
	<p>
		<label class="labelContact" for="CompanyName">Company Name:</label>
		<input size="42" class="inputContact" name="company_name" id="CompanyName" type="text" />
	</p>
	<p>Comments <span class="redasterisk">*</span>:</p>
	<p><textarea rows="5" cols="58" name="comment" id="Comment" onmouseout="checkCompletitionComment()"></textarea></p>

thank you for your help

A while back, Old Pedant wrote a nifty function which changes the class of different sets of <p> elements, in order to change the content and style of their css ':afters'.

You can see it in action here:
welcome > consult > ready ? > make line one > etc:
the ':afters' are the small red markers which appear in the middle of the red lines.

I'm now writing functions for "back" links which will return the page to its original state. I've managed to do this for most elements (change display, colour, etc): however, these ':afters' are proving a problem.

The css for the original ':afters'
Code:

.hex p:after  {
position:relative; top:0.74em; left:-2.10em; z-index:-1;
font-size:0.50em; content:":"; visibility:hidden; }

The logic of applying elaborate css, and then hiding the result is this: the css alters the line-height of the p element, so a dummy version is to applied at the outset, before the specific versions are activated.

The css for the changed ':afters'
Code:

p.xV1:after, p.xV2:after, p.xV3:after, p.xV4:after, p.xV5:after, p.xV6:after {
color:#f03; visibility:visible; content:"x"; }
p.oV1:after, p.oV2:after, p.oV3:after, p.oV4:after, p.oV5:after, p.oV6:after {
color:#f03; visibility:visible; content:"O"; }

What needs to happen is for all of these p classes to be returned to the css '.hex p:after' .

I think the function might look something like
Code:

function returnAfters(){
for (i=0; i<elP.length; i++) {
if (elP.item(i).className.charAt(1) == "V") {
	elP.item(i).className = "hex p";}
}

The original function, altho I don't think it's needed to solve this, can be found here, at line 295.

Meanwhile, one other problem area involves a jQuery function, so I'll post elsewhere.

Cheers!

I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated

Code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<script type="text/javascript"> 
function selectRow(row) {
  var firstInput = row.getElementsByTagName('input')[0];
  firstInput.checked = !firstInput.checked; 
} 
</script>
</head> 
<body> 
<table id="tbl" border="2"> 
<thead> 
<tr> 
<td></td> 
<td>First Row</td> 
<td>Second Row</td> 
<td>Third Row</td> 
</tr> 
</thead> 
<tbody> 
 <tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>1</td> 
<td>1</td> 
<td>1</td>  
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>2</td> 
<td>2</td> 
<td>2</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>3</td> 
<td>3</td> 
<td>3</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>4</td> 
<td>4</td> 
<td>4</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>5</td> 
<td>5</td> 
<td>5</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>6</td> 
<td>6</td> 
<td>6</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>7</td> 
<td>7</td> 
<td>7</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>8</td> 
<td>8</td> 
<td>8</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>9</td> 
<td>9</td> 
<td>9</td> 
</tr> 
 <tr onmouseover="this.style.cursor='hand'"> 
<td> 
<input type="checkbox" class = "chcktbl"/> 
</td> 
<td>10</td> 
<td>10</td> 
<td>10</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

I am looking to use a similar method as facebook chat does, where it alternates between the original title text and 'friendsName has sent you a message!...'

how can I do this ?

<script language="JavaScript">

function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}}
</script>

Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working.

i have this in my javascript code but have no idea on how a returned value works/where does it return to???? what do i do/or can i do with a value that gets returned???

i am asking this so i can learn on how to use it cos i am new to all this and dont know how it works...please show/explain to me please?

thanks
here my full code:
PHP Code:
<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>

<html>
<head>
<script type="text/JavaScript">
function refreshPage(s) 
{ 
window.location.reload(); 
if((s.options[s.selectedIndex].value) = "zed-catcher")
{
var $index = s.selectedIndex;
var $value = s.options[$index].value;
alert (s.selectedIndex); 
alert ($value);
window.location.reload(); 
[COLOR="Red"]return &value; //where does it return to ???? how/what to do with a return value???[/COLOR]
}
} 
</script>
</head>
</html>

<body> 
<form action="<?php echo url_for('adminservice/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" '?>>
<?php if (!$form->getObject()->isNew()): ?>
<input type="hidden" name="sf_method" value="put" />
<?php endif; ?>

<table >
<tfoot>
<tr>
<td colspan="2">
<?php echo $form->renderHiddenFields(false) ?>
&nbsp;<a href="<?php echo url_for('adminservice/index') ?>">Back to list</a>
<?php if (!$form->getObject()->isNew()): ?>
&nbsp;<?php echo link_to('Delete', 'adminservice/delete?id='.$form->getObject()->getId(), array('method' => 'delete', 'confirm' => 'Are you sure?')) ?>
<?php endif; ?>
<input type="submit" value="Save" />
</td>
</tr>
</tfoot>
<tbody>
<?php echo $form->renderGlobalErrors() ?>
<tr>
<th><?php echo $form['name']->renderLabel() ?></th>
<td>
<?php echo $form['name']->renderError() ?>
<?php echo $form['name']?>
</td>
</tr>

<tr>
<th><?php echo $form['logo_url']->renderLabel() ?></th>
<td>
<?php echo $form['logo_url']->renderError() ?>
<?php echo $form['logo_url'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['call_center_number']->renderLabel() ?></th>
<td>
<?php echo $form['call_center_number']->renderError() ?>
<?php echo $form['call_center_number'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['catcher_id']->renderLabel();
$catcher_id = $form->getObject()->getCatcherId();
$catcher = LpmCatcherPeer::getByCatcherId($catcher_id);
$catcher_name = $catcher->getName();
?></th>
<td>
<?php echo $form['catcher_id']->renderError() ?>
[COLOR="Red"]<select name="services" onchange="refreshPage(this.form.services)">[/COLOR]
<?php
$catcher_names = LpmCatcherPeer::getByAllNames();
foreach($catcher_names as $row)
{
?>
<option value="<?php echo $row->getName()."/".$row->getId();?>" <?php if($row->getName() == $catcher_name) echo ' selected="selected"'; ?> ><?php echo $row->getName();?></option> 
<?php
}

[COLOR="Red"]if ($row->getName() == "zed-catcher") //just thought with the return in my java script i can pass the newley selected value back to here and if it meets the if i echo these lines??
{
echo $form['service_code']->renderLabel(); 
echo $form['service_code']->renderError(); 
echo $form['service_code'];
} [/COLOR]
?>
</select> 
</td> 
</tr>
<tr>
<th><?php echo $form['price_description']->renderLabel() ?></th>
<td>
<?php echo $form['price_description']->renderError() ?>
<?php echo $form['price_description'] ?>
</td>
</tr>
</tbody>
</table>
</form>
</body>

thanks!

i'm trying to get some information with this code from my database:

Code:

function getTableSize(tableName){
    db.transaction
    (
        function(tx)
        {
            tx.executeSql
            ('SELECT * FROM '+ tableName,[] , function(tx, r)
                                                      {
                                                          return r.rows.length;
                                                      }
            );    
        }
    );
}

but it doesnt work and i cant figure why
what i want is that this function return the table size to one variable in another function...something like:

Code:

var groupTableSize = getTableSize('groups');

i achieved to make a chain:

Code:

function getId(id) {
  id_elem = document.getElementById(id);
   return {
      color:function(e){
   id_elem.style.color = e;
}
   };
}

so this can be getId("test").color("red");

but what happens if i want to do that?

Code:

function getId(id) {
  id_elem = document.getElementById(id);
return id_elem;
   return { ????......

how can i chain if i use return in the first place?

I have a javascript that takes information from a form and recompiles that information into a readable shift report. The problem I am having is with returns in the textareas. I tried:

Code:

theReport = theReport.replace("
","<br>"

but that space puts the rest of the var on a different line and screws with the results. How can I replace a return with <br>?

I want the output to be this way
Student: Doe, John
eMail: jd@email.com
Course ID: COIN-O70A.01
-----------------------

Can any one pls help me with the display. If I use alert instead of return then I works. But I need to display it in the document.

Code:

<html>
<head>
<title>Variable - Examples 1</title>
   <script type="text/javascript">
	function Student(firstName, lastName, email,courseID){
		this.firstName = firstName;
		this.lastName = lastName;
		this.email = email;
		this.courseID = courseID;
	}
	
	Student.prototype = {
		constructor : Student,
		toString : studentInfo
	};
	
	function studentInfo(){
			 return this.firstName + "," + this.lastName + '\n'+ this.email + '\n' + this.courseID;
	}
	var student = new Student("Doe", "John", "Doeohn@gmail.com","COIN 70A.01");
	
   </script>
</head>
<body>
	<script type="text/javascript">    
		document.writeln(student.toString());
	</script>
</body>
</html>

Im working on a function where i need to return the active elements ID.
the element will have class="main" id="1" onmouseover="showSub()">

Would someone be able to write me a simple function which simply puts the elements ID number in an alert box? I can figure out the rest i need from that .

Thanks, Tom

hi,i don't understand about the jquery basic example
the code is below
PHP Code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $('p').addClass(function(n){
      return 'par_' + n;
    });
  });
});
</script>
<style type="text/css">
.par_0
{
color:blue;
}
.par_1
{
color:red;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Add classes to p elements</button>
</body>
</html> 


i want to understand about the how is work function(n){ in the function a
and how work return function return 'par_' + n;
thanks mate

hi,

i wanna get the value from javascript to php variable. here is my code,
<html>
<body>
<select name="drop" size="10" onchange="drp_selectd_value(this)">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
&nbsp;
</select>

<?php
echo "The PHP value".'<script>value_return();</script>';
$p='<script>y;</script>';
?>
</body>
</html?


<script>
var x;
var y=100;

function drp_selectd_value(sdf)
{
x=sdf.value;
alert("Value is : " +x);
value_return(x);


}
function value_return(val)
{
alert("Second Function calling : "+val );
return val;

}
</script>


This code does not working!!! How can i fix tis problem???I m expecting for the reply.. Thanks in advance

Hello, How can this be made to return confirmation?
<form id="score_form" method="post" action="addscore.php"><input id="score" name="score" value="" type="hidden"><img id="collect" style="cursorointer;height: 37px; width: 100px; margin-top: 13px;" src="./collectlive.gif" onclick="collect_points();"></form>
Letsay the confirmation window would say"ARE YOU SURE"

Have a jsp page with 10 editable fields and in last Add Button.Now when user edit a field from value 10 to 20(example)and click on Add .Value will be changed and focus will return to the same field.similarly for other fields.how to to .any code sample?