JavaScript - Radio Button Disable Option With Style Change Issues

Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!

I want to change radio button values dependent on the selected item in a drop down list.

The radio buttons have default values but I need them to be changed when the selection has been made in the drop down list and before the submit button has been pressed so the changed values will be written to the database.


Example :


Drop down item : National
Radio 1 value : Director
Radio 2 value : National PA

Drop down item : Regional
Radio 1 value : Regional Manager
Radio 2 value : Regional PA

Drop down item : Local
Radio 1 value : Store Manager
Radio 2 value : Assistant Store Manager

Any help will be appreciated.

Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ).

I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value.

let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well)

This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work!





<script type="text/javascript">
function firstaddit(){
if(document.getElementById("Rate1").value=="1")
{
document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>"
}}
</script>

<script type="text/javascript">
function secondaddit(){
if(document.getElementById("Rate2").value=="2")
{
document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>"
}}
</script>

<script type="text/javascript">
function thirdaddit(){
if(document.getElementById("Rate3").value=="3")
{
document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>"
}}
</script>

<script type="text/javascript">
function fourthaddit(){
if(document.getElementById("Rate4").value=="4")
{
document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>"
}}

</script>



<script type="text/javascript">
function ReturnFirstAddit(){
if(document.getElementById("Rate1").value=="1")
{
document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnSecondAddit(){
if(document.getElementById("Rate2").value=="2")
{
document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnThirdAddit(){
if(document.getElementById("Rate3").value=="3")
{
document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>"
}}

</script>

<script type="text/javascript">
function ReturnFourthAddit(){
if(document.getElementById("Rate4").value=="4")
{
document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>"
}}

</script>




Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()">
<br/><br/>

Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()">
<br/><br/>

Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()">
<br/><br/>

Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()">
<br/><br/>





<%=(rs_vote.Fields.Item("Choice1").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice2").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice3").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()">
<br/><br/>

<%=(rs_vote.Fields.Item("Choice4").Value)%>&nbsp;&nbsp;&nbsp;<input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()">
<br/><br/>

Pleas how can i change div bg color with active chcecked radio button

<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div>

- if checked, change color from #fff to #ccc


For checkboxes i find this
<span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span>

Thnx for help in advance

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&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;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 two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user.
If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed.
How can i achieve this using javascript. Please somebody help me.

Hello everyone

Background
I have an electronics site on which I have a code generator.
Im an stuck on how to acheive something.

I will simplify what I want to do, so I can then adapt it to my code.
I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons.

Example (radio buttons & short paragraph):

(Radio Button) Apples (checked)
(Radio Button) Bananas
"Welcome to jakes fruit shop.
You have selected apples today"
(apples being the word that would change if the banana radio button is checked)

Here is the code generator if your interested.
http://www.jakeselectronics.net/conf...erator877A.php
What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing.

And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do.

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

Hi..

I have 2 groups of radio buttons..

I can manage to make one set be disabled via a selection.. but i can only get this right with the VALUE...

Is it possible to use the radio id to do the same??

Just use the link below for they jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js"></script>


</head>
<body>

<br />
<br />
<div>    1 - <input type="radio" id="1" value="11" /> </div>
<div>    2 - <input type="radio" id="2" value="22"/> </div>
<div>    3 - <input type="radio" id="3" value="33"/> </div>
<br />
<br />
<div>    1 - <input type="radio" id="1" value="11" /> </div>
<div>    2 - <input type="radio" id="2" value="22" /> </div>
<div>    3 - <input type="radio" id="3" value="33" /> </div>

  <script>
$("input:radio").click(function() {
    var val = $(this).val();
    $(this).siblings("input:radio").attr("disabled","disabled");
    $("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
    </script>
    
</body>
</html>

hi

i have following code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id = "time"></div>

<script type = "text/javascript">
}

function display(secs) {
if (secs <= 0) { 
alert("Your time is up!");
return;
}
secs--;
document.getElementById("time").innerHTML = "You have " +
Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
setTimeout("display("+secs+")",1000);
}

display(51); // 300 seconds = 5 minutes

</script>
<p>
<form name="form1" method="post" action="quiz2action.php">
  <?php
$db = mysql_connect("localhost");
mysql_select_db("videoshop", $db);

//$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die();
$queryquestions = "SELECT * FROM quiz" or die(); 
$resultquestions = mysql_query($queryquestions) or die();

while($rowquestions = mysql_fetch_array($resultquestions))
{
   $questionid = $rowquestions['id'];
   $question = $rowquestions['question'];
   $answerone = $rowquestions['option1'];
   $answertwo = $rowquestions['option2'];
   $answerthree = $rowquestions['option3'];
   $answerfour = $rowquestions['option4'];
   echo "   
    <b>Question $questionid: $question</b><br>
   <input type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br>
   <input type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br>
   <input type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br>
   <input type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>";
   
   echo "<br><br>";
}

?>
</p>
  <label>
  <input type="submit" name="Submit" id="button" value="Submit">
  </label>
</form>
<p>&nbsp;</p>
</body>
</html>

above is the code of quiz which is created in php. that quiz is fine. the problem in in js script above the php script.
what i want is when the time of 5 mins is completed then i want to disable all those radio buttons except submit button.

how can this be done?

Is there a way to remove (not disable and not delete) an option in a "select" list, and restore it later when needed?

I have a form with many huge lists ("select" with many "options") that depend on eachother. I am dynamically updating the form through server, and wish to update the list values by sending a mask string. This way I could remove and restore the options without the need to pass the whole list again.

I tried many ways but none work:
* option.diabled="disabled" is not good because it is still shown
* option.style.visibility='hidden' is not good because it is still taking a row
* option=null is not good because I will not be able to restore it

I need a method similar to the following one for remove/add fields in a form:
remove:
<field>.style.display='none';
resto
<field>.style.display=block';


Thank you!!!

Hi,
Well I wanted to ask that how to disable the function of hide button in meebo bar, its that small arrow like button on the right side, which is when clicked hides meebo bar, I want to disable it, so that even if it is clicked it doesn't hide the bar.
To see the bar you can visit http://www.meebo.com/websites

I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript.

When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page.

I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good.

Thank

Hi I have the following code... Code:

<!doctype html>
<html>
<head>
<title>Loops</title>
</head>

<body>
<form id = "frmOne">
<table border="1" >
	<p>Items Remaining: <a id="clicks">5</a></p>
	<tr>
	<th> Number One:</th>
	<th> Number Two:</th>
	</tr>

	<tr>
	<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
	<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
	</tr>

	<tr>
	<td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td>
	</tr>

	<tr>
	<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
	</tr>
</table>
</form>

<script>
var Totals = [ ];
var clicks = 5;

function calculate() {
        var form = document.getElementById("frmOne"); 
	var A = form.txtFirstNumber.value;
	var B = form.txtSecondNumber.value;

	Totals.push( A + " + " + B + " = " + (1*A+1*B) );
        
        form.totals.value = Totals.join("\n");

	form.txtFirstNumber.value = form.txtSecondNumber.value = "";

	clicks -= 1;
        document.getElementById("clicks").innerHTML = clicks;

}
</script>
</body>
</html>

I want to add in an if statement that checks to see if the number of items remaining is 0. If it is 0, I want it to say finished and the button be disabled / disappear.

Can anyone help?

TIA