JavaScript - Fading Out A Table With Javascript Onclick Button

As the code example below shows, I have three radio buttons that perform an javascript action when selected.

Code:

<script language="javascript"> 
function OnProductClick(product) 
{	
	if (product.value == "Car")
	{			
		// do something
	}
	else if (product.value == "Boat")
	{
		// do something else..
	}
	else if (product.value == "Train")
	{
		// do else
	}
}
</script> 

<p>Select option
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Car">Car</input>
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Boat"> Boat</input>
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Train">Train</input>
</p>

This setup is triggerred by a click, clicking multiple times on the same radio button will yield multiple calls to the OnProductClick function. This last part is what I would like to prevent. Say a user selects the option 'car' and then for some reason clicks on the same option again, this will lead to the OnProductClick function being executed twice. How can I prevent the second execution?

hi guys

im trying to check whether a radio button is checked when i click it, but the javascript onlick event is not acting cool! when i click an unselected radio button i am informed that the unselected radio button i just clicked is in fact checked, when i should be getting the information the no, the radio button was not checked when i clicked it. any idea how to get the previous state of a radio button onclick?

What have I done wrong here?


<INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE">

I'm trying to get a submit button to open a thank you page I created (i.e. thankyou.html) only after the user has filled out a series of questions for a form. If they don't fill out the required information, a pop up box informs them to fill out the section (this I have accomplished). I cannot get the submit button to not work if the fields are left un-answered. Can you guys help?

Thanks for you help.
--------------------------------------------------------------------------

This is what I have so far:

<title>Customer Demographic Data Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta>
<style type="text/css">
body {
font-family: Times New Roman;
color: navy;
background-color: #CCC
}
h1, h2, h5 { font-family: Times New Roman; color: black }
body,td,th {
color: #000;
font-family: Times New Roman, Times, serif;
}
h1 {
color: #000;
}
h2 {
color: #000;
}
h5 {
color: #000;
}
a {
font-family: Times New Roman, Times, serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: Times New Roman, Times, serif;
}
</style>

<script type="text/javascript">

function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("Please enter a numeric value!");
return false;
}
}

function confirmSubmit() {
var email = document.forms[0].email.value;
if (document.forms[0].fname.value == ""
|| document.forms[0].lname.value == "")
{
window.alert("Please enter your first and last name.");
document.forms[0].lname.focus();
return false;
}
else if (document.forms[0].address1.value == ""
&& document.forms[0].email.value == "")
{
window.alert("Please enter your Mailing Address or Email Address!");
document.forms[0].address1.focus();
return false;
}
else if (email.indexOf("@") == -1
&& document.forms[0].email.value != "")
{
window.alert("Please enter a valid e-mail address.");
document.forms[0].email.focus();
return false;
}
else if (email.indexOf(".") == -1
&& document.forms[0].email.value != "")
{
window.alert("Please enter a valid e-mail address.");
document.forms[0].email.focus();
return false;
}

else if(document.forms[0].city.value == '')
{
window.alert("Please enter your City");
document.forms[0].city.focus();
return false;
}
else if(document.forms[0].state.value == '')
{
window.alert("Please enter your State");
document.forms[0].state.focus();
return false;
}
else if(document.forms[0].zip.value == '')
{
window.alert("Please enter your Zip Code");
document.forms[0].zip.focus();
return false;
}

checkCookie()
}

function checkCookie()
{
var formInfo = decodeURI(document.cookie);
var userInfo = formInfo.split("; ");
var lname = userInfo[0].split("=");
var fname = userInfo[1].split("=");


if (lname[1] == document.forms[0].lname.value
&& fname[1] == document.forms[0].fname.value)

{
this.close(true);
window.open("FormDenied.html");
return false;

}
else
{
setCookie();
return true;
}

}

function setCookie()
{
var expiresDate = new Date();
expiresDate.setFullYear(expiresDate.getFullYear() + 1);
document.cookie = encodeURI("lname=" + document.forms[0].lname.value) + "; expires=" + expiresDate.toUTCString();
document.cookie = encodeURI("fname=" + document.forms[0].fname.value) + "; expires=" + expiresDate.toUTCString();

window.alert("Your information has been saved.");
}

</script>
</head>

