JavaScript - Possible To Make Drop Down Option For Button Link?

This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected.

What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected.

This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below:

Code:

             $(document).ready(function ()
        {
            var OptDrop = new Array();
    
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
            
            $("#optionDropId").change(function ()
            {
                var selectedValue = $(this).val();
                $("#numberDropId").html("");
                $.each(OptDrop[selectedValue], function (x, y)
                {
                    $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
                });
            }); 
    
            $("#optionDropId").change();
        });

My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work).

My Code: [click below][1]


[1]: http://jsfiddle.net/XZ7um/10/

If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done?

<select name="category">
<option value="">No Preference</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Pears">Pears</option>
<option value="Banana">Banana</option>
</select>

I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise?

Thanks in advance!

have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser

Fixed

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser.
Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/
implements a tooltip for multiple select drop down menu.Can you modify the code for single select

Dear All,

The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>

<script language="javascript">
function enable_text(status)
{
status=status;
var form = document.forms[0];
var rads = form.elements.radio1;
for (var i=0; i < rads.length; i++)
{
var color = rads[i].checked? "red" : "";
document.getElementById("check"+i).style.backgroundColor = color;
document.getElementById("check"+i).disabled = status;
}
}
</script>
<body onload=enable_text(false);>
<div>
<form name="form1" method="post" action="">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="PortletText1" nowrap><strong>ALL Data</strong></td>
<td class="PortletText1" nowrap><strong>YES</strong></td>
<td class="PortletText1" nowrap><strong>NO</strong></td>
<td class="PortletText1" nowrap><strong>N/A</strong></td>
<td class="PortletText1" nowrap><strong>Comments</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 1:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td>
<td class="PortletText1" nowrap>
<input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 2:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 3:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td>
</tr>
<tr>
</div>
</form>
</body>
</html>
</body>
</html>



thanks in advance.

Regards
sona

I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.

hi, on my website http://zend.warrencreative.com/gemini-group/index.html

I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?!


is there any other way?


Code:

<a class="newsletter thickbox" href="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent&amp;modal=true">Subscribe to eNewsletter</a>
		<div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p>&nbsp;</p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent1">&nbsp;&nbsp;<input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div>
		<div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div>

thanks in advance

Made a topic earlier about "auto klick" for swf button but i got response ,its not posible todo that.. so i have another question!!

Is it posible to make the swf button invisible but still clickable and then have a background so it looks like its another button?
or is there any other way to edit design for the button!
OBS! i only have the swf not the flv file!

Code:

<html class="no-js" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->
<head>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<script src="http://www.google.com/jsapi?key=ABQIAAAAAJ5I0tmbz-jcO3Ja4fwvEBTb9u7IFi28hLXI-qXjI6UBBcarTBQ49g-wp7Wxnow1_w9F-7_GcOOnyg"></script>
    <script>
    google.load("jquery", "1.7.0");
    google.load("swfobject", "2.2");
    </script>
</head>

 
<body>
  <div id="container">
    <div id="main" role="main">
 
		<div id="data" class="channel">
		
			<div id="openbutton">
			<div id="flashcontent1";></div>


			
	<!-- DR1 Start --><script>
    		params = {};
    		params.text = 'DR1';
   			 params.action = "channel";
   			 params.value = "40";  
    		swfobject.embedSWF('content/linkbutton.swf', 'flashcontent1', '145', '30', '9.0.115', 'content/expressinstall.swf', params, {allowFullscreen:'true', wmode: 'transparent' ,bgcolor: '#FFFFFF', menu: 'false'}, {id: 'flashcontent1'});  
   		 	
			<!-- DR1 Ends --></script>



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

I enclose code that should work.
What to change that this code will work.
I used prototype.js

Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not.

I know how to make the button, that is simple.

Sorry if this is actually easy, I am just learning how to script.

Here's the code. what am I missing to make this work? Thank you in advanced!


@if (Model.Layer.Id > 0){
<div style="float: left; padding-left: 14px;">
@using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){
<input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" />
}
</div>
}

<div class="clear"></div>

<div id="dialogDeleteBox" title="Delete Confirm" style="display: none">
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 40px 0;"></span>
<div id="confirmDeleteLayer">
<div id="confirmDeleteLayerMessage">
<p>
Are you sure you want to delete this group?
</p>
</div>
</div>
</div>

I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it.

Unless I am doing something wrong?

http://www.meta.projectmio.com/pop.html


But how do I modify the code to do this, I'm hopeless?

Thanks.

Hi!

Trying to get a delete confirm dialog box to open when you click on the button.

Here's what I have in the body...

@if (Model.Layer.Id > 0){
<div style="float: left; padding-left: 14px;">
@using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){
<input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" />
}
</div>
}


I can't seem to figure out the script to make this work. Can anyone help?

What I had was

<script type="text/javascript">
function confirmDeleteSelected(id) {

jQuery("#dialog-confirmDelete").dialog({
closeOnEscape: false,
resizable: false,
width: 250,
modal: false,
zIndex: 5000,
buttons: {
"Yes": function () {
doDeleteSelected(id);
jQuery(this).dialog("close");
jQuery(this).dialog("destroy");
},
"No": function () {
jQuery(this).dialog("close");
jQuery(this).dialog("destroy");
}
} //end Buttons
});
}

</script>

Thanks

Phil

how do i make a html button stay down when pressed, until another button within a specified group of buttons is pressed, at which point it is released and the other button stays pressed?