JavaScript - Make A Search Function Work In A Listbox Full Of Onchange Tags?

Hi all,

I'm new to javascript and am having a few issues. I have a function that I want to run with multiple onchange events. My page has several image selection buttons and I want it to preview the image when/if each one is selected. I have gotten it working for the first on the page but cannot for the remainder.

Is this possible or am I wishful thinking?

Foster





Reply With Quote




01-17-2015, 10:23 AM #2
Arbitrator View Profile View Forum Posts

Senior Coder Join Date Mar 2006 Location Splendora, Texas, United States of America Posts 3,423 Thanks 32 Thanked 293 Times in 287 Posts


Originally Posted by Foster
I'm new to javascript and am having a few issues. I have a function that I want to run with multiple onchange events. My page has several image selection buttons and I want it to preview the image when/if each one is selected. I have gotten it working for the first on the page but cannot for the remainder.

Is this possible or am I wishful thinking?



Where's the code?

If you simply want to assign multiple listeners for the same event on a single element, use element.addEventListener("change", eventHandler) instead of element.onchange = eventHandler or <element onchange="eventHandler();"></element>.

Hi there,

I have a drop down menu that runs a function when one of the options are chosen. Is there a way to have this run from individual links?

<select name="users" onChange="showUser(this.value)">
<option value="">Select a Deer:</option>
<option value="1">8002</option>
<option value="2">8009</option>
<option value="3">8011</option>

Thanks

Rich

I probably have gone about this all wrong since I am a complete noobe, but if someone could point me in the right direction I would be very thankful. Here is the situation.

What works:
I have a drop menu that is being generated by a PHP/MYSQL script, when you choose an option the onchange event is triggered and runs a function that sends the value to a php script so a graphical image can be generated and saved with a random file name. The randomly generated image name is sent back as an XML response and then image is displayed with src

The Problem:
I need to be able to have a function store the value from the onchange event and run again when the page refreshes. As of right now, when the page refreshes the image is gone. I have attempted to do this with cookies, but not exactly sure how I will do this and I have finally decided to ask for help. I hope my explanation is not confusing, please let me know if you need more info or if you need to see my code.

Hey all,

I have a little function that performs when a form item is selected. I would like to give the form items all at once and have the function perform when the user mouses over an item in the displayed list. Here is the form code:
Code:

<form>
<select onchange="showRSS(this.value)">
<option value="">Select an RSS-feed:</option>
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>

thanks a bunch,

Brian

p.s. I tried this but it didn't work
Code:

<?php echo("<a href=\"http://www.msn.com\" onMouseover=\"showRSS(this.MSNBC)\">MSNBC News</a>");?>
<br />
<?php echo("<a href=\"http://www.google.com\" onMouseover=\"showRSS(this.Google)\">Google News</a>");?>
<br />

I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input.

I would welcome any help.

I just can not seem to get it to work.

Code:

<script language="javascript" type="text/javascript">
    function checkQuantity(frm) {
        var succesful = false;
        var numQuantity;
        numQuantity = parseInt(frm.Quantity.value);
        var numTotalPrice;

        if (numQuantity != 0) {
            numTotalPrice = numQuantity * 4;
            frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
            successful = true;
        }
        else {
            alert("Sorry must order more than 0");
            successful = false;
        }
        return succesful;
    }
            

</script>

Code:

<form action=""  onsubmit="return checkQuantity(this)" style="width: 193px">
                   
                    <table cellpadding="4" style="width:111%">
                        <tr>
                            <td class="style1">
                                Quanity:</td>
                            <td class="formInputCell">
                                <input name="Quantity" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                            <td class="style1">
                                Total Price $
                            </td>
                            <td class="formInputCell">
                                <input name="TotalPrice" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                        <td class="style2"></td>
                        <td><input id="Submit1" type="submit" 
                        value="Buy Now" class="buttonstyle" /></td>
                        </tr>  
                    </table>    
                    </form>

Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance

<style>
.table th {border-style: solid; border-color: red;background-color: #CCCCFF;
}
</style>
<body>
<table border="1" class="table">
<thead>
<th colspan = "5">Click an Image to Enlarge
</th>
</thead>
<tbody>
<tr>
<td>
<img src = "Thumbnails/ada1838-thumb.JPG" alt =
"ada1838-thumb" >
</td>
<td>
<img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb">
</td>
<td>
<img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb">
</td>
<td>
<img src = "Thumbnails/aediagram-thumb.JPG" alt =
"aediagram-thumb">
</td>
<td>
<img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb">
</td>
</tr>

<tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center">

</td>
</tr>
<thead>
<th colspan = "5">
</th>
</thead>
</table>
</body>
</html>

I was wondering how somebody might be able to do the recognizing text between the php tags and making it into colored text in its own colored area like codingforums has done.

I found this script, and it works great:
Code:

<script type="text/javascript">
  function disable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","true");
    }
  }
</script>

I tried to make the inverse by simply reversing the setAttribute() like so:
Code:

<script type="text/javascript">
  function enable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","false");
    }
  }
