Textbox value change to its own value if radio button deselect

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

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/>

Any suggestions guys? :(

where are the elements with an ID of amount1, amount2, amount3 and amount4 (as referenced in the addit functions)?

It might clarify your thinking (and lead to more suggestions here) if you set up a simple page with the html and values hardcoded, not echoed in from database. I think what you want is quite simple, but I am having trouble understanding which field should interact with which other.

or maybe that's just me...

where are the elements with an ID of amount1, amount2, amount3 and amount4 (as referenced in the addit functions)?

Sorry My bad, I think it was my old code. (new ID are set to amount)



It might clarify your thinking (and lead to more suggestions here) if you set up a simple page with the html and values hardcoded, not echoed in from database. I think what you want is quite simple, but I am having trouble understanding which field should interact with which other.

or maybe that's just me...

No, you're cool, you absolutely right i kinda have to simplify that code and what I want is pretty simple but since I cant use my brain more than 10% at a time so I might be look like a dumb :D to not have the ability to overcome this simple issue.


I upload two different page:

One contains the problem that I talked about (Here is the link) (http://ivu.fuiw.com/test/page.html). please see the page source if you want to check out the code.

The other is with onblur which is not solving my issue since if I click somewhere rather than the radios it still change the value to first one: (Here is the example link) (http://ivu.fuiw.com/test/onblur.html) please see the page source if you want to check out the code.

have a look to see if this helps. It relies on a bit of trickery (but only a little bit...), mostly to do with values and IDs matching up - I gotta admit I still don't really understand what the idea is, but this may be a start, anyway...


<!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>Untitled Document</title>
<style type="text/css">
body {
background-color: #E4E4E4;
}
</style>
</head>

<body>
<script type="text/javascript">
var oldval=false;
function firstaddit(theval){
if(oldval){document.getElementById("amount"+oldval).value=oldval }
if(document.getElementById("Rate"+theval).value==theval) {
document.getElementById("amount"+theval).value="Changed, (now if you deselect the FIRST radio button you see still see this sentence!)"
oldval=theval;
}
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
<form id="form1" name="form1" method="post" >
Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit(this.value)">
<br/><br/>
Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="firstaddit(this.value)">
<br/><br/>
Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="firstaddit(this.value)">
<br/><br/>
Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="firstaddit(this.value)">
<br/><br/>
<input name="Rate1" type="text" id="amount1" value="1" size="105">
<br/><br/>
<input name="Rate2" type="text" id="amount2" value="2" size="105">
<br/><br/>
<input name="Rate3" type="text" id="amount3" value="3" size="105">
<br/><br/>
<input name="Rate4" type="text" id="amount4" value="4" size="105">
<br/><br/>
</form>
</td>
</tr>
</table>
</body>
</html>

have a look to see if this helps. It relies on a bit of trickery (but only a little bit...), mostly to do with values and IDs matching up - I gotta admit I still don't really understand what the idea is, but this may be a start, anyway...


<!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>Untitled Document</title>
<style type="text/css">
body {
background-color: #E4E4E4;
}
</style>
</head>

<body>
<script type="text/javascript">
var oldval=false;
function firstaddit(theval){
if(oldval){document.getElementById("amount"+oldval).value=oldval }
if(document.getElementById("Rate"+theval).value==theval) {
document.getElementById("amount"+theval).value="Changed, (now if you deselect the FIRST radio button you see still see this sentence!)"
oldval=theval;
}
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
<form id="form1" name="form1" method="post" >
Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit(this.value)">
<br/><br/>
Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="firstaddit(this.value)">
<br/><br/>
Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="firstaddit(this.value)">
<br/><br/>
Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="firstaddit(this.value)">
<br/><br/>
<input name="Rate1" type="text" id="amount1" value="1" size="105">
<br/><br/>
<input name="Rate2" type="text" id="amount2" value="2" size="105">
<br/><br/>
<input name="Rate3" type="text" id="amount3" value="3" size="105">
<br/><br/>
<input name="Rate4" type="text" id="amount4" value="4" size="105">
<br/><br/>
</form>
</td>
</tr>
</table>
</body>
</html>



Wow, its exactly what I wanted :) thanks. but I still have a little issue with your code and that is its value, I mean you solved the change value to default value just great but now all four textboxes will change to just one value (I specified it in your code in green) I mean what I wanted was 4 different value for each of my textboxes but know when I select each radio button it will assign the same value to its matched textbox.

mmm... and how do you define the new values to go in the text boxes? here's one approach...


<!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>Untitled Document</title>
<style type="text/css">
body {
background-color: #E4E4E4;
}
</style>
</head>

<body>
<script type="text/javascript">
var oldval=false;
var oldel;
var pos1 =238;
var pos2= 777;
var pos3= 864;
var pos4= 923;

function firstaddit(theval){
if(oldval){oldel.value=oldval }
oldval=document.getElementById("amount"+theval).value;
oldel=document.getElementById("amount"+theval);
if(document.getElementById("Rate"+theval).value==theval) {
document.getElementById("amount"+theval).value=window["pos"+theval];
}
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
<form id="form1" name="form1" method="post" >
Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit(this.value)">
<br/><br/>
Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="firstaddit(this.value)">
<br/><br/>
Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="firstaddit(this.value)">
<br/><br/>
Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="firstaddit(this.value)">
<br/><br/>
<input name="Rate1" type="text" id="amount1" value="10" size="105">
<br/><br/>
<input name="Rate2" type="text" id="amount2" value="20" size="105">
<br/><br/>
<input name="Rate3" type="text" id="amount3" value="30" size="105">
<br/><br/>
<input name="Rate4" type="text" id="amount4" value="40" size="105">
<br/><br/>
</form>
</td>
</tr>
</table>
</body>
</html>

mmm... and how do you define the new values to go in the text boxes? here's one approach...


<!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>Untitled Document</title>
<style type="text/css">
body {
background-color: #E4E4E4;
}
</style>
</head>

<body>
<script type="text/javascript">
var oldval=false;
var oldel;
var pos1 =238;
var pos2= 777;
var pos3= 864;
var pos4= 923;

function firstaddit(theval){
if(oldval){oldel.value=oldval }
oldval=document.getElementById("amount"+theval).value;
oldel=document.getElementById("amount"+theval);
if(document.getElementById("Rate"+theval).value==theval) {
document.getElementById("amount"+theval).value=window["pos"+theval];
}
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
<form id="form1" name="form1" method="post" >
Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit(this.value)">
<br/><br/>
Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="firstaddit(this.value)">
<br/><br/>
Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="firstaddit(this.value)">
<br/><br/>
Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="firstaddit(this.value)">
<br/><br/>
<input name="Rate1" type="text" id="amount1" value="10" size="105">
<br/><br/>
<input name="Rate2" type="text" id="amount2" value="20" size="105">
<br/><br/>
<input name="Rate3" type="text" id="amount3" value="30" size="105">
<br/><br/>
<input name="Rate4" type="text" id="amount4" value="40" size="105">
<br/><br/>
</form>
</td>
</tr>
</table>
</body>
</html>




Oh man, that is cool, just fixed everything with this piece of masterpiece mate :) I deeply appreciate your help (you just become my personal hero of the week):thumbsup: