JavaScript - Can Buttons Display Variables?

If you type in a question in the question box and select your option and answers from the option and answers box ( do this: open grid, click on button "3", type in "1" in the "Number of Answers" text-box and select button "A" by clicking on it, the button should turn green)

Now if you click on the "Add Question" button, it will display a new row in a table which would display the question in the textarea, but how do I code it so that it would display the buttons and the selected buttons under the "Answers" column?

The code for inserting a row under the "Answer" column is below:
Code:

     cell = document.createElement("td");
     cell.className = "answer";
     input = document.createElement("input");
     input.name = "answer_" + qnum;
     cell.appendChild(input);
     row.appendChild(cell);

Whole code is in jsfiddle, click [here][1]


[1]: http://jsfiddle.net/mMb8c/21/

hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says:
cannot find symbol
symbol : class ButtonListener
location: class inventoryprogram.InventoryProgram
ActionListener btnListen = new ButtonListener(); // create listener

here is the part of code with the actionlistener in it

[CODE]
private JPanel createButtonPanel()
{ // begin method createButtonpanel method
ActionListener btnListen = new ButtonListener(); // create listener
// create button objects
JButton nextButton = new JButton("Display Cd"); // create and label button
nextButton.setActionCommand("Next"); // action command for click
nextButton.addActionListener(btnListen);
nextButton.addActionListener(this);

JPanel panel = new JPanel();

panel.add(nextButton); // add next button to panel
return panel; // return panel
} // end method createButtonPanel
[ICODE]

Hi all,

I'm having trouble getting the following right:

Code:

<IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif">

The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days !

Thnx alot!

Sjaroow

I have the following buttons ...

Code:

<input id="newTaskButton" type="button" name="Good Morning" value="201"  />
<input id="newTaskButton" type="button" name="Hello World" value="201"  />

... and the following javascript ...

Code:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#newTaskButton").click(function() {
            	alert(" " + document.getElementById("newTaskButton").name);
            });
        });
    </script>

... but I am having some trouble having the second button to response.

My objective is to have 2 or more button that have the same click function (in this case, newTaskButton) but when clicked, it will produce different response. (in this case, the first button will response 'Good Morning' while the second button will response 'Hello World')

Appreciate any help. Alternatives are welcome too.

Hello. I am a new user.
I have got a website, www.eastbourneinks.co.uk where the quantity buttons (+) & (-) do not work on most computers where I have had feedback. Is there any way of making them work on any/all computers. This is one of the pages:
http://eastbourneinks.co.uk/product/...nk-cartridges/
Many thanks.
Phil.

I'm Confused.
My HTML:

<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="left">
<h1>Insurance Details</h1>
<label>Type of Cover:</label>
.
.
.
<span class="gender-missing"><br />Please select your gender.<br /></span>
<label>Gender:</label>
<input class="radio" id="gender" name="gender" type="radio" value="Male" />&nbsp;Male&nbsp;&nbsp;
<input class="radio" id="gender" name="gender" type="radio" value="Female" />&nbsp;Female&nbsp;&nbsp;

Script.js:

$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var digitNum = /^([0-9])/;

var num1 = document.getElementById('tel');
var num2 = document.getElementById('mobile');
var email = document.getElementById('email');
var dollarUnit = document.getElementById('amount_cover');
var gender = document.getElementsById('gender');


if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false))
{$('.gender-missing').show();
} else {$('.gender-missing').hide();}
if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false))
{$('.smoke-missing').show();
} else {$('.smoke-missing').hide();}
if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false))
{$('.residency-missing').show();
} else {$('.residency-missing').hide();}

if (!filter.test(email.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.address.value == "") {
$('.address-missing').show();
} else {$('.address-missing').hide();}
if (!digitNum.test(num1.value)) {
$('.tel-missing').show();
} else {$('.tel-missing').hide();}
if (!digitNum.test(num2.value)) {
$('.mobile-missing').show();
} else {$('.mobile-missing').hide();}
if (!digitNum.test(dollarUnit.value)) {
$('.cover-missing').show();
} else {$('.cover-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){
return false;
}

if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.contactForm').hide();

//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});

//send the ajax request
$.post('mail.php',{coverType:$('#coverType').val(),
coverRequired:$('#coverRequired').val(),
amount_cover:$('#amount_cover').val(),
terms:$('#terms').val(),
message:$('#message').val(),
name:$('#name').val(),
gender:$('#gender').val(),
status:$('#status').val(),
Birth_month:$('#Birth_month').val(),
days:$('#days').val(),
years:$('#years').val(),
smoke:$('#smoke').val(),
residency:$('#residency').val(),
email:$('#email').val(),
address:$('#address').val(),
tel:$('#tel').val(),
mobile:$('#mobile').val()},

//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});

//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000);
setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900);

//stay on the page
return false;
}
});
//only need force for IE6
$("#backgroundPopup").css({
"height": document.documentElement.clientHeight
});

mail.php code:
<?php
//declare our variables

$coverType = $_POST['coverType'];
$coverRequired = $_POST['coverRequired'];
$amount_cover = $_POST['amount_cover'];
$terms = $_POST['terms'];
$message = stripslashes(nl2br($_POST['message']));

