|
JavaScript - Show Div When A Button Is Clicked
I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page).
When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. Similar TutorialsI know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code: Code: <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids? Thanks> hi, the following function shows a list of Counties populates by a PHP page: Code: $.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){
var myhtml = '<ul>';
for(i=0; i<data.length; i++) {
myhtml += '<li>' + data[i].County + '</li>';
}
myhtml += '</ul>';
$("#countyshow").html(myhtml);
});
I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!) at the moment, when a user clicks on a County this function is passed: Code: function gopublist(event)
{
var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout
stackLayout.setCurrentView('view4');
}
So, passing a value through so I can modify the SQL in the PHP page to filter the counties?! Please help? Hi everyone, Let's say i have a form that looks like this: <form name="myForm" action="myPage" onsubmit="return validateForm();"> <input type="text" name="myInput" size="10"> <input type="submit" name="add" value="Add this"> <input type="submit" name="cancel" value="Cancel this"> </form> What i'm trying to do is for the validateForm() function to either redirect the page if "Cancel this" is clicked, or continue processing if "Add this" was clicked. So the validateForm() would work something like this: function validateForm() { if (cancel button is clicked){ location.href=go some place } else{ do some other stuff } } So, how can dynamically detect which submit button was clicked, before submitting the form? (that would fill in the "cancel button is clicked") I tried with document.myForm.cancel.selected and other variations but it always returns undefined. Any input will be greatly appreciated. Thanks! Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles I have three divs, Step 1, Step 2, Step 3. I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2. Any thoughts? Code: <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
<iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
<br />
</tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
<a name="fb_share" type="button" share_url="LINKHERE"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
<br />
</tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
<center><a href="LINKHERE">Download Here</a>
</center></tr></td></table></div><br />
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function() {
document.getElementById('Step1').style.display = 'none';
document.getElementById('Step2').style.display = 'block';
document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
});
};
(function() {
var e = document.createElement("script");
e.type = 'text/javascript';
e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery So I have a new window document write which outputs all my data after validation into a new window, I have tried to write a button which will (when clicked) send that information to an email address. here is my code so far. i spent about 2 hours checking and playing around looking for errors couldnt find any. I think the problem is the function EmailForm and function subwrite. Is a button written into a new window a common thing to do? or is there another simpler way, however i want the user to be able to check to see if there data is valid and then click to send the email. Code: <HTML>
<!--learn to program through JavaScript-->
<mymerch.HTML>
<HEAD>
<TITLE> mymerch </TITLE>
<SCRIPT LANGUAGE=JavaScript>
//declaringvariables
var firname;
var surname;
var phonenumber;
var emailaddress;
var streetnamenumber;
var yoursuburb;
var postcode;
var yourstate;
var product1;
var product2;
var product3;
var product4;
var product5;
var product6;
var product7;
var product8;
var totalc;
var paymethods;
var method;
var value;
var Cost;
var numericExpression;
var alphaExpression;
var sendemail;
var subject;
var message;
var mailto_link;
var win;
function main() {
//open function main
//function main which validates all data
//declaring variables
firname = document.merch.firstname.value;
surname = document.merch.lastname.value;
phonenumber = document.merch.phonenum.value;
emailaddress = document.merch.emailadd.value;
streetnamenumber = document.merch.stnamenum.value;
yoursuburb = document.merch.suburb.value;
postcode = document.merch.pcode.value;
yourstate = document.merch.state.value;
if (firname == "")
{
alert("Please fill in your Firstname.")
document.merch.firstname.value.focus()
return true;
}
//checks to see if no data as been entered and alerts the user if so.
alphaExpression = /[a-zA-z]/;
if(document.merch.firstname.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the firstname field")
document.merch.firstname.value.focus()
return false;
}
//checks to see if the data entered is letter and if not true returns false.
if (surname == "")
{
alert("Please fill in your Surname.")
document.merch.lastname.value.focus()
return false
}
//checks to see if no data as been entered and alerts the user if so.
alphaExpression = /[a-zA-z]/;
if(document.merch.lastname.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the lastname field")
document.merch.lastname.value.focus()
return false;
}
//checks to see if the data entered is letter and if not true returns false.
numericExpression = /^[0-9+\ ]+$/;
if(document.merch.phonenum.value.match(numericExpression)){
}else{
alert("You can only enter numbers in the Phonenumber field")
document.merch.phonenum.value.focus()
return false;
}
//checks to see if the data entered is a number and if not true returns false.
if(document.merch.phonenum.value.length <7)
{
alert("The Phone Number you have entered is not valid it contains less than 7 digits.")
document.merch.phonenum.focus()
return false
}
//checks to see if the phone number is less than 7 and if so returns false.
if(document.merch.phonenum.value.length >10)
{
alert("The Phone Number you have entered is not valid it contains more than 10 digits.")
document.merch.phonenum.focus()
return false
}
//If phone number is more than 10 return false
if (emailaddress == "")
{
alert("Sorry, your email address is not valid. You didn't enter anything.");
document.merch.emailadd.focus()
return false
}
//checks to see if no data as been entered and alerts the user if so.
if (emailaddress.indexOf("@")==-1)
{
alert("Sorry, your email address is not valid. It doesn't have an @ symbol");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an "@" and alerts the user if false.
if (emailaddress.indexOf(".")==-1)
{
alert("Sorry, your email address is not valid. It doesn't have .COM");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an dot and alerts the user if false.
if (emailaddress.indexOf(" ")!=-1)
{
alert("Sorry, your email address is not valid. It has a space!");
document.merch.emailadd.focus()
return false
}
//checks to see if the data has an space and alerts the user if false.
if (streetnamenumber == "")
{
alert("Please fill in your Street Name and Number.")
document.merch.stnamenum.value.focus()
return false
}
//checks to see if the data is empty and alerts the user if true.
if (document.merch.suburb.value == "")
{
alert("Please fill in your Suburb.")
document.merch.suburb.value.focus()
return false
}
//checks to see if the data is empty and alerts the user if true.
alphaExpression = /[a-zA-z]/;
if(document.merch.suburb.value.match(alphaExpression)){
}else{
alert("You can only enter letters in the Suburb field")
document.merch.suburb.value.focus()
return false;
}
//checks to see if the data entered is a letter and if not true returns false.
if(document.merch.pcode.value.length <3)
{
alert("The postcode you have entered is not valid.")
document.merch.pcode.value.focus()
return false
}
//checks to see if the data has less than 3 characters and alerts the user if true.
numericExpression = /^[0-9+\ ]+$/;
if(document.merch.pcode.value.match(numericExpression)){
}else{
alert("You can only enter numbers in the postcode field")
document.merch.pcode.value.focus()
return false;
}
//checks to see if the data entered is a number and if not true returns false.
if(document.merch.pcode.value.indexOf(" ")!=-1)
{
alert("The postcode you have entered is not valid.")
document.merch.pcode.value.focus()
return false
}
//checks to see if the data has a space and alerts the user if true.
if (document.merch.state.value == "Select")
{
alert("Please select your state")
document.merch.state.focus()
return true
}
//checks to see if the data has been selected and alerts the user if false.
paymentmeth();
openNewWin();
subWrite();
//calling the two functions
}
function paymentmeth()
{
for (i = 0; i < document.merch.payway.length; i++){
if (document.merch.payway[i].checked == true){
//a loop that is used to determine the paymethod and checks to see if data has been entered
method = document.merch.payway[i].value
//declares method
}//ends IF
}//ends
//error control for nothing checked
if (method == false)
{
//if method equals nothing show alert
// this fails to validate
alert("You forgot to select Pay Method.")
}
//document.merch.paytype.value = method;
}
function emailForm(){
sendemail = "micha3l26@hotmail.com";
subject = "Order Details";
message = ("Clients Information firstname is "+firname +" Surname is "+ surname +" PhoneNumber is "+ phonenumber +" EmailAddress is "+ emailaddress +" Street Name and Number is "+ streetnamenumber +" Suburb is "+ yoursuburb +" Postcode is "+ postcode +" State is "+ yourstate +" Payment Method is "+ method +" Total Payment is "+ Cost);
mailto_link = ('mailto:'+sendemail+'?subject='+subject+'&body='+message);
win = window.open(mailto_link,"emailWindow");
if (win && win.open &&!win.closed)win.close();
}
//ends function
function openNewWin() {
var newWin;
newWin = window.open("","newWin","status,height=600,width=600")
//opens the window and sets it 600px by 600px
}
//open new window
function subWrite() {
if (newWin.closed) {
makeNewWin()
}
newWin.focus()
var image = "<img src=quote.jpg>";
//declares variable image as the banner jpg
newWin.document.write(image)
//document writes the variable image
newWin.document.write("<br/>");
newWin.document.write("<br/>");
newWin.document.write("Your FirstName is "+firname);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Surname is "+surname);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your PhoneNumber is "+phonenumber);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your EmailAddress is "+emailaddress);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Street Name and Number is "+streetnamenumber);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Suburb is "+yoursuburb);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Postcode is "+postcode);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your State is "+yourstate);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your Pay Method is "+method);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("Your total payment is "+Cost);
//writes the variable into the new document
newWin.document.write("<br/>");
newWin.document.write("<input type="button" onClick="emailForm()" value="Send Email"/> ");
//("<div style="border:2px solid black;padding:10px;">
//Please <a href="#" onclick="emailForm();">Email Support</a>
//</div>");
//a document write to input a button, with an onclick function to mailto a email address
var newContent = "</BODY></HTML>"
newWin.document.write(newContent)
newWin.document.close() // close layout stream
}
//calling the two functions
//the send email button does not work.
function tally()
{
//the function that calculates the prices of tshirts
Cost =0;
//sets the cost at 0
if (document.merch.tshirt1.checked)
{
Cost = Cost + parseInt(document.merch.tshirt1.value);
}
//cost which is 0 + the tshirt value equals the price of tshirt 1
//repeated 8 times
if (document.merch.tshirt2.checked)
{
Cost = Cost + parseInt(document.merch.tshirt2.value);
}
if (document.merch.tshirt3.checked)
{
Cost = Cost + parseInt(document.merch.tshirt3.value);
}
if (document.merch.tshirt4.checked)
{
Cost = Cost + parseInt(document.merch.tshirt4.value);
}
if (document.merch.tshirt5.checked)
{
Cost = Cost + parseInt(document.merch.tshirt5.value);
}
if (document.merch.tshirt6.checked)
{
Cost = Cost + parseInt(document.merch.tshirt6.value);
}
if (document.merch.tshirt7.checked)
{
Cost = Cost + parseInt(document.merch.tshirt7.value);
}
if (document.merch.tshirt8.checked)
{
Cost = Cost + parseInt(document.merch.tshirt8.value);
}
document.merch.Total.value = "$"+Cost;
}
</script>
Code: <style type="text/css">
<!--
.style1 {
font-family: Century Gothic;
color: #FFFFFF;
}
.style3 {font-family: Century Gothic; color: #FFFFFF; font-size: 24px; }
.style5 {color: #000000}
-->
<!--Declaring the different styles of text !-->
</style></HEAD>
<BODY BGCOLOR="BLACK">
<div align="center"><img src="mymerchbanner.jpg" width="787" height="158">
<!The placement of the main banner>
</div>
<HR>
<FORM NAME="merch" onSubmit="main()">
<!declaring the forms name and onsubmit run the function main>
<table width="368" border="1" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="187" height="40"><span class="style3">First Name: </span></td>
<td width="165"><input type="text" name="firstname" id="firstname"></td>
</tr>
<!firstname textboxes>
<tr>
<td height="45"><span class="style3">Last Name: </span></td>
<td><input type="text" name="lastname" id="lastname"></td>
</tr>
<!lastname textboxes>
<tr>
<td height="44"><span class="style3">Phone Number:</span></td>
<td><input type="text" name="phonenum" id="phonenum"></td>
</tr>
<!phonenumber textboxes>
<tr>
<td height="43"><span class="style3">Email Address:</span></td>
<td><input type="text" name="emailadd" id="emailadd"></td>
</tr>
<!emailaddress textboxes>
<tr>
<td><span class="style3">Street Name and Number:</span></td>
<td><input type="text" name="stnamenum" id="stnamenum"></td>
</tr>
<!streetnameandnumber textboxes>
<tr>
<td height="43"><span class="style3">Suburb:</span></td>
<td><input type="text" name="suburb" id="suburb"></td>
</tr>
<!suburb textboxes>
<tr>
<td height="42"><span class="style3">Postcode:</span></td>
<td><input type="text" name="pcode" id="pcode"></td>
</tr>
<!postcode textboxes>
<tr>
<td height="42"><span class="style3">State:</span></td>
<td> <select name="state" id="state">
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="ACT">ACT</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="Select" selected>Click to select</option>
</select> </td>
</tr>
<!state selection>
</table>
<p> </p>
<p class="style3">What Would you Like Today? </p>
<table width="684" border="0" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="79" class="style1">0001</td>
<td width="79">2<span class="style1">0002</span></td>
<td width="79"><span class="style1">0003</span></td>
<td width="79"><span class="style1">0004</span></td>
<td width="79"><span class="style1">0005</span></td>
<td width="79"><span class="style1">0006</span></td>
<td width="79"><span class="style1">0007</span></td>
<td width="79"><span class="style1">0008</span></td>
</tr>
<tr>
<td><img src="1.png" width="100" height="100"></td>
<td><img src="2.png" width="100" height="100"></td>
<td><img src="3.png" width="100" height="100"></td>
<td><img src="4.png" width="100" height="100"></td>
<td><img src="6.png" width="100" height="100"></td>
<td><img src="8.png" width="100" height="100"></td>
<td><img src="9.png" width="100" height="100"></td>
<td><img src="10.png" width="100" height="100"></td>
</tr>
<!tshirt images for the 8 shirts>
<tr>
<td><input type="checkbox" name="tshirt1" Value="15" onClick="tally()"> ></td>
<td><input type="checkbox" name="tshirt2" Value="15" onClick="tally()"> ></td>
<td><input type="checkbox" name="tshirt3" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt4" Value="30" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt5" Value="30" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt6" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt7" Value="15" onClick="tally()"> > </td>
<td><input type="checkbox" name="tshirt8" Value="15" onClick="tally()"> > </td>
</tr>
<!8 checkboxes with diffent values that are used to add up the prices and onclick run function tally>
<tr>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$30</td>
<td class="style1">$30</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
<td class="style1">$15</td>
</tr>
<!text for prices>
</table>
<td> Total <INPUT TYPE="text" NAME="Total" value="0" size="7"></td>
<p class="style3">How Will you Like to Pay? </p>
<table width="268" border="0" align="center" bordercolor="#000000">
<tr>
<td width="196" class="style3">Cash on Delivery </td>
<td width="56"><input name="payway" type="radio" value="Cash"onClick="paymentmeth()"></td>
</tr>
<!radio button with different values and onclick run paymentmeth>
<tr>
<td class="style3">Bank Deposit </td>
<td><input name="payway" type="radio" value="Bank Deposit"onClick="paymentmeth()"></td>
</tr>
<tr>
<td class="style3">Paypal</td>
<td><p>
<input name="payway" type="radio" value="Paypal"onClick="paymentmeth()">
<label></label>
</p></td>
</tr>
</table>
<p> </p>
<p align="center" class="style3">
<INPUT TYPE="SUBMIT" VALUE="Show Invoice" onSubmit="main()">
<!submit button that runs function>
<span class="style5"> </span>
<input type="RESET" />
<!reset button that runs function>
<span class="style5"> </span>
</p>
</FORM>
</BODY>
</HTML>
Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. I want some thing that when i click a button it shows a div then hides the button. I found this: Code: <script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help. I would like my form submit button to show as a link instead of a button, where it will be a link and pass the city value to the action page: Code: <form action="goTo.jsp" method="post"> <input type="text" name="city"> <input type="submit"> </form> Please advise. Hi, I need a button that not only resets what is typed in the textarea but also hides all shown tables... Here's how my current set up is... ---------text area------ with a reset button table1 title (when clicked, shows a table under it) table2 title (when clicked, shows a table under it) table3 title (when clicked, shows a table under it) the tables under the main tables have buttons that when clicked on inserts texts in the textarea. Any help would be much much appreciated! One more thing, how would I do it so it enables the submit button once the message is Avaliable username. I have this code: PHP Code: <script type="text/javascript"> //function to create ajax object function pullAjax(){ var a; try{ a=new XMLHttpRequest() } catch(b) { try { a=new ActiveXObject("Msxml2.XMLHTTP") }catch(b) { try { a=new ActiveXObject("Microsoft.XMLHTTP") } catch(b) { alert("Your browser broke!");return false } } } return a; } function validate() { site_root = ''; var x = document.getElementById('uname'); var msg = document.getElementById('msg'); var submituser = document.getElementById('submituser'); user = x.value; code = ''; message = ''; obj=pullAjax(); obj.onreadystatechange=function() { if(obj.readyState==4) { eval("result = "+obj.responseText); code = result['code']; message = result['result']; if(code <=0) { x.style.border = "1px solid red"; msg.style.color = "red"; } else { x.style.border = "1px solid #000"; msg.style.color = "green"; usersubmit.style.display = 'block'; } msg.innerHTML = message; } } obj.open("GET",site_root+"js/user_availability.php?username="+user,true); obj.send(null); } </script> and the form is he PHP Code: echo "<form action='' method='POST'>"; echo ' User Name : <input type="text" onblur="validate();" id="uname" name="uname" value="" /> <div id="msg"></div>'; echo "next info"; echo "<input name='step3' value='Next' id='submituser' style='display:none' type='submit' />"; echo "</form>"; I set it as display none as a default and then when the box is green for the box to show as a block. Its not showing up tho after the box becomes green Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> Hey, I've got the following problem: I want to edit this code: <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears. Cheers When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. Any help would be much appreciated!! This is the code below: <script language="Javascript"> <![CDATA[ function openConsole(docId, attachmentFileName, name) { if (window.customOpenConsole) { customOpenConsole(encodeURIComponent(attachmentFileName), name); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null){ headerFrame.openDocAttachment(docId, attachmentFileName, name); } } } function STGhide() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display="none"; } } var link = document.getElementById("ShowHideButton"); //alert(link.innerHTML) link.innerHTML ="<img alt='' src='img/hideshow/showimage.gif' border='0' onclick='javascript:STGshow();' />"; } function STGshow() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display=""; } } var link = document.getElementById("ShowHideButton"); link.innerHTML ="<img alt='' src='img/hideshow/hideimage.gif' border='0' onclick='javascript:STGhide();' />"; } function openDocumentLink(externalId, languageId) { if (window.parent.openDocLink != null) { window.parent.openDocLink(externalId, languageId); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null) { headerFrame.openDocLink(externalId, languageId); } else { setTimeout("openDocumentLink('"+externalId+"','"+languageId+"')",500); } } } ]]> </script> Help is greatly appreciated!! I have two radio buttons on a form. I wish for one button to show a div that's hidden with {display:none;}, and the other to put it back to being hidden when selected. My code seemed sound to me but in firefox it doesn't really work, only in internet explorer. I would like to keep the coding as simple as possible: Code: style:
.hidden{display:none;}
script:
function show() {document.getElementById("hide").style.display = 'inline'}
function hidden() {document.getElementById("hide").style.display = 'none'}
body:
How old are you?<br/>
<input type="radio" name="age" onclick="return hidden();" value="yes"/>over 25<br/>
<input type="radio" name="age" onclick="return show();" value="no"/>25 or under<br/>
<div id=hide class="hidden">
Do you have over 2 years of experience?<br/>
<input type="radio" name="experience" value="yes"/>yes<br/>
<input type="radio" name="experience" value="no"/>no<br/>
</div>
|
|||||||