Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 75 Time: 12:05 - Nov 24, 2008

san

Need help with enabling/disabling only few text fields in the form

I have looked into the older post http://quomon.com/ViewQuestion.aspx?ques...

I tried to apply the same script and it worked partially,

The problem is I want to enable/diable only few fields in my form. The problem I am having is that when I select No, all the fields are getting disabled. I tried tweaking this code a bit, but i coudlnt succeed. Is there any way i can do this?

Thanks

<script Language="JavaScript">
function Form1_Validator(theForm)
{

var alertsay = ""; // define for long lines
// alertsay is not necessary for your code,
// but I need to break my lines in multiple lines
// so the code won't extend off the edge of the page

// check if no drop down has been selected
if (theForm.Dept.selectedIndex < 0)
{
alert("Please select one of the \"Department\" options.");
theForm.Dept.focus();
return (false);
}

// check if the first drop down is selected, if so, invalid selection
if (theForm.Dept.selectedIndex == 0)
{
alert("The first \"Department\" option is not a valid selection.");
theForm.Dept.focus();
return (false);
}
// check to see if the field is blank
if (theForm.NH.value == "")
{
alert("You must eter an NH.");
theForm.NH.focus();
return (false);
}

// require at least 3 characters be entered
if (theForm.NH.value.length < 3)
{
alert("Please enter at least 3 characters in the \"NH\" field.");
theForm.NH.focus();
return (false);
}

// allow ONLY alphanumeric keys, no symbols or punctuation
// this can be altered for any "checkOK" string you desire
var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var checkStr = theForm.NH.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only letter and numeric characters in the \"NH\" field.");
theForm.NH.focus();
return (false);
}
alertsay = "All Validations have succeeded. "
alertsay = alertsay + "This is just a test page. There is no submission page."
alert(alertsay);
return (false);

// replace the above with return(true); if you have a valid form to submit to
}
<script type="text/javascript">

function disable_controls( state) {
var frm = document.forms[0] ;
var len = frm.elements.length ;
var cnt = 0 ;
for ( var i=0; i < len; i++) {
var elem = frm.elements[i] ;
if (elem.type != "hidden") {
if (elem.type != "radio") {
elem.disabled = state ;
}
}
}
}
</script>

<form action="new5"
method="POST" onsubmit="return Form1_Validator(this)" name="Form1" enctype="application/x-www-form-urlencoded">

<div align="center">
<table class="Wide" border="1">
<tr>
<td colspan="2"><div align="right"> <b>Required</b> </div></td>
</tr>
<tr class="Head1">
<td colspan="2"> SubmitANewTicket </td>
</tr>
<tr>

<td width="147" valign="top"><div align="center">
<table class="narrow" border="0">
<tr>
<td align="center" colspan="2"> ContactInformation</b> </td>
</tr>
<tr>
<td> UserName</b> </td>
<td><input type="text" name="uemail" size="20" value="uemail ">
</td>
</tr>
<tr>
<td> EMail</b> </td>
<td><input type="text" name="uemail" size="20" value="uemail ">
</td>
</tr>
<tr>
<td><b>Location</b> </td>
<td><input type="text" name="ulocation" size="20" value="location1">
</td>
</tr>
<tr>
<td><b>Phone:</b> </td>
<td><input type="text" name="uphone" size="20" value="phone">
</td>
</tr>
</table>
</div></td>
<td width="461" valign="top">

<div align="center">

<table width="411" height="174" border="0" class="narrow">
<tr>
<td colspan="2"><div align="center"> <b>ProblemClassification</b> </div></td>
</tr>
<tr>

<td width="207"><b>Department:</b> </td>
<td width="144">
<select name="Dept" size="1">
<option>Select a Department</option>
<option value="T2">T2</option>
<option value="T16">T16</option>
</select>
</td>

</tr>

<tr>

<td>

<b>
NH:
</b>
</td>

<td>

