• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 222
  • Last Modified:

Clearing a specific form field based on selection

I need to be able to clear a form field based on drop down menu selections.

Currently on the form attached. If the user selects the 5th option "NMR" . 2 fields apear ("NMR Date" and "NMR Reason"). If the user fills in those 2 fields with data then decides to go with another option. The fields disappear but retain the data and pass it on through the submission.

The desired result would be to have NMR Dat and NMR Reason reset to clear if the users decides to go with another option.

Any assitance is much appreciated.

Thank You
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script type="text/javascript">
function showInfo(){
	
	var elem = document.getElementById('5');
	if(document.FrontPage_Form1._fid_13.value == "5"){
		elem.style.display="block";
	}
	else{
		elem.style.display="none";
	}

}
</script>

</head>

<body>
<form name="FrontPage_Form1" onsubmit="return Survey_Form_Validator(this)" method="POST" ACTION="https://quickbase.xxxxxxx.com/db/becu3tn9w?act=API_AddRecord" onsubmit="return FrontPage_Form1_Validator(this)" onSubmit="return vaildateForm()" language="JavaScript" style="">

<TD width=293 height="1%" align="right">
      <font face="Arial" size="2"><FONT color=#ff0000>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		*</FONT>
</font><FONT 
      color=#000080 face="Arial" size="2"><B>Maintenance Type:</B></FONT></TD> 
		<td><FONT color=#ff0000 face="Arial" size="2"><select name="_fid_13" onchange="showInfo();" size="1" tabindex="7">
<option value="">Select</option>
<OPTION value=1>Add</OPTION> 
<OPTION value=2>Change</OPTION> 
<OPTION value=3>Term</OPTION> 
<OPTION value=4>SDA Outstanding</OPTION>
<option value=5>NMR</option>
<OPTION value=6>Automated</OPTION>
</select></font></td>
	</tr>
	<tr>
    <TD width=293 height="2%" align="right" valign="top">
      <br>
</TD> 
		<td><font face="Arial" size="2">
		<div id="5" style="display:none;">
			<FONT color=#ff0000>*</FONT><FONT 
      color=#000080 face="Arial" size="2"><B>NMR Date </B></FONT>
			<FONT color=#ff0000>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i>
			<font color="#FF0000">The NMR Date&nbsp; is required when Maint Type 
			of NMR is selected</font></i></span><FONT color=#000080><B>
</B></FONT>

	</font><FONT 
      color=#000080 face="Arial" size="2"><B><br>
			</B></FONT><font face="Arial">
<input type="text" name="_fid_11" value="" size="10" onfocus="if(this.value == '5'){this.value=''}"  tabindex="10" readonly/><script language="JavaScript">


	</script><br>
</font><FONT color=#ff0000>*</FONT><FONT 
      color=#000080 face="Arial" size="2"><B>NMR Reason</B></FONT><font color="#000080"><b>
			</b></font>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i><font color="#FF0000">The NMR Reason is required when Maint Type of NMR is selected</font></i></span><FONT color=#000080><B><br>
    
<select name=_fid_12 size="1" onchange="show_other(this.value)">
	<OPTION selected></OPTION> 
	<option value="31">Already Completed Request</option>
	<option value="15">Dental Provider - Not maintained in this office</option>
	<option value="14">Duplicate Request</option>
	<option value="36">Invalid Smart Front End Submission</option>
	<option value="33">LLP - Not maintained in this office</option>
	<option value="30">No Response from Market and/or Requestor</option>
	<option value="28">Not valid per provider's offc/market</option>
	<option value="32">Rescinded Request from Requestor</option>
	<option value="35">Review Only</option>
	<option value="27">Sent for Vendor Verification</option>
	<option value="34">SIU - Not maintained in this office</option>
</SELECT></B></FONT><font face="Arial"><br>
		</div></td>


</body>

</html>

Open in new window

