|
JavaScript - Single Button, Multiple Bgcolor Changes, Help!
I'm having a problem with one of my Labs and My TA is not answering emails.
I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html>
<head>
<style type="text/css" media="all">
highlight {background-color:yellow;}
</style>
<script type="text/javascript">
function blue()
{
document.bgcolor = blue;
}
</script>
</head>
<body>
<p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p>
<input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'">
</body>
</html>
(I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. Similar TutorialsThis may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas? cheers, Hi, When designing a web page, you may come across a situation where you want to combine content from multiple websites in a single window. Could the "iframe" tag makes this possible? If so, as it will separate your page design into several sections and display a different website in each one? Your answers are much appreciated. Thank you for watching me. Stickers Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC()
{
if(!document.images)
return
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Code: function dropdownimageMidS()
{
if(!document.images)
return
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Hi to everybody, I created a site and added a sound on click events a hover. But not all my website visitors prefer it, so I would like to add a button to mute these click sounds. Is this possible? Please help me because I don't have a clue on how to proceed. Thanks very much in advance Dimitri I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help. Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards. I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top. So my first one is this.. 1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this: Code: <html>
<head>
<script language="javascript">
function generateLogs (form)
{
TW_Logger.tickDoc.value = TW_Logger.name.value;
}
</script>
</head>
<body>
<form name="TW_Logger">
<label for="name_id">Name: </label>
<input type="text" name="name" id="name_id"/><br /><br />
<label for="logs_id">Ticket Documentation: </label><br />
<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">
</textarea><br /><br />
<label></label>
<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
</form>
</body>
</html>
I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks! Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/>
<jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/>
<jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" />
<%@ page language="java" import = "java.util.*" errorPage="" %>
<%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%>
<%
request.getSession(true);
String contextPath = request.getContextPath();
chequeStopBean.queryAccList();
//RequestDispatcher dispatcher = null;
%>
<html>
<head>
<title><%=labelBean.getLabel("STOP_CHEQUE")%></title>
<meta HTTP-EQUIV="Pragma" content="no-cache">
<meta HTTP-EQUIV="Expires" content="-1">
<jsp:include page="/ScriptHeader.jsp"/>
<script language="javascript">
function validateAndSubmit() {
var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>";
var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>";
var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>";
var msg5 = "<%=labelBean.getLabel("WITH")%>";
var msg6 = "<%=labelBean.getLabel("TO")%>";
var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>";
var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>";
var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>";
var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>";
var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>";
var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>";
var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>";
var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>";
var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>";
var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>";
var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>";
var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>"
var radioButtons = document.getElementsByName("radio");
for (var x = 0; x < radioButtons.length; x ++) {
if (radioButtons[x].checked) {
if(radioButtons[x].value=="1")
{
if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" ))
return false;
}
else if(radioButtons[x].value=="2")
{
if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" ))
return false;
if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" ))
return false;
if(form.chqNumFrom.value == form.chqNumTo.value){
alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>");
return false;
}
}
}
}
return true;
}
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
}
//-->
<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload="show('single')">
<form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" >
<table width="500" align="center">
<tr>
<td align="left" colspan="3"> </td>
</tr>
<tr>
<td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p class="statusError">
<%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%>
</p>
</div></td>
</tr>
</table><br />
<table width="500" align="center">
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td>
<td width="10" class="lbl">:</td>
<td width="305" align="left">
<select size="1" name="accNum">
<%
for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) {
ChequeDTO chqDto = (ChequeDTO)iter.next();
%>
<option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option>
<% } %>
</select>
</td>
</tr>
<tr>
<td align="right">
<input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" >
<%=labelBean.getLabel("STOP_SINGLE")%>
</td>
<td> </td>
<td>
<input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;">
<%=labelBean.getLabel("STOP_MULTIPLE")%>
</td>
</tr>
<tr id="single">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNum" type="text" size="15">
</td></tr>
<tr id="multiple" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumFrom" type="text" size="15">
</td></tr>
<tr id="multiple1" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumTo" type="text" size="15">
</td></tr>
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td>
<td class="lbl" width="10" >:</td>
<td colspan="2">
<select name="reason">
<option value="Lost"><%=labelBean.getLabel("LOST")%></option>
<option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option>
<option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option>
<option value="Others"><%=labelBean.getLabel("OTHERS")%></option>
</select>
</td>
</tr>
<br/>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%>
</td>
</tr>
<tr><td colspan="3" class="footer">
<ul>
<li><%=labelBean.getLabel("THE_ASTERISK")%></li>
</ul>
</td>
</tr>
</table>
<jsp:include page="/Footer.jsp" />
</form>
</body>
</html>
This is error for the first page.. This is picture that which i wan.. Thanks! Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website. I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity: Code in the <head> tag: Code: <script language="JavaScript1.3" type="text/javascript" src="jse_form.js"> </script> Code in the <body> tag: Code: <!--Begin Internal Site Search 1!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
<input type="text" name="d" size="30">
</tr></td>
<tr><td>
<input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
</form>
</tr></td>
</table>
<!--End Internal Site Search 1!-->
<!--Begin Internal Site Search 2!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
<form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
</tr></td>
<tr><td style="text-align: center;">
<input type="submit" value="Internal Site Search 2"></form>
</form>
<!--webbot bot="Search" i-checksum="4210" endspan -->
</td></tr>
</table>
</div>
<!--End Internal Site Search!-->
<!--Begin Google Search!-->
<form method="get" action="http://www.google.com/search">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="30" maxlength="233" value="" />
</tr></td>
<tr><td align="center">
<input type="submit" value="Google Search" /></td></tr>
</table>
</div>
</form>
<!--End Google Search!-->
<!--Begin Third Party Search!-->
<form id="keywordSearchForm" method="get" action="http://www.site3.html">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input class="input" type="text" name="keyword" size="30" />
</tr></td>
<tr><td align="center">
<input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
</td></tr>
</table>
</div>
</form>
<!--End Third Party Site Search!-->
hi its me again. i was using the data that I pulled out from my db and then provide a push button weather to lock it or not but the problem is, the js code doesn't mouse over on the next button, here's the js code Code: var once = true;
function asktolock(){
if(once){
document.getElementById('locker').value = "Lock Me ?";
}
}
function lockme(){
document.getElementById('locker').value = "Locked";
once = false;
}
and here's my html with php/js code PHP Code: <?php foreach($task->result() as $row): ?> <tr> <td><?php echo $row->title; ?></td> <td><input type="button" id="locker" value="unlocked" onmouseover="asktolock()" onclick="lockme()" /></td> <td><?php echo $row->assign_to; ?></td> </tr> <?php endforeach; ?> if I will put an "onmouseout" and feed it with a function like this Code: function passby(){
document.getElementById('locker').value = "unlock";
}
the clicking function won't work anymore, what's the best thing to do? For some reason for the life of me I can't figure this out and posting on the forms is my last results. I'm trying to create something like this http://powerpetsplus.site88.net/guides/clicker.php You will see on top I'm trying to get a next button that will go to a new page. The url is something like petid1 and clicking next will go to petid2 and so on. (it's the end URL) example http://www.petadoptworld.com/pages/petpage.asp?PETID1 and I need it to go to http://www.petadoptworld.com/pages/petpage.asp?PETID2 and so on. I was able to do this with a help of a friend: http://o.aolcdn.com/hss/storage/fss/...test_next.html but for it to work we have to click the button then the link on top. What are we doing wrong? This is the coding I'm using now. <div id="test"> <p> <input type="button" onclick="update();" value="Click me for the next pet"> - <a id="test_link" href="http://www.petadoptworld.com/pages/petpage.asp?petid=1"> Click Me <input id="previous" type="hidden" value="1"><br> </p> </div> <script type="text/javascript"> function update() { var t1 = document.getElementById('test_link'); var v1 = document.getElementById('previous'); t1.href= "http://www.petadoptworld.com/pages/petpage.asp?petid=" + (parseInt(v1.value) + 1); v1.value = (parseInt(v1.value) + 1); } </script> I'm also trying to figure it out since 8000 are needed if the page is refreshed it remembers what one they are on. Hi, The following doesn't work: Code: <!DOCTYPE HTML>
<title>Sample flash</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>
But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing? Any help is appreciated! Mike I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.
Hi, i'm new here and I need help. I need a script that can alert in 2 ways for multiple radio button groups of "yes" and "no." I got the first question to alert the way I need (with alert #1 for yes and alert#2 for no.) However, starting from the 2nd question it alerts #1 for both yes and no. This is the script I'm working with: Code: <script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
The following are the 1st two sets of radio buttons: Code: <form name="myform" action="formstest.html"> <tr> <td> <input type="reset" value="Click to Reset"> <br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td> </tr> <tr><td class="question">Question #1</td> <td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br /> <input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br /> </td> </tr> <tr rel="flat"> <td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td> <td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br /> <input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br /> </td> </tr> Is it possible to switch out the alerts for yes and no for next 4 questions? And finally, the following is the lengthy, thorough version of my question if it clarifies what I'm trying to do. I would really appreciate someone to point me the right direction. I've tried all kinds of variation to the script and I just can't seem to make it work. Thanks in advance! (Lengthy Version) I also need questions to appear (or not show) below as select radio buttons are clicked. I have 6 groups of yes and no radio buttons. I would like the first two groups to have "alert 1" when yes is clicked (and "alert 2" for no.) I would like the rest to show "alert 2" when yes is clicked (and "alert 1" for no.) (I also have all the questions hidden below question 1. Each subsequent questions appear upon clicking yes for questions 1&2, and no for the rest. I would like to keep this intact - I put that js code I downloaded at the end of this post.) Here's what I have so far... I got most of it working except after the first question, "alert 1" appears for all the clicks submitted. I've been at it for a few weeks and I can't seem to figure it out. Thanks in advance! Code: <html>
<head>
<title>Form Test</title>
<script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
</head>
<body>
<form name="myform" action="formstest.html">
<tr>
<td> <input type="reset" value="Click to Reset">
<br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td>
</tr>
<tr><td class="question">Question #1</td>
<td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br />
<input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br />
</td>
</tr>
<tr rel="flat">
<td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td>
<td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br />
<input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br />
</td>
</tr>
<tr rel="uneven">
<td class="question"><label for="uneven"><span class="accessibility">If flat:</span> Question #3</label></td>
<td><input type="radio" name="buttonset3" value="6" rel="none" id="r6" /> <label for="r6">Yes</label><br />
<input type="radio" name="buttonset3" value="7" rel="ridges" id="r7" /> <label for="r7">No</label><br />
</td>
</tr>
<tr rel="ridges">
<td class="question"><label for="ridges"><span class="accessibility">If uneven:</span> Question #4</label></td>
<td><input type="radio" name="buttonset4" value="8" rel="none" id="r8" /> <label for="r8">Yes</label><br />
<input type="radio" name="buttonset4" value="9" rel="holes" id="r9" /> <label for="r9">No</label><br />
</td>
</tr>
<tr rel="holes">
<td class="question"><label for="holes"><span class="accessibility">If ridges:</span> Question #5</label></td>
<td><input type="radio" name="buttonset5" value="10" rel="none" id="r10" /> <label for="r10">Yes</label><br />
<input type="radio" name="buttonset5" value="11" rel="curved" id="r11" /> <label for="r11">No</label><br />
</td>
</tr>
<tr rel="curved">
<td class="question"><label for="curved"><span class="accessibility">If holes:</span>Question #6 </label></td>
<td><input type="radio" name="buttonset6" value="12" rel="none" id="r12" /> <label for="r12">Yes</label><br />
<input type="radio" name="buttonset6" value="13" rel="answer" id="r13" /> <label for="r13">No</label><br />
</td>
</tr>
<tr rel="answer">
<td></td>
<td class="question"><label for="answer"><span class="accessibility">If not curved:</span><strong> Yes, correct answer!</strong></label></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The following is the JS found to make corresponding questions appear as each relevant radio button answer is clicked: Code: /*****************************************/
/** Usable Forms 2.0, November 2005 **/
/** Written by ppk, www.quirksmode.org **/
/** Instructions for use on my site **/
/** **/
/** You may use or change this script **/
/** only when this copyright notice **/
/** is intact. **/
/** **/
/** If you extend the script, please **/
/** add a short description and your **/
/** name below. **/
/*****************************************/
var containerTag = 'TR';
var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);
if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}
var hiddenFormFieldsPointers = new Object();
function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';
var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
addEvent(x[i],'change',showHideFields)
var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('rel'))
{
var y = getAllFormFields(x[i]);
x[i].nestedRels = new Array();
for (var j=0;j<y.length;j++)
{
var rel = y[j].getAttribute('rel');
if (!rel || rel == 'none') continue;
x[i].nestedRels.push(rel);
}
if (!x[i].nestedRels.length) x[i].nestedRels = null;
hiddenFields.push(x[i]);
}
}
while (hiddenFields.length)
{
var rel = hiddenFields[0].getAttribute('rel');
if (!hiddenFormFieldsPointers[rel])
hiddenFormFieldsPointers[rel] = new Array();
var relIndex = hiddenFormFieldsPointers[rel].length;
hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
var newMarker = marker.cloneNode(true);
newMarker.id = rel + relIndex;
hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
waitingRoom.appendChild(hiddenFields.shift());
}
setDefaults();
addEvent(document,'click',showHideFields);
}
function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
if (y[i].checked && y[i].getAttribute('rel'))
intoMainForm(y[i].getAttribute('rel'))
}
var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}
}
function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;
if (tg.nodeName == 'LABEL')
{
var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
tg = document.getElementById(relatedFieldName);
}
if (
!(tg.nodeName == 'SELECT' && e.type == 'change')
&&
!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
) return;
var fieldsToBeInserted = tg.getAttribute('rel');
if (tg.type == 'radio')
{
removeOthers(tg.form[tg.name],fieldsToBeInserted)
intoMainForm(fieldsToBeInserted);
}
}
function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
var show = others[i].getAttribute('rel');
if (show == fieldsToBeInserted) continue;
intoWaitingRoom(show);
}
}
function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
waitingRoom.appendChild(Elements[i]);
if (Elements[i].nestedRels)
for (var j=0;j<Elements[i].nestedRels.length;j++)
intoWaitingRoom(Elements[i].nestedRels[j]);
}
}
function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
var insertPoint = document.getElementById(relation+i);
insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
if (Elements[i].nestedRels)
{
var fields = getAllFormFields(Elements[i]);
for (var j=0;j<fields.length;j++)
{
if (!fields[j].getAttribute('rel')) continue;
if (fields[j].checked || fields[j].selected)
intoMainForm(fields[j].getAttribute('rel'));
}
}
}
}
function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}
/** ULTRA-SIMPLE EVENT ADDING **/
function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent("on"+type,fn);
}
addEvent(window,"load",prepareForm);
/** PUSH AND SHIFT FOR IE5 **/
function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
this[this.length] = arguments[A_p]
}
return this.length
}
if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}
function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
this[A_s] = this[A_s + 1]
}
this.length--
return response
}
if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
I need a script that will allow a user to select a vertical selection and Horizontal selection that displays a corresponding image. There are only 8 combinations (4 vertical choices and 2 horizontal choices) I just need to display the correct image and a description. There has to be only one of each selected and only display one image. I have tried several and have had no luck. Any ideas? Here is how the layout will look I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button. The source I am looking at is below and I have narrowed down what I am looking at to the bold section. <dl> <dd class="left"><div id='recommendstatus_article4458331'> <dl class="recommend"> <dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a> </dt> <dd><a href="javascript:void(0);" onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt> <dd><a href="javascript:void(0);" onmouseover = "return overlib( 'GeekGold Tip', WRAP );" onmouseout = "nd();" onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;"> <img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dd> <a href="javascript:void(0);" onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a> </dd> <dt class='thumbsdown'> </dt> </dl> How do I create a script to find each instance of the button and click it? I have three radio button groups with different values. My script only works for one group. Please help! <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function emailTo(){ var emails = document.getElementsByName("email1"); var emailAdress = null; for(var i = 0; i < emails.length; i++){ if(emails[i].checked){ emailAdress = emails[i].value; } } if(emailAdress == null){ alert("select the email address"); return; } var mailto_link = 'mailto:'+emailAdress; var win = window.open(mailto_link,'emailWindow'); if (win && win.open &&!win.closed) win.close(); } </script> </head> <body> <p> <input type = "radio" name = "email1" value = "email1.com"/> recipient 1a <input type = "radio" name = "email1" value = "email1.com"> recipient 1b </p> <p> <input type = "radio" name = "email2" value = "email2.com"/> recipient 2a <input type = "radio" name = "email2" value = "email2.com"> recipient 2b</p> <p> <input type = "radio" name = "email3" value = "email3.com"/> recipient 3a <input type = "radio" name = "email3" value = "email3.com"> recipient 3b</p> <p> </p> <p> <input type = "button" onClick = "emailTo()" value = "Email"/> </p> </body> </html> Not sure if this is a CSS or Javascript fix I need. I think it will be a javascript issue/solution. Browser=Firefox 6.0.2 website page: [suspicious link removed] I am attempting to use CSS for Alert Box background. I created a class: Code: <style type="text/css">
.alert {
background-color:#5f9ebe;
}
</style>
But I have tried so many ways to use .alert and none of them work. Code: function btn1(x)
{
if (x.anyText.value == "")
alert("Type Something")
else
alert("You typed: " + x.anyText.value)
x.anyText.value = ""
}
Perhaps my question really is: How do I make class="alert" change Alert Box Background. I am very new to Javascript but learning everyday. I would prefer code help not be jquery. Thanks so much. codeFLY I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?
|
|||||||