<input type="text" size="20" name="NH"><em>*</em>

</td>

</tr>

<tr>

<td>

<b>
SSN
</b>

</td>

<td>

<input type="text" name="SSN" size="20">
<em>
*
</em>

</td>

</tr>

<tr>

<td colspan="2">

<div align="center">

<b>
IsRepresentativePayeeInvolved
</b>

<em>
*
</em>

</div>

</td>

</tr>

<tr>

<td>


<input type="radio" value="Yes" name="RepPayee" onclick="disable_controls( false)">Yes
<input type="radio" value="No" name="RepPayee" onclick="disable_controls( true)">No

</td>


</tr>

</table>
</div>

</td>

</tr>

<tr class="Head2">
<td colspan="2">Attachments </td>
</tr>
<tr class="Body1">
<tr>
<td height="55" colspan="2">
<a href="#" id="imageUpload"><input type="file" name="imageName_1" id="1" /></a>

<br>
</td>
</tr>
<tr class="Head2">
<td colspan="2">Representaivepayeeinvolved </td>
</tr>
<tr class="Body1">
<tr>
<td><b>Reppayee</b> </td>
<td><input name="Rep" disabled size="10" value="Enter " type="text">
<em>*</em> </td>
</tr>
<tr>
<td><b>ZipCode</b> </td>
<td><input name="ZipCode" disabled size="10" value="ini ZipCode" type="text">
<em>*</em> </td>
</tr>
<tr>
<td><b>orgainizationname</b> </td>
<td><input name="Orgname" disabled size="50" value="Enter Organization Name" type="text">
<em>*</em><br />
</td>
</tr>
</tr>
</table>
</form>
</body>
</html>

Categories:

JavaScript

Answer Discussion

Tutorials

nidhi

Date:: Nov 24, 2008

Time:: 16:48

Do you see the function called disable_controls?

i.e. function disable_controls( state) {

well this goes thru and does the disabling/enabling. If you wanted specific fields only, you can specify the name

eg frm.MyFieldName.disabled =

MyFieldName is what you have defined in your form, where each <input has a name, thats the fieldname

so lets create a new method just to show you

function disable_my_controls( state) {
var frm = document.forms[0] ;
frm.username.disabled = state
frm.uemail.disabled = state
frm.ulocation.disabled = state
}

Now you call this instead of disable_controls
i.e.

<input type="radio" value="Yes" name="RepPayee" onclick="disable_my_controls(

The click method calls the javascript function disable_my_controls instead of disable_controls (in your current code)

Note, in your current code, the name of the field for username is uemail. i.e.

<td> UserName</b> </td>
<td><input type="text" name="uemail" size="20" value="uemail ">
</td>

I dont think thats right. So in my example, Ive called it username.

Obviously it is just an example, yo uneed to change it to whatever fields you want.

Hope this makes sense, just shout if you get stuck

Good luck!

san

Date:: Nov 24, 2008

Time:: 17:01

Thanks Nidhi, Its working fine now!!

nidhi

Date:: Nov 24, 2008

Time:: 17:14

Cool, remember to give each textbox in the form its own unique name

san

Date:: Jan 05, 2009

Time:: 10:43

<%@ LANGUAGE="VBScript" %>
<%
Option Explicit
'Buffer the response, so Response.Expires can be used
Response.Buffer = TRUE
%>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
<html xmlns="http://www.w3.org/1999/xhtml">




<head>
<title>HelpDesk NewProblem</title>
<script type="text/javascript">

var strAlertMsg = ""
var focusField = ""

//Validate Text Box
function isEmpty(theForm,strFieldName,strMsg){
var objFormField = theForm.elements[strFieldName];
var strValue = objFormField.value;
strValue = strValue.split(" ").join("")
if(strValue.length<1){
strAlertMsg += "- "+ strMsg +" is Required.\n";
if(!focusField) focusField =""+ strFieldName +"";
return false;
}
return true;
}

//==========================================================================
//Validate the Select
function hasSelection(theForm,strFieldName,strMsg) {
var objFormField = theForm.elements[strFieldName];
if(objFormField.selectedIndex ==0) {
strAlertMsg += "- "+ strMsg +" is Required.\n";
   if(!focusField) focusField =""+ strFieldName +"";
return false;
}
return true;
}
//========================================================================

//Begin Page Validation
function validateForm(theForm){
strAlertMsg = ""
focusField = ""
hasSelection(theForm,'select1','departmentname')
isEmpty(theForm,'txtBox','NH')
isEmpty(theForm,'txtBox1','SSN')
isEmpty(theForm,'txtBox5','problemTitle')
isEmpty(theForm,'txtBox6','problemDescription')

if(strAlertMsg !=""){
alert("Please correct the following errors:\n____________________________\n\n" + strAlertMsg);
eval("theForm." + focusField + ".focus()");
return false;
}
return true;
}

</script>
<script type="text/javascript">

function enableDefault() {

document.getElementById('representativeSSN').disabled = false;
document.getElementById('organizationName').disabled = false;
document.getElementById('representativeZipCode').disabled = false;
document.getElementById('txtCustomMessage').disabled = true;
}
function enableCustom() {

document.getElementById('representativeSSN').disabled = true;
document.getElementById('organizationName').disabled = true;
document.getElementById('representativeZipCode').disabled = true;
document.getElementById('txtCustomMessage').disabled = false;

}

/**/
//========================================================================
</script>
<script type="text/javascript">

#imageUpload input {
display: block;
}