0
jscripter1138
Asked:
jscripter1138
1 Solution
 
kadabaCommented:
this way..

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script type="text/javascript">
function showInfo(){
	
	var elem = document.getElementById('5');
	if(document.FrontPage_Form1._fid_13.value == "5"){
		
		elem.style.display="block";
	}
	else{
		elem.style.display="none";
	}
	resetValues();

}

function resetValues(){
	document.getElementById("_fid_11").value="";
	document.getElementById("_fid_12").options[0].selected = true;
}
</script>

</head>

<body>
<form name="FrontPage_Form1" onsubmit="return Survey_Form_Validator(this)" method="POST" ACTION="https://quickbase.xxxxxxx.com/db/becu3tn9w?act=API_AddRecord" onsubmit="return FrontPage_Form1_Validator(this)" onSubmit="return vaildateForm()" language="JavaScript" style="">

<TD width=293 height="1%" align="right">
      <font face="Arial" size="2"><FONT color=#ff0000>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		*</FONT>
</font><FONT 
      color=#000080 face="Arial" size="2"><B>Maintenance Type:</B></FONT></TD> 
		<td><FONT color=#ff0000 face="Arial" size="2"><select name="_fid_13" onchange="showInfo();" size="1" tabindex="7">
<option value="">Select</option>
<OPTION value=1>Add</OPTION> 
<OPTION value=2>Change</OPTION> 
<OPTION value=3>Term</OPTION> 
<OPTION value=4>SDA Outstanding</OPTION>
<option value=5>NMR</option>
<OPTION value=6>Automated</OPTION>
</select></font></td>
	</tr>
	<tr>
    <TD width=293 height="2%" align="right" valign="top">
      <br>
</TD> 
		<td><font face="Arial" size="2">
		<div id="5" style="display:none;">
			<FONT color=#ff0000>*</FONT><FONT 
      color=#000080 face="Arial" size="2"><B>NMR Date </B></FONT>
			<FONT color=#ff0000>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i>
			<font color="#FF0000">The NMR Date&nbsp; is required when Maint Type 
			of NMR is selected</font></i></span><FONT color=#000080><B>
</B></FONT>

	</font><FONT 
      color=#000080 face="Arial" size="2"><B><br>
			</B></FONT><font face="Arial">
<input type="text" id="_fid_11" name="_fid_11" value="" size="10" onfocus="if(this.value == '5'){this.value=''}"  tabindex="10" readonly/><script language="JavaScript">


	</script><br>
</font><FONT color=#ff0000>*</FONT><FONT 
      color=#000080 face="Arial" size="2"><B>NMR Reason</B></FONT><font color="#000080"><b>
			</b></font>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i><font color="#FF0000">The NMR Reason is required when Maint Type of NMR is selected</font></i></span><FONT color=#000080><B><br>
    
<select id="_fid_12" name=_fid_12 size="1" onchange="show_other(this.value)">
	<OPTION selected></OPTION> 
	<option value="31">Already Completed Request</option>
	<option value="15">Dental Provider - Not maintained in this office</option>
	<option value="14">Duplicate Request</option>
	<option value="36">Invalid Smart Front End Submission</option>
	<option value="33">LLP - Not maintained in this office</option>
	<option value="30">No Response from Market and/or Requestor</option>
	<option value="28">Not valid per provider's offc/market</option>
	<option value="32">Rescinded Request from Requestor</option>
	<option value="35">Review Only</option>
	<option value="27">Sent for Vendor Verification</option>
	<option value="34">SIU - Not maintained in this office</option>
</SELECT></B></FONT><font face="Arial"><br>
		</div></td>


</body>

</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Set id for element with name _fid_11 and _fid_12 and use :