</script>

But that didn't do it.
Can someone show me why, and how to fix it?

Here's the sample form which I'm trying to test it on:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
  <input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
  </fieldset>
</form>

Edit:
The ultimate goal which I'm working toward now (step by step =) is to have a form more like:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" />
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D2')" />
  <fieldset id="D2">
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D3')" />
  <fieldset id="D3">
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
  </fieldset>
</form>

And have the fieldsets enable and disable according the selection of the radio buttons.

Also, the fieldsets (and their ID's) will be dynamically generated via PHP



Thanks-a-bunch,
~ Mo

I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example:
Code:

function unhighlight(x) {
x.style.backgroundColor="transparent"
}

Function ActivationFuction()
{
activate.function="unhighlight"
}

thanks

Hey guys, im in need of some more java script help (by the way thanks for all the other times you guys have helped me)

need to create a search box that whatever is in the search box will come up at the end of the URL

https://****/DirectConnect/Getpremie...Chassis|X#####

the last 6 charecters should be replaced with what ever number that in the search box so X##### should be replaced by 123456 for example or any other number

Hi
I want to create a javascript form validation but i cant with the following code.
What is wrong with the code? How to create a form validation without changing the following code-
Code:

<html>
<head><title>Javascript Validation</title>
<style>
  .lf{
position:relative;
left: 30px;
 float right;
 }
</style>
<script>
 function validate()
{
var c=document.getElementById("f1").value;
  if(c.length<1)
 alert(" Name Field can't be blank");

 if(c.length<=5)
 alert("Enter a valid name");

var a=parseInt(document.getElementById("f6").value);alert(a);
var b=document.getElementById("f7").value;alert(b);
var d=document.getElementById("f8").value;alert(d);
var lp=0;
  if((d%400)==0 && (d%100==0) || (d%4==0))
  lp=1;


  if((a==31) && ((b=="4") || (b=="6") || (b=="9") || (b=="11")) )  
    alert("Date out of Range"); 
 if((lp==0) && ((a=="29") || (b=="2")  )  
    alert("Date out of Range"); 


} 


</script>

</head>
<body>
 <div style="width:50%;background-color:lightgray;"> 
<fieldset>

 <legend  style="color:brown;font-weight:bold;"> SignUp Form</legend>
<table height=300>
 
<form>
   <tr><td> FirstName:&nbsp;&nbsp;<input type="text" name="fn" id="f1"  class="lf" size=50 /></td></tr>
  <tr><td> Address: &nbsp;&nbsp;&nbsp; <input type="text" name="adr" id="f2" class="lf" size=50 /></td></tr><br/><br/>
  <tr><td> Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="zp" id="f3" class="lf" size=20 /></td></tr><br/><br/>
  <tr><td> UserName:&nbsp;<input type="text" name="fn" id="f4" class="lf" size=30 /></td></tr>
  <tr><td> Password: &nbsp;&nbsp;<input type="password" name="fn" id="f5" class="lf" size=30 /></td></tr>
  <tr><td> DOB: <br /><br />Day:&nbsp;&nbsp;&nbsp;<input type="text" name="dy" id="f6" />
  		Month:&nbsp;<input type="text" name="m1" id="f7" />
  		Year:&nbsp;<input type="text" name="m2" id="f8" /></td></tr>
 <tr><td> Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="fn" id="f9"  size=50 /></td></tr>
  <tr><td><center>

  <input type="submit" value="submit" onClick="validate()" />
</center></td></tr> 
</form>

</table>


</fieldset></div></body>
</html>

I am terrible at this.
I want to get this functionality seen here
http://davidlynch.org/js/maphilight/docs/demo_usa.html

(image map areas highlighting on mouseover)

to work on this here
http://scratchitrich.com/test/

can anybody walk me through how to make this work? Thanks!

Code:

<script type="text/javascript">
<!--
NS4 = (document.layers) ? true : false;
function launchVsee2() {
    try {
        location='vsee:';
    } catch (err) {
        location='http://www.vsee.com';
        return true
    }
}
//-->
</script>

This app works as a URI and can be triggered to run in an address bar, when launched it will launch the app. Now, I can get this script to run in Firefox; it will test for the URI and if not avail it will redirect to the site website of that app. However when I run this in IE it will just load a page that says the site is in valid and not redirect. Anyone have any tips on how to get this working in IE. ALSO in addition this will not run in Safari either; same issue as IE. Thanks in advance

I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on.

Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below.
var bookingForm = document.forms['formName'];
var qty = bookingForm.fieldName +'i'.value;

with the 'i' been a generated numeric number by a for loop
when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on.

But when I use;
var qty = bookingForm.fieldName.value
I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName.

Any help will be very much appreciated.

Hello! I have the following code that I just can't seem to get to work.

Here are the issue that aren't working:

1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome)

2. When you click the items, nothing happens. (It used to work and would add the item to the top image)

If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS.


Code:

<div id="avatar_form" width="95" height="141">
</div>


<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>


<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>



<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>


<BR><BR><BR>

<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null

onload = layout

function layout()
{
 if(!document.getElementById('avatar_section')) return
 document.onkeydown = keyhit
 tabs()
 hide_radio_buttons(document.getElementById('avatar_stack'))
 StackImageHolders('avatar_stack');
 P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
 P.style.backgroundColor = layer_colours[on_top]
 P.style.zIndex = stack_height++
 LIs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<LIs.length; i++)
 {
  LIs[i].style.backgroundColor = inactive_tab_background_colour
  LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
  
 }
 LIs[on_top].style.backgroundColor = layer_colours[on_top]
 LIs[on_top].style.borderBottomColor = layer_colours[on_top]
 LIs[on_top].focus()
 IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
 for(i=0; i<IMGs.length; i++)
 {
  IMGs[i].className = 'black_border'
  IMGs[i].style.cursor = 'pointer'
  IMGs[i].onclick=function(){ChangeGarment(this)}
 }
 avatar_preview_and_hotkey_text()
 update_avatar(document.getElementById('avatar_stack').firstChild)
 /* I added the following two lines because Internet Explorer 
 wasn't updating the display properly after loading */
 document.getElementsByTagName('body')[0].style.width='95';
 document.getElementsByTagName('body')[0].style.width='95';
}

