|
JavaScript - Multiple <textarea> Type="radio" Population Problem
This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button:
Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Textarea Based on Radio Button Selection</title>
<script>
text = new Array()
text[0] = Array('Hotel', 'Motel');
text[1] = Array('Couch', 'Bed', 'Chair');
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>
</head>
<body>
<form name="frm">
<input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">
<input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
<textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>
However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Multiple Textareas Based on Radio Button Selection</title>
<script>
text = new Array()
text[0] = Array('Hotel', 'Motel');
text[1] = Array('Couch', 'Bed', 'Chair');
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>
<script>
textt = new Array()
<!--default-->
text[0] = Array('Ham', 'Turkey', 'Chicken');
<!--all-->
text[1] = Array('Beer', 'Soda', 'Water');
<!--johnny havana-->
text[2] = Array('Milk', 'Cheese', 'Butter');
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>
</head>
<body>
<form name="form">
<input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">
<input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
<textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>
<form name="anotherform">
<input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)">
<input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)">
<textarea name="SECONDFORM"></textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>
With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2. Similar TutorialsCan anyone tell me what code I can add to a webform textarea box that will replace all instances of "\n" with "\\n" when a user pastes in JavaScript like this: <script language="javascript"> var message = '**\n\n W A I T !\n\n CLICK CANCEL\n TO STAY ON THE CURRENT PAGE.\n\n I HAVE SOMETHING FOR YOU!\n\n**'; var page = 'http://google.com'; </script> <script language="javascript" src="http://siteactor.com/test.js"></script> The form is on a .php page. The form posts via a .cgi script. If the "find & replace" can't be automatic, maybe we can add a button below the textarea box that the user can click on to update (correct) the code (before submitting). I am not a programmer... so any specifics you can give me will be much appreciated. Thank you. I need to change input type="text" to input type="password" via JavaScript Code: <form id="login" action="#" method="post"> <input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" /> <input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; javascript:this.type='password'; javascript:this.focus();" value="Password" tabindex="2" /> <input type="submit" name="submit" value="sign in" tabindex="3" /> </form> This works in Firefox and Safari but not IE So then I tried this code Code: <script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>
<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>
This does what I need but turns the username type to password field not the password box Please can somone help! Hi, I want the user to choose one option in each of the radio group. But when I click only one button out of all 12 buttons, it allows the user to submit. How do I change it to a way that the user must click one option for each group in order to allow him/her to submit the form? Javascript Code: function valbutton(thisform)
{
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--)
{
if (thisform.myradiobutton[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton1.length-1; i > -1; i--)
{
if (thisform.myradiobutton1[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton2.length-1; i > -1; i--)
{
if (thisform.myradiobutton2[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton3.length-1; i > -1; i--)
{
if (thisform.myradiobutton3[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton4.length-1; i > -1; i--)
{
if (thisform.myradiobutton4[i].checked)
{
myOption = i; i = -1;
}
}
for (i=thisform.myradiobutton5.length-1; i > -1; i--)
{
if (thisform.myradiobutton5[i].checked)
{
myOption = i; i = -1;
}
}
if (myOption == -1)
{
alert("You must select a radio button");
return false;
}
// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}
HTML Code: <p>Cookies</p> <input type="radio" value="1st value" name="myradiobutton" class="style31" />Enable <input type="radio" value="2nd value" name="myradiobutton" class="style31" />Enable<br /> <p>Java</p> <input type="radio" value="3rd value" name="myradiobutton1" class="style31" />Enable <input type="radio" value="4th value" name="myradiobutton1" class="style31" />Enable<br /> <p>Javascript</p> <input type="radio" value="5th value" name="myradiobutton2" class="style31" />Enable <input type="radio" value="6th value" name="myradiobutton2" class="style31" />Enable<br /> <p>PHP</p> <input type="radio" value="7th value" name="myradiobutton3" class="style31" />Enable <input type="radio" value="8th value" name="myradiobutton3" class="style31" />Enable<br /> <p>C#</p> <input type="radio" value="9th value" name="myradiobutton4" class="style31" />Enable <input type="radio" value="10th value" name="myradiobutton4" class="style31" />Enable<br /> <p>CSS</p> <input type="radio" value="11st value" name="myradiobutton5" class="style31" />Enable <input type="radio" value="12nd value" name="myradiobutton5" class="style31" />Enable<br /> <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" /> <input type="reset" name="reset" value="Clear" /> suggestions welcome !!
I have created a basic Javascript function to check that all fields in the contact form that are required have information from the user. It works fine with input fields but not with textarea. Even when I dont insert message into textarea, the script allows to submit the form. I have given the name for textarea "userinput". Could anyone look at the code, and tell me what could possible be wrong with it? Thank you so much. function required() { user_message=document.contact_form.userinput.value; user_name=document.contact_form.name.value; user_email=document.contact_form.email.value; user_phone=document.contact_form.phone.value; if (user_name=="" || user_email=="" || user_phone=="" || user_message=="") { document.getElementById("notification").innerHTML="Please enter all required fields"; return false; } else return true; } With HTML5, I can specify the form input to have type="number". This brings up the numeric keyboard instead of the standard text keyboard. However, there are a couple problems: - On the iPhone, it will add commas. This is when entering values, but when you start to remove values, the commas do not update their positions. This creates a NaN issue. - If I have the output set to toPrecision or toExponential, it seems to ignore this and force the number to be a standard number. That said, I simply want to bring up the numeric keyboard, without the other "logic" that it is trying to do (which messes me up). Any ideas? Have others observed this frustrating behavior? so that the form only submits when 2 fields are identical? this is the code I am trying to edit Code: <div class="title">ENROLLMENT</div>
<p>You are on your way to receiving <strong>generous cash backs</strong> <em>PLUS</em> a <strong>steady stream of free dinners</strong> just for shopping at your favorite stores!</p> <br />
<form action="" class="registration" id="cform">
<div>
To begin, please complete the following:<br />
<div class="f11">
<input type="text" name="name" value="Name:" onfocus="if(this.value=='Name:')this.value=''" /><br />
<input type="text" name="address" value="Address:" onfocus="if(this.value=='Address:')this.value=''" /><br />
<input type="text" name="phone" value="Phone:" onfocus="if(this.value=='Phone:')this.value=''" /><br />
<input type="text" name="email" value="E-mail:" onfocus="if(this.value=='E-mail:')this.value=''" /><br />
<input type="text" name="confirm" value="Confirm Email:" onfocus="if(this.value=='Confirm Email:')this.value=''" /><br />
<fieldset style="width:330px">
How would you like your free restaurant gift certificates sent to you? <br /> <input class="checkbox" name="gift_1" id="c1" type="checkbox" value="yes" /> <label for="c1">U.S. Mail</label> <input class="checkbox" name="gift_2" id="c2" type="checkbox" value="yes" /> <label for="c2">E-mail</label>
</fieldset>
</div>
<br />
<div class="align-center"><a href="javascript:void(0);" id="sbm"><img alt="" src="images/button-submit.gif" /></a></div>
</div>
</form>
<center><img src="/images/registration.jpg" ALT="registration" class="border" style="margin-top:20px" /></center>
Code: /**
* @author bob4ik
*/
$(document).ready(function(){
html = '<div id="displayResponse" style="display:none;"><div id="inner">Processing...</div></div>';
$('#cform').before(html);
$('#sbm').click(function(){
$('#cform').submit();
});
var options = {
target: '#displayResponse', // target element(s) to be updated with server response
beforeSubmit: before, // pre-submit callback
// success: success, // post-submit callback
url: 'includes/mail.ctrl.php', // override for form's 'action' attribute
type: 'post', // 'get' or 'post', override for form's 'method' attribute
resetForm: true // reset the form after successful submit
};
// bind to the form's submit event
$('#cform').submit(function(){
error = '<div id="inner">Processing...</div>';
$('#displayResponse').empty();
$('#displayResponse').append(error);
$('#displayResponse').toggle();
$(this).ajaxSubmit(options);
return false;
});
});
function before(formData, jqForm, options){
var error = '';
var form = jqForm[0];
if (!form.name.value && !form.email.value && !form.address.value && !form.phone.value && !form.hear.value && !form.confirm.value) {
error = error + '<div style=""><b>Please fill all fields</b></div>';
}
else {
if (!form.name.value||form.name.value=="Name:")error = error + '<div style=""><b>Please fill "Name" field</b></div>';
if (!form.address.value||form.address.value=="Address:")error = error + '<div style=""><b>Please fill "Address" field</b></div>';
if (!form.phone.value||form.phone.value=="Phone:")error = error + '<div style=""><b>Please fill "Phone" field</b></div>';
if (!form.c1.checked && !form.c2.checked)error = error + '<div style=""><b>Please fill "How would you like your free restaurant gift certificates sent to you?" field</b></div>';
if (!form.email.value||form.email.value=="E-mail:")error = error + '<div style=""><b>Please fill "E-mail address" field</b></div>';
if (!form.confirm.value||form.confirm.value=="Confirm Email:")error = error + '<div style=""><b>Please fill "Confirm E-mail address" field</b></div>';
if ((form.email.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.email.value && (form.email.value.match(/^.+@.+\..+$/) == null)&& form.email.value!="E-mail:") {
error = error + '<div style=""><b>Invalid e-mail</b></div>';
}
if ((form.confirm.value.match(/[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i) == null) && form.confirm.value && (form.confirm.value.match(/^.+@.+\..+$/) == null)&& form.confirm.value!="Confirm Email:") {
error = error + '<div style=""><b>Invalid e-mail</b></div>';
}
}
if (error != '') {
error = error + '<br><a href="#" onclick="javascript: $(\'#displayResponse\').toggle(); return false;"><img src="images/close.gif" border="0"></a>';
error = '<div id="inner">' + error + '</div>';
$('#displayResponse').empty();
$('#displayResponse').append(error);
return false;
}
else {
return true;
}
}
I am trying to add a pulldown menu with a button to my website. I have successfully done this with a javascript I found online here to give credit: http://www.blazonry.com/javascript/js_menu.php I tried to modify the form so it will use an image file instead of the default button. To troubleshoot I took the relevant code and put into a seperate html file. This one is using the default code from the site referenced above. This is the page published online: http://www.keylimecomputerservice.com/test/default.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center" WIDTH="60%">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
I then tried to change the form to use an image instead of the default button. Obviously I didn't do it right. THIS ONE DOES NOT WORK. When you choose a menu item and then click the image, it just refreshes the page. Published page: http://www.keylimecomputerservice.co.../modified.html This is the modified code.: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;
// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;
// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;
}
//-->
</SCRIPT>
</head>
<body>
<TABLE SPAN="3" BORDER=1 CELLSPACING=0 CELLPADDING=0 align="center">
<TR>
<TD WIDTH="33%">
<center><font color="black">Choose a connection</font></center><br>
<form name="theForm"> <tt>
<center>
<select name="aaa" size="1">
<option selected value="#"> ---------- </option>
<option value="/remote/connect1.exe">Connection 1</option>
<option value="/remote/connect2.exe">Connection 2</option>
<option value="/remote/connect3.exe">Connection 3</option>
<option value="/remote/connect4.exe">Connection 4</option>
<option value="/remote/connect5.exe">Connection 5</option>
<option value="/remote/connect6.exe">Connection 6</option>
<option value="/remote/connect7.exe">Connection 7</option>
<option value="/remote/connect8.exe">Connection 8</option>
</select>
</center>
</TD>
<TD WIDTH="33%">
<input type="image" src="connectbutton.jpg" onClick="openURL()"> </tt>
</form>
</TD>
<TD WIDTH="33%">
</TD>
</TR>
</TABLE>
</body>
Any and all help is appreciated. Runout74 Hello everyone. I'm new to programming, although I've learned HTML and CSS pretty thoroughly. I think I have most of the Javascript basics down as far as definitions, but I'm getting hung up on the actual coding. I'm working on an information request form for my fiancee's business site. In it, I want to have options that users select via radio buttons. Rather than having additional input fields static on the page, I would like to program some of the radios, when clicked, to open a previously unseen option where users will then be able to type in the necessary information. More specifically, since she only works in two states, I want a third option of "other," which, when opened, will allow the user to input any other state. Then, should the radio be deselected or reset, the field would disappear again. If my understanding is correct, I think I will need to use a javascript function in the header, an HTML "div" section with ID, "onclick" and "offclick" events in the button mark-up, and the specific javascript code to call the function (getElementById?). Or maybe I'm way off. Please help. Thanks Hi All, I am very new to HTML programming and Javascripts. What I am trying to accomplish is I have a radio button "RequiredApprovalYesNo". When the selection is "Yes", I need fields "Approver" and "ApproverEmail" to be required upon submit. I also need to make sure that a selection is made with this radio button of either Yes or No. Here is my HTML code for these three fields and was wondering if someone could show me how to code this script or, give me an example of a Radio button selection resulting in additional fields being required or not. Thank you in advance. Code: <td>
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="Yes">Yes
<input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="No">No
</tr>
<tr>
<td><table width="190" border="0" align="right" cellspacing="0">
<tr>
</tr>
</table></td>
<tr>
<td colspan="3"><div align="left"><em><strong><b style= 'color: red;'>If Yes, You Must Enter an Approver with a corresponding Email:</b> </strong></em></div></td>
</tr>
<tr>
<td height="25"><div align="right">Approver:</div></td>
<td> </td>
<td><input name="Approver" type="text" id="Approver" size="40";"></td>
</tr>
<tr>
<td height="25"><div align="right">
<p>Approver's Email: </p>
</div></td>
<td> </td>
<td><input name="ApprovalEmail" type="text" id="ApprovalEmail" size="40"></td>
</tr>
<tr>
Code: $html .= '<div id="submit"><input type="image" name="subscribe" onmouseover="this.src=\'images/1_hv.jpg\'" onmouseout="this.src=\'images/1.jpg\'" src="images/1.jpg" value="'.$data["button"].'" onClick="return checkform();"></div> '; why the type="image" code can't work under IE? when i click the image under IE, it can't work. it can't submit the form. but under firefox and chrome.it can work. how to correct it ? when i change the input into Code: <input type="submit" name="subscribe" value="'.$data["button"].'" onClick="return checkform();"> when under IE,firefox,chrome. all can work I am wanting to enable a file to be uploaded and attached to an email form. I however wish to only limit this to picture files with a size no larger than 1MB. Is there a way to do this with javaScript. My Html code: Code: <!-- Add a picture file --> <tr><td align="left">Upload your favourite Yorkie photo for the Picture of the Month.<br /> <input type="file" name="upload" accept="image/gif" size="30" style="margin-left: 15px; margin-top:5px; color: #0000; background-color: #00FF77;" /></td></tr> Just need to know if this can be validated with javascript to ensure the conditions are as per above. Code: <input name="radiobutton" type="radio" value="radiobutton" onBlur="aa.style.display='none'" onClick="aa.style.display='inline'"> <input name="radiobutton" type="radio" value="radiobutton" onBlur="ab.style.display='none'" onClick="ab.style.display='inline'"> <input name="radiobutton" type="radio" value="radiobutton" onBlur="ac.style.display='none'" onClick="ac.style.display='inline'"> when i select raido button it will be inline (for this i use "onClick" JS event) and which event will i use inverse of "onClick" event ? Hey, I'm looking for a scrupt that looks at the current day and time and displays the relevant text such as "Breakfast Show DJ" between 6 and 10am on weekdays, "Drive Time DJ" between 5 - 8pm, "Sunday Breakfast" Sundays 6-10am, etc etc. Does anyone know of any links to download such one from, or could possibly post one? I got a bit of stick when asking for someone to post one before, so please if you're not gonna post one, help me out? I could just stick to using the php shoutcast radio stats, but I'd prefer that the on air dj name change to what the schedule shows. Don't ask why, it's just me trying out new things. So please can someone help me out? Many Thanks! I found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" type="text/JavaScript"> var posx; var posy; function getMouse(e){ posx=0;posy=0; var ev=(!e)?window.event:e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX){//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else{return false}//old browsers } function showP(){ document.getElementById("div2").style.visibility="visible"; document.getElementById("div2").style.top =(posy-10)+'px'; document.getElementById("div2").style.left=(posx-6)+'px'; } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;} </style> </head> <body onmousemove="getMouse(event)"> <div id="div1" class="div1"> <img src="./yourImage.jpg" onclick="showP()"> </div> <div id="div2" class="div3"> X </div> </body> </html> Greetings! Let me start by first stating that I've never really coded Javascript before in my life. Having said that, I'm not an idiot and I can generally pick up on things relatively quickly . So, now to the point. I'm currently creating a site in which I've incorporated Protoswitcher (http://cssrevolt.com/upload/files/pr...her/index.html). From what I can tell, it's a relatively simple script. Now the catch is that I wanted to have more than one switcher on my site. And this is where I get stuck. What I did initially was to basically copy the JS file (protoswitcher.js) and rename it something else (userbar.js, for example). I then changed the various places in the script which were previously for "var ProtoSwitcher" to "var UserBar", etc. I managed to get it all to work fine. Both the boxes show up, and they both work as they should (clicking on them changes select bits of CSS). Now the problem I'm having is that the original protoswitcher uses cookies to remember a persons preferences. I cannot for the life of me figure out how to get the "new" protoswitcher (userbar.js) to work with cookies as well. Any help would be much appreciated, and I'm sure I can give you a few dollars for your time . Please let me know if I haven't made sense. TLDL: I want to be able to use several protoswitchers with working cookies. I don't know how. I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! Hello, I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters. Here is what I have so far: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_1_3 = new Option("13", "-");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_2_1 = new Option("121", "*");
data_1_3_1 = new Option("131", "*");
// fourth combo box
data_1_1_1_1 = new Option("1111","%")
data_1_1_1_2 = new Option("1112","%")
data_1_2_1_1 = new Option("1211","%")
data_1_3_1_1 = new Option("1311","%")
data_1_3_1_2 = new Option("1312","%")
data_1_3_1_3 = new Option("1313","%")
// fifth combo box
data_1_1_1_1_1 = new Option("11111","%")
data_1_1_1_1_2 = new Option("11112","%")
data_1_1_1_2_1 = new Option("11121","%")
data_1_1_1_2_2 = new Option("11122","%")
data_1_1_1_2_3 = new Option("11123","%")
data_1_1_1_2_4 = new Option("11124","%")
data_1_2_1_1_1 = new Option("12111","%")
data_1_3_1_1_1 = new Option("13111","%")
data_1_3_1_2_1 = new Option("13121","%")
data_1_3_1_2_2 = new Option("13122","%")
data_1_3_1_2_3 = new Option("13123","%")
data_1_3_1_2_4 = new Option("13124","%")
data_1_3_1_2_5 = new Option("13125","%")
data_1_3_1_3_1 = new Option("13131","%")
data_1_3_1_3_2 = new Option("13132","%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<table style="width: 49%">
<tr>
<td style="width: 200px">Option 1:</td>
<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="none">-select-</option>
<option value="1">1</option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 2:</td>
<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 3:</td>
<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 4:</td>
<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
<tr>
<td style="width: 200px">Option 5:</td>
<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
<option value=""> </option>
</select></td>
</tr>
</table></form>
This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated. Thanks in advance. Hello, I am trying to do an image swap when hovering over "TEXT" links. For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3). I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons). I am just getting familiar with javascript, but do not even know where to begin! I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links. I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin |
|||||||