Solved

Clearing a specific form field based on selection

Posted on 2010-09-16
2
204 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery element reference issue 2 35
How does this modal gets closed? 6 38
Difference between Highcharts and Mapbox 10 41
Why is my select returning NaN 19 24
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 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