//this script to upload files
function fileFields() {
var x = document.getElementById('imageUpload');
x.onclick = function() {
  var i = parseFloat(this.lastChild.id)+1;
  input = document.createElement("input");
  input.setAttribute("type", "file");
  input.setAttribute("name", 'imageName_' + i);
  input.setAttribute("id", i);
  this.appendChild(input);
}
}
</script>
</head>
<body>

<form id="ContactFormforSOST" action="Confirmation1.asp" method="post" onsubmit="return validateForm(this);">

<div align="center">
<table class="Wide">
<tr>
<td colspan="2"><div align="right"> <b><em>*</em> - Required</b> </div>
</td>
</tr>
<tr class="Head1">
<td colspan="2" align="center"><b>Contact Form for SOST</b></td>
</tr>

<tr Class="Body1">
<td width="257" valign="top"><div align="center">
<table class="narrow" border="0">
<tr>
<td height="32" colspan="2" align="center"><b>Tell us how to get in touch with you</b> </td>
</tr>
<tr>
<td height="47"><b>UserName:</b> </td>
<td><input type="text" name="UserName" size="20" value="<% = UserName %>" ><em>*</em></td>
</tr>
<tr>
<td height="35"><b>EMail:</b> </td>
<td><input type="text" name="Email" size="20" value="<% = Email %>" ><em>*</em></td>
</tr>
<tr>
<td height="38"><b>Location:</b> </td>
<td><input type="text" name="Location" size="20" value="<% = Location %>"><em>*</em>
</td>
</tr>
<tr>
<td height="40"><b>Phone:</b> </td>
<td><input type="text" name="Phone" size="20" value="<% = Phone %>"><em>*</em>
</td>
</tr>
</table>
</div>
</td>
<td width="411" valign="top"><div align="center">
<table width="411" height="207" border="0" class="narrow">
<tr>
<td height="27" colspan="2"><div align="center"> <b>Information</b> </div>
</td>
</tr>
<tr>
<td width="134" height="43"><b>

<label id="lbldept" for="select1">Department:</label>
</b> </td>
<td width="267">
<%
Dim strSQL, rsLoop

'query for table
strSQL = "SELECT * From Departments WHERE DepartmentID > 0 ORDER BY DepartmentName ASC"