<body>
<p>&nbsp;</p>
<h1 align="left" style="text-align: left">Kudler Fine Foods contact form</h1>
<form action="" method="get" enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit();"
onreset="return confirmReset();" >
<blockquote>
<h2><u>Name</u></h2>
<p>
<input type="text" name="fname" id="fname" size="25" />
<label for="fname"><strong>First Name</strong><br>
<br>
</label>
<input type="text" name="lname" id="lname" size="15" />
<strong>Last Name</strong></p>
<h2>---------------------------------------<br>
<u>Address</u> </h2>
<p>
<input type="text" name="address1" id="address1" size="30" />
<label for="address1"><strong>Address Line 1</strong></label>
</p>
<p>
<input type="text" name="address2" id="address2" size="20" />
<strong>Address Line 2<br>
<br>
</strong>
<input type="text" name="city" id="city" size="20" />
<strong>City</strong> </p>
<p>
<input type="text" name="state" id="state" size="2" />
<label for="state2"><strong>State</strong></label>
</p>
<p>
<input type="text" name="zip" id="zip" size="10" maxlength="10" onChange="return checkForNumber(this.value);" />
<label for="zip2"><strong>Zip Code</strong></label>
</p>
<h2>--------------------------------------- </h2>
<h2> <u>Other Information</u></h2>
<table>
<tr>
<td width=300><strong>Telephone</strong></td>
<td width=300><p><strong>Email address:</strong></p></td>
</tr>
<tr>
<td>
<input type="text" name="area" id="area" size="3" maxlength="3" onChange="return checkForNumber(this.value);" />
<input type="text" name="exchange" id="exchange" size="3" maxlength="3" onChange="return checkForNumber(this.value);" />
<input type="text" name="phone" id="phone" size="4" maxlength="4" onChange="return checkForNumber(this.value);" /></td>
<td>
<input type="text" name="email" id="email" size="30" /></td>
</tr>
</table>
</blockquote>
<h5>&nbsp;</h5>
<blockquote><blockquote>
<h3 align="center">
<input name="Submit" type="button"

</h3>
</blockquote>
</blockquote>
</form>
</body>
</html>

I'm a newbie Javascript coder and I've run into a little problem. I hope someone can help me with it.

The idea is that I've got a bunch of images, and I want one thing to fire when left-clicking them and a different thing when right-clicking. For the purpose of this thread I've replaced the 'things' with alerts.

this is the part that gets added to the images (called 'plaatje'):
Code:

plaatje.onclick = klik;

this is the function that gets executed when clicked.
Code:

function klik(event) {
	var fotoID = event.target.id;
	if (event.button == 0) {
		alert("Left click on " + fotoID + "!");
	} else if (event.button == 2) {
		event.preventDefault();
		alert("Right click on " + fotoID + "!");
}	}

I've added the "event.preventDefault();" part because I was told that would prevent the right-click menu from popping up.

The problem is that the left-click part of the code works perfectly, but the right-click part does nothing. The right-click menu comes up as normal and the alert never shows.

Can anyone tell me what I'm doing wrong?

How do I change the Button's value onClick?

I want it to initially be "Read More" and then change to "Show Less"

Code:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >

Hi there,
I'm soo stuck on particular piece of code..

You see i have 2 radio buttons with values 12hr and 24hr; on clicking any of the above the time format should change automatically.

by default the time format comes in 12hr format against onload event of <body>.

I've tried using javascript but this problem is persisting...

Can anyone help me pleassssse..

I just started my javascript class two weeks ago and am having troubles already and my book is no help.

My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected.

All,
I have the following code:
Code:

<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.myform);">

How can I change this to make this button disabled after the onclick?

Thanks in advance.

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>

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....

Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem

The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well.

I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go.

Code:

<html>
<head>
<title>Vote Button</title>
<script type="text/javascript">
function checkForVote()
{
    // If there is a cookie...
    if(document.cookie != "")
    {
        if(getCookie("voted") == 1)
        {
            // Disable the button again if user already voted. 
            disableButton();
        }
    }
}
 
function disableButton()
{
    var submitvote = document.getElementById("submitvote");
    submitvote.disabled = true;
    submitvote.value = "You Already Voted.";
}
 
function setCookie(name, value, days)
{
    if(days) 
    {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires = " + date.toGMTString();
    }
 
    else 
    {
        var expires = "";
    }
 
    document.cookie = name + "=" + value + expires + "; path=/";
 
    // Disable the button as soon as the user clicks it.
    disableButton();
}
 
function getCookie(name) 
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
 
    for(var i=0; i < ca.length; i++) 
    {
        var c = ca[i];
 
        while (c.charAt(0)==' ') 
        {
            c = c.substring(1,c.length);
        }
 
        if (c.indexOf(nameEQ) == 0) 
        {
            return c.substring(nameEQ.length,c.length);
        }
    }
 
    return null;
}
 
</script>
</head>
 
<body>
<form name="voteform" id="voteform" action="foo.php" method="post">
<input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
</form>
</body>
<script type="text/javascript">
// Run checkForVote() at end of document so that form and contents can be referenced
window.onload = checkForVote();
</script>
</html>

Hi,
This button changes the button text when clicked, but it is always calling the same function. How to make the button depending on the button text to call different functions on onclick?

[CODE]
<script type = "text/javascript">
function button_switch(){
if (document.switch_form.switch_b.value == "Adam"){
document.switch_form.switch_b.value="Eva";
}
else{
document.switch_form.switch_b.value = "Adam";
}
}
</script>

<form name = "switch_form">
<input type = "button" name = "switch_b" id = "switch_b" value = "Adam" onclick = "button_switch()" />
</form>
[CODE]

Hello guys, first post so please be kind.

Usually try and find a solution and edit to work for me but this time its a little trickier.

I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page.

ideally what I want is say 3 buttons.

button1img button2img button3img <// that when clicked control

<div id=target><this target content is now set to 2></div> //and toggle between options

and only one at a time can be on.

The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page.

if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently.

i understand this is a little trickier, im hoping it is possible.

cheers
steve