Solved

Clearing a specific form field based on selection

Posted on 2010-09-16
2
200 Views
Last Modified: 2012-05-10
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
Comment
Question by:jscripter1138
2 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 33695725
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33695878
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question