'set recordset object
set rsLoop = objConn.Execute(strSQL)
%>
<SELECT id="select1" NAME="DepartmentName">
<OPTION value="0" selected="selected" >Select Department</OPTION>
<%
While not rsLoop.eof
%>

<option value="<% = rsLoop("DepartmentID")%>">
<% = rsLoop("DepartmentName") %></OPTION>

<%
rsLoop.MoveNext
WEnd
%>
</select>

<em>*</em></td>
</tr>
<tr>
<td height="36"><b>
<label id="lblnh" for="txtBox">NH</label>
</b></td>
<td><input type="text" id="txtBox" name="NH" />

<em>*</em> </td>
</tr>
<tr>
<td height="44"><b>
<label id="lblssn" for="txtBox1">SSN:</label>
</b> </td>
<td><input type="text" id="txtBox1" name="SSN" />
<em>*</em> </td>
</tr>

</table>
</div>
</td>
</tr>
<tr class="Head2">
<td colspan="2"> </td>
</tr>

<tr>
<td colspan="2"><div align="left"> <b>IsRepresentativePayeeInvolved?</b> <em>*</em> </div>
</td>
</tr>
<tr>
<td><b>Yes:</b>

<input type="radio" name="IsRepresentativeInvolved" value="01" onclick="enableDefault()">
<b>No:</b>
<input type="radio" name="IsRepresentativeInvolved" value="02" checked="checked" onclick="enableCustom()">
</td>
</tr>
<tr class="Body1">
<tr>
<td><b>Reppayeessn:</b> </td>
<td><input name="RepresentativeSSN" disabled size="10" value="Enter SSN" type="text" onfocus="if(this.value=='Enter SSN'){this.value='';}" onblur="if(this.value==''){this.value='Enter SSN';}">
<em>*</em> </td>
</tr>
<tr>
<td><b>ZipCode:</b> </td>
<td><input name="RepresentativeZipCode" disabled size="20" value="Enter ZipCode" type="text" onfocus="if(this.value=='Enter ZipCode'){this.value='';}" onblur="if(this.value==''){this.value='Enter ZipCode';}">
<em>*</em> </td>
</tr>
<tr>
<td><b>orgainizationname:</b> </td>
<td><input name="OrganizationName" disabled size="50" value="Enter Organization Name" type="text" onfocus="if(this.value=='Enter Organization Name'){this.value='';}" onblur="if(this.value==''){this.value='Enter Organization Name';}">
<em>*</em><br />
</td>
</tr>
</tr>

<tr class="Body1">
<tr>
<td colspan="2"><div align="left"> <b>
<label id="lblRadio" for="isProblemQuestion">What kind of issue do you have?:</label>
</b> <em>*</em></div></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="IsProblemQuestion" checked="checked" value="01" />
<b>Problem/Question</b> </td>
<td><input type="radio" name="IsComment" value="02" />
<b>Comment</b> </td>
</tr>
<td colspan="2"><b>
<label id="lbltitle" for="txtBox5">Subject</label>
</b> <em>*</em><br>
<input type="text" size="50" id="txtBox5" name="ProblemTitle" />
<p> <b>
<label id="lblDesc" for="txtBox6">Enter your question or issue below: :</label>
</b> <em>*</em><br />
<textarea cols="80" rows="12" id="txtBox6" name="ProblemDescription"></textarea>
</td>
</tr>
<tr class="Head2">
<td colspan="2"><div align="center">
<input type="submit" id="btnSubmit" name="btnSubmit" value="SubmitTicket">
 
<input type="reset" id="btnReset" name="btnReset" value="ClearForm">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Question Answered

This question has been closed, and points have been rewarded to the following experts:

nidhi:

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Questions
Microsoft VB Script compilation error '800a03fa' - 'Expected Wend'
2 submit buttons in the same page and same form
How to confirm radio buttons in javascript?
Somthing wrong with my javascript form please help!
Microsoft OLE DB Provider for SQL Server error '80040e10'