JavaScript - Onclick Function Not Working

i am creating a check box and asigning i an onclick event with the following code.
Code:

var box=document.createElement('input');
box.onClick="alert('test')"
cell.appendChild(box);

when i click the checkbox, the check appears in it, but no alert message, and there is no sign of an onClick attribute in the DOM. However, when i type box.onClick in the console it returns"alert('test')" any ideas why it doesn't regonize the onclick event?

Hi guys.

I have made a PHP script that queries a database and uses the reponse to display multiple radio boxes (using a while loop). What I would like to do is have the page URI updated when a radiobox is clicked, without the user having to press on a "Submit" button or something. This is where Javascript comes into play.

As this is a while loop, there is no specific number of responses or prefixed names. I've found a lot of stuff on Google with functions calling ID's, and then if the ID matches do a predefined response. Of course that wouldn't work in this situation, and to be frank I don't need anything near as complex.

What I'm looking to do is call a Javascript function to redirect the page to "...?location=<get location from PHP var>&id=<get ID from checkbox ID/name>".

When the page reloads, I can then use the PHP $_GET["id"] function to display data. It sounds SO simple in theory! Can anyone help?

What i've done (and failed):

Code:

echo "<form>";

while ($explode_count_dec > "0"):
$while_query = mysql_query("SELECT * FROM printers WHERE ID LIKE '$explodedata[$explode_number]'");
$while_result = mysql_fetch_assoc($while_query);

echo "<input type='radio' value='".$explodedata[$explode_number]."' name='printer' onClick='showmore(".$explode_number.")' />".$while_result["Model"]." <BR /> ";

++$explode_number;
--$explode_count_dec;
endwhile;

echo "</form>";

and the JS:

Code:

<script type="text/javascript">
function showmore($text) {
  var room = "<?= $get_location; ?>";
  window.location = "?location=" + room + "&id=" + <?php $text; ?> // Couldn't do just $text here? I wish I knew JS..
}
</script>

I guess it is because it is 2am and had a few beers but i cannot get this to work and i know its pretty simple to do - see the code below:

Code:

{if ""|fn_needs_image_verification == true}
	{assign var="is" value="Image_verification"|fn_get_settings}
	
	<p{if $align} class="{$align}"{/if}>{$lang.image_verification_body}</p>
	{assign var="id_uniqid" value=$id|uniqid}
    
    {literal}
	<script language="javascript" type="text/javascript">
    function reloadCaptcha() {
        captcha = document.getElementById("captureURLID").src;
		return captcha += 'reload';
    }
    </script>
    {/literal}

	{if $sidebox}
		<p><img id="verification_image_{$id}" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&amp;`$id_uniqid`&amp;"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;" width="{$is.width}" height="{$is.height}" /></p>
	{/if}

	<p><input class="captcha-input-text valign" type="text" name="verification_answer" value= "" autocomplete="off" />
	{if !$sidebox}
		<img id="verification_image_{$id} captureURLID" class="image-captcha valign" src="{"image.captcha?verification_id=`$SESS_ID`:`$id`&amp;`$id_uniqid`&amp;"|fn_url:'C':'rel':'&'}" alt="" onclick="this.src += 'reload' ;"  width="{$is.width}" height="{$is.height}" />
	{/if}
    <img src="{$images_dir}/icons/icon_reload.png" height="25" width="25" alt="Reload Captcha Image" onclick="reloadCaptcha();" class="valign image-captcha" /></p>
{/if}

now the following works totally fine, when you click the captcha code changes..... "onclick="this.src += 'reload'" you will notice i have added a custom reload button image below this with a onclick calling a custom function "reloadCaptcha(); which i want to reload the captcha image above it - however it is not working, i have done the function so it grabs the src from the element ID, i have added 2 ID's to the IMG but cannot remember if you can have multiple IDs or not which if not could be causing the problem but not 100% sure how to include the smarty code for the generated ID on that image.

Any ideas on the code above from having a quick glimps? as the code stands i get the error:

Error: captureURL is null

Many Thanks

I have an external js file which contains the function which for now opens an alert box. The div on the page should run the function when it is clicked but it isn't.

I have tried changing the function to an alert to check the click event is working and i have tried running the javascript in the address bar Code:

javascript:hasFocus();

to ensure it has loaded correctly. Both are working fine and i am getting no errors.

Below is a snippet of the code:

Code:

function hasFocus() {
	alert("a");
}

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">
    <head>
        <script type="text/javascript" language="javascript" src="scripts/cms.js"></script>
    </head>

    <body>
        <div id="tab_panel">
            <div id="tabs"></div>
            <div id="content" contenteditable="true" onclick="hasFocus();"></div>
        </div>
    </body>
</html>

Thanks in advance

Hi,

I would like to change the style on my onclick on my radio buttons not sure why it's not working?!


