JavaScript - Change A Radio Button Value From A Textbox Value

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

hi..
i have a jsp page in which there is a table. the number of rows is variable and depends on a pre-defined query.
every row has 2 editable textboxes which are initially disabled. i need to activate these textboxes according to the radio button which corresponds to the particular row in question.
can anybody pls tell me how to do that.
the code that i have written is as follows.if there is any tweaking to be done pls suggest the same.
code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.ArrayList" %>


<%@page import="DTO.UserGroupDTO"%>

<html>
<head>
<script type="text/javascript">}
funtion enable(){
document.getElementById("inp1").disabled=false;
document.getElementById("inp2").disabled=false;
}
function disable(){
document.getElementById("inp1").disabled=true;
document.getElementById("inp2").disabled=true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Update User Group Inquiry Results</title>
</head>
<body bgcolor="#aabbcc">
<center>
<h3>Update User Group Inquiry Results</h3><br><br>

<%ArrayList arrayList=(ArrayList)request.getAttribute("myList");
ArrayList list;
int size=arrayList.size();

Integer groupId=null;
String userGroupName=null;
String description=null;

%>
<form action="/test/BankServlet">
<table style="color: highlight" border="5">


<%
if(!(arrayList.isEmpty())){%>
<tr><th>Group ID</th><th>User Group Name</th><th>Description</th><th>Selection</th></tr>
<% for(int i=0;i<size;i++){
UserGroupDTO userGroupDTO=(UserGroupDTO)arrayList.get(i);

userGroupName=userGroupDTO.getUserGroupName();
groupId=userGroupDTO.getGroupId();
description=userGroupDTO.getDescription();
%>
<tr>
<td><%out.println(groupId); %></td>

<td><input id="inp1" disabled="disabled" value="<% out.println(userGroupName); %>"></td>

<td><input id="inp2" disabled="disabled" value="<%out.println(description); %>"> </td>

<td>
<input type="radio" name="radio2" value="<%=groupId %>" onclick="enable()">
</td>
</tr>
<%
}

}

else{
out.println("No match found");
}
%>




<tr>
<td><input type="hidden" name="strTitle" value="UpdateUserGroup"></td>
</tr>
<tr>
<td><input type="hidden" name="value" value="<%=groupId%>"></td>
</tr>
</table><br>
<input type="submit" value="Update User Group" style="background-color: gray">
</form>

<form action="/test/jsp/UserGroup.jsp">
<input type="submit" value="Go Back to User Group Operations Page" style="background-color: gray">
</form>


<br><br><br><br>


</center>
</body>
</html>

I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator

If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed.

I want to be able to do this without having to do a postback.

I already have the logic on the code behind and the enquiry object.

also I am fairly new to javascript so I have been using mostly jQuery as easier to implement

I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button.

(Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.)

The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas?

Code:

<script type="text/javascript">
function changerepeat(theval) {
	alert("changerepeat called");
	document.forms[0].elements[0].value = theval;
}
function tellme() {
	alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>

Thanks very much for reading!

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.