$name = $_POST['name'];
$gender = $_POST['gender'];
$status = $_POST['status'];
$Birth_month = $_POST['Birth_month'];
$days = $_POST['days'];
$years = $_POST['years'];
$smoke = $_POST['smoke'];
$residency = $_POST['residency'];

$email = $_POST['email'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$mobile = $_POST['mobile'];

//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "Message from Your Website";
$body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message";

$headers = 'From: '.$email.'' . "\r\n" .
'Reply-To: '.$email.'' . "\r\n" .
'Content-type: text/plain; charset=utf-8' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

//put your email address here
mail("me@myemail.com", $subject, $body, $headers);
?>
<!--Display a thankyou message in the callback -->
<div id="mail_response">
<h3>Thank you for your interest <?php echo $name ?>!</h3><br />
<p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p>
<br /><br />
<h5>Message sent on: </h5>
<p><?php echo $todayis ?></p>
</div>

Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that?
for live demo: http://gbv.lifeandhealthbenefits.com/
for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js

There has to be a way to do what I want to do but I'm fugged iif I know how. Here's the problem...

A page has three frames - top, left and disp. Top and left contain a number of buttons that display another page in disp. All the buttons need to behave as one set of radio buttons; when a button is clicked any other button returns to the non-clicked state. The really awkward bit is there's an image in top that changes depending on the currently clicked button and that image is behind the buttons.

Here it is in pseudocode of sorts.

Code:

On click button[n]
    Button[LastClicked].Image := Button[LastClicked].UnClickedImage;
    Button[n].Image := Button[n].ClickedImage;
    Top.Image := Button[n].TopImage;
end;

I hope that makes sense.

If some kind soul has any idea of how to do that I'd be very grateful.

Thanks.

Simon.

On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.

i have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

Im trying to configuere a form that
a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies.
and show image when click on my radio button
im confused on how to get the image to display whenthey click on the radio button

Hi,

I have buttons like these:
PHP Code:
<button type="button" onclick="izdas()">I&#382;das</button> 
<button type="button" onclick="miestas()">Miestas</button> 
<button type="button" onclick="map()">&#381;emėlapis</button> 
<button type="button" onclick="infantry()">Kariuomen&#279;</button> 
<button type="button" onclick="biuld()">Statiniai</button> 


How I can add images on them?? Size would be 100x20px.

Also, I would e thankful if someone would help me position them in one vertical line.

Thanks in advance...

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

I've been looking around and all the validation stuff I've seen doesn't work for what I have.

Here is what I am trying to do:
The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose.

So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2".

So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2.

Right now the script just assumes the user is selecting heads for both flips.

Code:

<html> 
<head>
<title>Guess Two Coin Tosses</title>

<script>

function flip5(){
	
	//Input
	var guess1 = document.getElementById('guess1').value
	var guess2 = document.getElementById('guess2').value
	var flip1 = Math.floor(Math.random() * 2)
	var flip2 = Math.floor(Math.random() * 2)
	var outcomes

	if (flip1 == 0) flip1 = 'Heads';
		else flip1 = 'Tails';
	if (flip2 == 0) flip2 = 'Heads';
		else flip2 = 'Tails';

	//Processing
	if (flip1.toUpperCase() == guess1.toUpperCase()) {
	   if (flip2.toUpperCase() == guess2.toUpperCase()) 
	      outcomes = 'win win';
	   else 
	      outcomes = 'win lose';
	}
	else { // here we lost the first
	   if (flip2.toUpperCase() == guess2.toUpperCase())
	      outcomes = 'lose win';
	   else 
	      outcomes = 'lose lose';
	}

	//Output
	document.getElementById('flip1').value = flip1
	document.getElementById('flip2').value = flip2
	document.getElementById('outcomes').value = outcomes
}
	

</script>

</head>

<body>
<h3>Predict the Futu  Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1: 
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2: 
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1: 
<input type="text" id="flip1"  size="5" value="???" />
<p/>Flip-2: 
<input type="text" id="flip2"  size="5" value="???" />

<p/><input type="button" value="Flip Two!" 
 onclick="flip5()" />
<p/>Outcomes: 
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>

I have a page where I have a image displayed and 3 buttons underneath the image. The image displayed is the outdoor tool "hoe". I have the buttons named saw, hoe and tree trimmer below the image. What I want to do is when the user of the web page clicks a button, let's say for example tree trimmer the new image will appear on the page in place of the old image. Right now my code is messed up, it does not matter what image you click but only a image of a saw appears. Also I cannot get my image centered correctly. Does anyone have any suggestions to help me?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img.shown {display: block;
margin-left: auto;
margin-right: auto; }




</style>
</head>

<h1 style="text-align:center">A simple slide show</h1>



<script>
function pictureChange()
{
document.getElementById("shown").src="/tools/saw.jpg";
}


</script>


<body>
<img id="shown" src="/tools/hoe.jpg";>
<p><input type="button" id="theButton" value="Saw" onclick="pictureChange()">
</p>
<p><input type="button" id="theButton" value="Hoe" onclick="pictureChange()">
</p>

<p><input type="button" id="theButton" value="Tree Trimmer" onclick="pictureChange()">
</p>





</body>
</html>

*** I have tried this code snipet below and it does not work for me because I don't know the actual url, the images are uploaded to a server.***********

function pictureChange(imgurl)
{
document.getElementById("shown").src='/tools/' + imgurl + '.jpg';
}