Solved

Clearing a specific form field based on selection

Posted on 2010-09-16
2
203 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

How our DevOps Teams Maximize Uptime

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

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to dynamically set the form action using jQuery.

756 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