function showInfo(){
      
      var elem = document.getElementById('5');
      if(document.FrontPage_Form1._fid_13.value == "5"){
            elem.style.display="block";
           document.getElementById("_fid_11").disabled = false;
            document.getElementById("_fid_12").disabled = false;

      }
      else{
           elem.style.display="none";
            document.getElementById("_fid_11").disabled = true;
            document.getElementById("_fid_12").disabled = true;

      }

}

test page :


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script type="text/javascript">
function showInfo(){
	
	var elem = document.getElementById('5');
	if(document.FrontPage_Form1._fid_13.value == "5"){
		elem.style.display="block";
		document.getElementById("_fid_11").disabled = false;
		document.getElementById("_fid_12").disabled = false;
	}
	else{
		elem.style.display="none";
		document.getElementById("_fid_11").disabled = true;
		document.getElementById("_fid_12").disabled = true;
	}

}
</script>

</head>

<body>
<form name="FrontPage_Form1" onsubmit="return Survey_Form_Validator(this)&&FrontPage_Form1_Validator(this)&&vaildateForm()" method="POST" ACTION="https://quickbase.xxxxxxx.com/db/becu3tn9w?act=API_AddRecord" >
<table><tr>
<TD width=293 height="1%" align="right">
      <font face="Arial" size="2"><FONT color=#ff0000>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		*</FONT>
</font><FONT 
      color=#000080 face="Arial" size="2"><B>Maintenance Type:</B></FONT></TD> 
		<td><FONT color=#ff0000 face="Arial" size="2"><select name="_fid_13" onChange="showInfo();" size="1" tabindex="7">
<option value="">Select</option>
<OPTION value=1>Add</OPTION> 
<OPTION value=2>Change</OPTION> 
<OPTION value=3>Term</OPTION> 
<OPTION value=4>SDA Outstanding</OPTION>
<option value=5>NMR</option>
<OPTION value=6>Automated</OPTION>
</select></font></td>
	</tr>
	<tr>
    <TD width=293 height="2%" align="right" valign="top">
      <br>
</TD> 
		<td><font face="Arial" size="2">
		<div id="5" style="display:none;">
			<FONT color=#ff0000>*</FONT><FONT color=#000080 face="Arial" size="2"><B>NMR Date </B></FONT>
			<FONT color=#ff0000>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i>
			<font color="#FF0000">The NMR Date&nbsp; is required when Maint Type of NMR is selected</font></i></span><FONT color=#000080><B>
</B></FONT>

	</font><FONT color=#000080 face="Arial" size="2"><B><br>
			</B></FONT><font face="Arial">
<input type="text" id="_fid_11" name="_fid_11" value="" size="10" onFocus="if(this.value == '5'){this.value=''}"  tabindex="10" readonly /><script language="JavaScript">

	</script><br>
</font><FONT color=#ff0000>*</FONT><FONT 
      color=#000080 face="Arial" size="2"><B>NMR Reason</B></FONT><font color="#000080"><b>
			</b></font>
			<span style="font-size: 10.0pt; font-family: Arial; font-weight:700">
			<i><font color="#FF0000">The NMR Reason is required when Maint Type of NMR is selected</font></i></span><FONT color=#000080><B><br>
    
<select id="_fid_12" name="_fid_12"size="1" onChange="show_other(this.value)">
	<OPTION selected></OPTION> 
	<option value="31">Already Completed Request</option>
	<option value="15">Dental Provider - Not maintained in this office</option>
	<option value="14">Duplicate Request</option>
	<option value="36">Invalid Smart Front End Submission</option>
	<option value="33">LLP - Not maintained in this office</option>
	<option value="30">No Response from Market and/or Requestor</option>
	<option value="28">Not valid per provider's offc/market</option>
	<option value="32">Rescinded Request from Requestor</option>
	<option value="35">Review Only</option>
	<option value="27">Sent for Vendor Verification</option>
	<option value="34">SIU - Not maintained in this office</option>
</SELECT></B></FONT><font face="Arial"></font>
<br>
		</div></td>
</tr></table>
</body>

</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now