954,597 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

dynamically change fields

Hi!!
How can i change the field names dynamically?
eg i have a radio button depending on whose choice i have to
make another field mandatory,

if Yes.
Field one is mandatory
Else
Field one is optional.

For a mandatory field i have the validation funciton as well, that it cannot be empty...
any Ideas ?
thanks......

aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

Let you have a radiobuttonlist named rdoType.

if(document.getElementById('ctl00_allcontent_rdoType_0').checked)
{
if(document.getElementById('<%= TextBox1.ClientID %>').value.length>0)
return true;
else
return false;
}
else
{
if(document.getElementById('<%= TextBox2.ClientID %>').value.length>0)
return true;
else
return false;
}


Here validating TextBox1 or TextBox2 based on radio item seletion. So create a javascript function & use it.

mail2saion
Posting Whiz in Training
247 posts since Apr 2009
Reputation Points: 26
Solved Threads: 44
 

You can use the code provided by mail2saion to validate your field. And you can try this basic example to change the names in your field's:

<form name="frm">
<div>
<label>Default Text <input type="radio" value="" onclick="(  this.parentNode.childNodes[0].nodeValue = ( !frm.elements[1].checked ) ? 'Mandatory' : 'Optional' ); frm.elements[1].parentNode.childNodes[0].nodeValue = 'Optional';"></label> <label>Default Text <input type="radio" value="" onclick="(  this.parentNode.childNodes[0].nodeValue = ( !frm.elements[0].checked ) ? 'Mandatory' : 'Optional' ); frm.elements[0].parentNode.childNodes[0].nodeValue = 'Optional';"></label>
</div>
</form>

hope it gets what you need...

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 

Sorry, couldn't really understand that..
i am posting this, to make it more clear hopefully,

this is the validation code i am using :

if (form.ATTACH_APPROVAL_FROM_CUSTOMER_PATH.value == "")  
  {
   alert("PleaseAttatch Approval From Customer");
   form.ATTACH_APPROVAL_FROM_CUSTOMER_PATH.focus();
   return false;
 }


This is the field on who's value the next field depends :

<!-- Customer Sign Off -->
<tr>
<td height="25" bgColor=#eeeeee class='cellDesc' width="35%"> Customer Sign Off <font color='#ff0000'>*</font> </td>
<td height="25" bgColor=#eeeeee>
<input type="radio" name="CUSTOMER_SIGN_OFF"  value="Y" size=2 checked tabIndex="7">Yes &nbsp
<input type="radio" name="CUSTOMER_SIGN_OFF"  value="N" size=2 tabIndex="7">No
</td>
</tr>


now depending on the answer to above, this following field should be optional or mandatory
if its optional i do not need to call the validation function and also remove the star (*) from the field name, otherwise
i call the validation function and keep the (*) as well..

<!-- attatch approval customer -->
<tr> 
<td height="25" bgColor=#eeeeee class='cellDesc' width="35%"> Attach Approval From Customer <font color='#ff0000'>*</font></td>
<td bgColor=#eeeeee>
<input type=file name="ATTACH_APPROVAL_FROM_CUSTOMER_PATH" class='cellData' maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Upload Customer Approval" tabIndex=13><font size="2"> </font> 
</td>
 </tr>
aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

TRY WITH BELOW EXAMPLES:

if (document.forms[0].ATTACH_APPROVAL_FROM_CUSTOMER_PATH.value == "") {
		alert("Please select a file before submitting.");
		return false;
	}


OR

var objUpload=eval("document.getElementByName('ATTACH_APPROVAL_FROM_CUSTOMER_PATH')");
    var sUpload=objUpload.value;
    if(sUpload!="")
        {}
else return false;
mail2saion
Posting Whiz in Training
247 posts since Apr 2009
Reputation Points: 26
Solved Threads: 44
 

can you explain what is this doing please....

aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

Did your validation method works? if not then you can try with my above post.

AT FIRST TRY TO VALIDATE FILE INPUT FILE THEN GO FOR NEXT STEP.

mail2saion
Posting Whiz in Training
247 posts since Apr 2009
Reputation Points: 26
Solved Threads: 44
 

well i am done with the validation part
now what is remaining is
i need the name to be
attatch approval from customer *
is its mandatory

and
attatch approval from customer
(star removed)
if its optional

aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

Did you mean Since user select a file to upload & its now depends on CUSTOMER_SIGN_OFF value? Based on CUSTOMER_SIGN_OFF value you have to decide to start upload or not? R u trying to catch the radio button value?

mail2saion
Posting Whiz in Training
247 posts since Apr 2009
Reputation Points: 26
Solved Threads: 44
 

well what it need is
if value in radio button is Yes
then second fields is compulsory ( to indicate compulsory field i use a star after the name )
and if value in radio button is No
then second field is optional ( and i don't show a star after the field name )

<html>
<head>
<title>Change Font Color JavaScript</title>
<script type="text/javascript">
function changeColor()
{
  document.getElementById("color1").style.color="#FF0000";
  
}

function defaultColor()
{
  document.getElementById("color1").style.color="";

}
</script>
</head>

<body>
<span id="color1">Red color</span>
<input type="text" onchange="changeColor();")

 
<a href="javascript:defaultColor()">Change default Font Color JavaScript</a>
</body>
</html>


so i am making something like the program above...
it isn't working.... can you help me with this ?

aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

Based on your requirement here i developed an example which i want to share with you & hope it will help you. Here i take a textbox & a label. label shows does the textbox value is required or not based on radio button. Take a new page & Run the example:

<script type="text/javascript">
function changeColor()
{
  document.getElementById('<%= Label1.ClientID %>').style.color="#FF0000";
  if(document.getElementById('<%= TextBox3.ClientID %>').value=="")
    document.getElementById('<%= Label1.ClientID %>').innerText="Must Entry !";
}

function defaultColor()
{
  document.getElementById('<%= Label1.ClientID %>').style.color="";
  document.getElementById('<%= Label1.ClientID %>').innerText="Optional";
}
</script>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Optional"></asp:Label>
        
<input type="radio" name="CUSTOMER_SIGN_OFF"  value="Y" size=2 onclick="changeColor();">Yes &nbsp
<input type="radio" name="CUSTOMER_SIGN_OFF"  value="N" size=2 checked="checked" onclick="defaultColor();">No
mail2saion
Posting Whiz in Training
247 posts since Apr 2009
Reputation Points: 26
Solved Threads: 44
 
function defaultcolor()
  {
    document.getElementById("color1").style.color='#ff0000';
  }
function changecolor()
 {
       document.getElementById("color1").style.color='#eeeeee';
 }


Well , i used this and

<span id="color1" >*</span>

and called the functions on "onclick" event of radio buttons...

thanks a lot for your help...

aashishn86
Junior Poster
188 posts since Jun 2008
Reputation Points: 10
Solved Threads: 9
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You