function keyhit(e)
{
 thisKey = e ? e.which : window.event.keyCode
 alt_key_down = e ? e.altKey : window.event.altKey
 ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
 shift_key_down = e ? e.shiftKey : window.event.shiftKey
 switch (thisKey) {
  case 37: key = 'LEFT'
   break
  case 39: key = 'RIGHT'
   break
  default: key = null
 }
 if(key && alt_key_down && ctrl_key_down)
 {
  IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
  for(i=0; i<IMGs.length; i++)
  {
   if(IMGs[i].className == 'red_border')
   {
    if((key == 'LEFT') && (i > 0))
    {
     i--
     ChangeGarment(IMGs[i])
     return
    }
    if((key == 'RIGHT') && (i < (IMGs.length - 1)))
    {
     i++
     ChangeGarment(IMGs[i])
     return
    }
   }
  }
 }
 else if(key && alt_key_down && shift_key_down)
 {
  LIs = document.getElementById('avatar_section').getElementsByTagName('li')
  if((key == 'LEFT') && (on_top > 0))
  {
   on_top--
   bring_to_the_top(LIs[on_top])
   return
  }
  if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
  {
   on_top++
   bring_to_the_top(LIs[on_top])
   return
  }
 }
}

function tabs()
{
 list = document.createElement('ul')
 for(i=0; i<avatar_layers.length; i++)
 {
  list_item = document.createElement('li')
  list_item.appendChild(document.createTextNode(avatar_layers[i]))
  list_item.onmouseover=function(){this.className='mouse'}
  list_item.onmouseout=function(){this.className=''}
  list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
  list_item.onclick=function(){
   bring_to_the_top(this)
  }
  list_item.onfocus=function(){
   bring_to_the_top(this)
  }
  list.appendChild(list_item)
  }
  document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}

function hide_radio_buttons(caller)
{
 INPUTs = caller.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   INPUTs[i].style.display = 'none';
  }
 }
}

function StackImageHolders(caller)
{
 Ps = document.getElementById(caller).getElementsByTagName('p')
 for(i=0; i<Ps.length; i++)
 {
  Ps[i].className = 'stack'
 }
}

function avatar_preview_and_hotkey_text()
{
 for(i=0; i<avatar_layers.length; i++)
 {
  preview = document.createElement('img')
  preview.id = avatar_layers[i]
  preview.className = 'preview'
  preview.width = '95px'
  preview.height = '141px'
  preview.alt = 'avatar preview image'
  document.getElementById('avatar_stack').appendChild(preview)
 }

 hotkey_text = document.createElement(' ')
 hotkey_text.className = 'hotkeys'
 hotkey_text.appendChild(document.createTextNode(''))
 document.getElementById('avatar_stack').appendChild(hotkey_text)
}

function update_avatar(caller)
{
 INPUTs = caller.parentNode.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   if(INPUTs[i].checked)
   {
    document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
    INPUTs[i].previousSibling.className = 'red_border'
   }
   else
   {
    INPUTs[i].previousSibling.className = 'black_border'
   }
  }
 }
}

function ChangeGarment(caller)
{
 inputs = caller.parentNode.getElementsByTagName('input')
 for(i=0;i<inputs.length;i++)
 {
  inputs[i].checked=false 
 }
 caller.nextSibling.checked=true
 update_avatar(caller)
}

function bring_to_the_top(caller)
{
 tabs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<tabs.length; i++)
 {
  tabs[i].style.backgroundColor = inactive_tab_background_colour
  tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
 }
 on_top = caller.tab_number
 caller.style.backgroundColor = layer_colours[caller.tab_number]
 caller.style.borderBottomColor = layer_colours[caller.tab_number]
 put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
 put_on_top.style.zIndex = stack_height++
 put_on_top.style.backgroundColor = layer_colours[caller.tab_number] 
}
</script>