PHP Code:
<div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>>
<select name="Monday_am_startH" id="Monday_am_startH">
<?php
for ($i=0; $i<24; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
:
<select name="Monday_am_startM" id="Monday_am_startM">
<?php
for ($i=0; $i<60; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div id="Unavailable">&nbsp;</div>
<br />
<input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable

Hi everyone,

I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong...

Is onclick already defined maybe? I'm not sure how it works to be honest...

Code:

<script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;

window.location.href = searchurl;
}
</script> 

<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">&gt; All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>

</select>

<strong>Area</strong>
<select name="area" id="area">
<option value="all">&gt; All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>

</select>

<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />

The domain I'm currently testing this on is http://www.hairloss-help.net.

Any help would be much appreciated.

Thanks

Sam

Hi folks,

I'm frustrated . I've been trying to get this single piece of code to work. I've looked at quite a few sources out there, but everything I try fails.

My site uses AJAX to upload a file, and once complete I dynamically add the file name, size, description, etc to a table.

I have a javascript method that will allow me to download the file once uploaded - and I put an onclick event into some of the TDs in the row I added. (Note: I didn't want to put it in the TR because I also have a delete button in the row).

I've tried

Code:

1. cell1.onclick = 'javascript:downloadAttachmentFile('+attachID+');';
2. cell1["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
3. cell3.setAttribute('onclick','javascript:downloadAttachmentFile('+attachID+');');

but none seem to work!! I know the function is ok because the files that are already on the page work correctly, meaning it's only the dynamically created rows that are having the issues.

Code:

	
function addNewTableRow(fileTable, fileTitle, fileName)
	{
		var table = getMyElement(fileTable);             
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var cell0 = row.insertCell(0);
		cell0.width = 25;
		cell0.className = "tblTicketFilesWhite";
		cell0["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
	}

Hey guys, I have this JS.

Code:

function funcBut(){
	document.getElementById('ref_button').innerHTML = 'pressed';
}

Now, this button activates the function with no problem:
Code:

<input type='button' onclick='funcBut();' value='Change Text'/><br />

But this link won't work and I don't understand why
Code:

<a href="#" onclick="funcBut(); return false;">test</a><br />

Can anyone help?

Hey everyone,
I am having troubles with my form not working correctly in IE. I have onclicks for different parts of my site. I am trying to use onclick and divs to make this happen. Can some look at my code and help me out?
Thanks/
Code:

<script type="text/javascript">
function switchFS(obj) {
	var fset,i,fsclass;
	fset=document.getElementsByTagName('fieldset');
	fsclass = obj;
	for ( i=0; i<fset.length; i++) {
		if ((fset[i].getAttribute('class') != "user") && (fset[i].getAttribute('class') != fsclass)) {
			fset[i].style.display = "none";
		} else {
			fset[i].style.display = "block";
		}
	}
}
</script>


</head>

<body id="submitform">
<div id="container">
	<div id="header">
    <?php include($dirprefix . "external/include/header.html"); ?>	
    </div><!-- end header -->
    <div id="maincontent">
    <h3>&nbsp;</h3>
    <?php include($dirprefix . "external/include/menu_inactive.html"); ?>	
    
    <div id="bodycontent">
    <div id="bodyleftcol">
    <h4>Contact</h4>
    <h5>Registration</h5>
    </div>
    <div id="bodyrightcol">
	<h1 class="formhead">Site Registration</h1>
	<p>Please register if you are a Zimmer customer, or an agency or designer working on behalf of one. Completing the requested information will enable us to continue to update and improve site content. Please make note of your password for future reference. You will receive an email with your login information.</p>
	<div id="mainrightcol">
  <form name="form" id="register" method="post" action="processregister.php">
  
  	<fieldset class="user">  
	<legend>i am a:</legend>
		<label><input type="radio" value="Healthcare provider" class="checkbox" name="usertype" onclick="switchFS('healthcare');" /> Healthcare provider</label>
        <label><input type="radio" value="Agency or designer for a customer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Agency or designer for a customer</label>
		<label><input type="radio" value="Independent agency or designer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Independent agency or designer</label>
		<label><input type="radio" value="Zimmer employee" class="checkbox" name="usertype" onclick="switchFS('zimmer');" /> Zimmer employee</label>
        <label><input type="radio" value="Zimmer field representative" class="checkbox" name="usertype" onclick="switchFS('zimmer1');" /> Zimmer field representative</label>
		<label><input type="radio" value="Media" class="checkbox" name="usertype" onclick="switchFS('user');" /> Media</label>
		<label><input type="radio" value="Healthcare Author/Publisher" class="checkbox" name="usertype" onclick="switchFS('author');" /> Healthcare Author/Publisher</label>
		<label><input type="radio" value="Other" class="checkbox" name="usertype" onclick="switchFS('user');" /> Other</label>
	</fieldset>
    
    <fieldset class="zimmer" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="division">Zimmer business unit: 
        <select name="division">
			<option value="">- n/a -</option>
			<option value="Knees">Knees</option>
			<option value="Hips">Hips</option>
			<option value="Extremities">Extremities</option>
			<option value="Trauma">Trauma</option>
            </select></label>
    </fieldset>
    
    <fieldset class="zimmer1" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="distributorship">Zimmer distributorship: 
        <input type="text" name="distributorship" value="" required="required" /></label>
    </fieldset>

I have added the javascript and the section of code where the user picks how they are. Once you click on one of the users in IE the form goes away.

This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding.
I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot.
Here is the form and input parts:
Code:

<form name="calculate">
<input type="button" onClick="add()" />
<input name="result" type="input" readonly="readonly" value="0" />
<input type="button" onclick="sub()" />
</form>

Here is what the function code looks like:
Code:

function add()
{
var add = 1 * calculate.name.value;
add = add + 1;
calculate.name.value = add;
}
function sub()
{
var add = 1 * calculate.name.value;
add = add - 1;
calculate.name.value = add;
}

Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible.

Any and all ideas are appreciated,
Thanks!

I've been doing some searching and I can't seem to find what I am looking for. I hope someone can help. I am trying to target a link to an iframe window. The catch is that I need to use an onClick function in a TD tag...

Here is an example:

<TABLE HEIGHT="40" WIDTH="780" CELLSPACING="0" CELLPADDING="0" BORDER="1">
<TBODY>
<TR>
<TD ALIGN="CENTER">HEADER 1</TD>

</TR>
<TR>
<TD OnClick="location='http://www.ophil.com'" BGCOLOR="#FFFFFF">Ophil</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td><a name="bidframe">
<IFRAME SRC="bid_item_instructions.html" TITLE="IFRAME" SCROLLING="no" NAME="bidpage" WIDTH="100%" HEIGHT="450" ALIGN="center" FRAMEBORDER="yes" >
</IFRAME>
</a></td>
</tr>
</table>

</CENTER>
</BODY>
</HTML>


I need the results of that onclick to appear in the iframe window I have called bidframe... Any ideas?

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!

Hello and thanks for letting me on this forum!

Im pretty new to JScript and I am still getting used to it all.

I am trying to make a Website that allows values to be selected from one form, transferred to the next form as a summary and then completed.

The values are sent to the page fine but my Validation is broken.

Here is my LINK code
In the Form
Code:

<form id="Tickets" onsubmit="return ValidateForm()" action="Details.html">

And in the Submit Button
Code:

<input type="submit" id="OrderTickets"  value="Order Tickets" onclick="return ValidateForm()" >

My validation is as follows

Code:

<script type = "text/javascript">


function ValidateForm() {

    if( document.getElementById('DepartingStation').selectedIndex == " ")
   {
     alert( "Please provide a Departing Station!" );
     document.getElementById('DepartingStation').focus() ;
     return false;

	
   }
     if( document.getElementById('ArrivingStation').selectedIndex == " ")
   {
     alert( "Please provide an Arriving Station!" );
     document.getElementById('ArrivingStation').focus() ;
     return false;
   }
 var Depart = document.getElementById('DepartingStation').value;
 var Arriv = document.getElementById('ArrivingStation').value;
 if( Depart==Arriv){
 alert( "Train cannot depart and arrive at the same station!" );
  return false;
 }
if ( document.getElementById('ReturnTravel').checked=true;  {
  var valueDate = document.getElementById('OutwardDate').value;
 if ( valueDate== null || valueDate== '')
{
    alert('Please provide an Outward Travel Date!');
    return false;
}
}
var valueRetDate = document.getElementById('ReturnDate').value;
if ( document.getElementById('ReturnTravelType').checked==true && (valueRetDate== null || valueRetDate== '' )) 
{
   alert('Please provide a Return Travel Date!');
   return false;
}



}

Id appreciate any help anyone can share on this! Thanks.

this is my html page..

Code:

<html>
<head>
<script type="text/javascript" language="JavaScript">
function general_formats()
{
window.open('http://www.test.com/general_formats.php');
}
</script>
</head>
<body>
<a href="general_formats.php"><onclick="general_formats(); return false">General Formats</a>
</body>
</html>

When i click ' general Formats ' , a window is opened , i dont need that .
What i need is , when i click the link , it should direct to general_fomats.php..

please help me to solve it . .any help will be appreciated .

Hi there, I am wondering if it is possible to navigate anchor links using a button onclick event. I want next and previous hit buttons to navigate the already existing hits (#hit1, #hit2, etc.).

For instance, I have:

Code:

<script type="text/javascript">
var numHits = {HITS}-1;
function nextHit(){

	if(numHits > 0){
		numHits--;
	}	
	return("location.href=" '#hit" + numHits + " ' ");//added spaces for visibility
}
</script>
<input type="button" value=">" onclick="nextHit()" />

I have tried onclick="nextHit();", onclick="nextHit(); return true/false", onclick=" return nextHit()" and a bunch of others, with no luck.

I have seen working examples with the href tag (e.g. <a href="#" onclick="func();return false">), but nothing with buttons. I also can't seem to get the working href examples to work on my server.

For instance, I cannot get this code to work, it just goes to js_required.html:
<a href="js_required.html" onclick="doSomething(); return false;">go</a>
function doSomething(){
alert("test");
}

It seems so simple, I'm assuming I'm missing something very basic. I would greatly appreciate any help!

~Bobio