Solved

Check Form Field If certain option selected in drop down menu.

Posted on 2004-09-21
16
367 Views
Last Modified: 2008-03-17
I need to check to see if a textbox is empty depending on a selected value in a drop down menu.

The drop down menu values are either 1, 2, or 3.   If 1 or 2 are selected the text box cannot be empty.  If the field is empty an alert window on submit would be great.

Should be pretty simple for someone.
0
Comment
Question by:jdfulton
  • 7
  • 6
  • 2
  • +1
16 Comments
 
LVL 32

Expert Comment

by:ldbkutty
ID: 12113017
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function validateForm() {
 var textValue = document.myform.myTextBox.value;
 var selectValue = document.myform.mySelectField.value;
 if((selectValue==1 || selectValue==2) && textValue == "") {
             alert("Please fill out the ttext box field!");
            return false;
      }
      return true;
}
//-->
</script>

</head>
<body>

<form name="myform" method="post" action="" onsubmit="return validateForm();">
<input type="text" name="myTextBox"/>
<select name="mySelectField">
  <option value="1"> 1 </option>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
</select>
<input type="submit" value="submit"/>
</form>

</body>
</html>
0
 
LVL 5

Expert Comment

by:darksinclair
ID: 12113032
<SCRIPT>
function checkBlank( objSlctBox )
{
   if( objSlctBox.selectedIndex == 0 || objSlctBox.selectedIndex == 1)
      if( document.getElementById('txtBox').value == '' )
      {
           alert("ERROR!  You must fill in the required text box for that selection." );
          return( false );
      }
return( true );
}
</SCRIPT>
<FORM>
<INPUT TYPE="TEXT" name="txtBox" ID="txtBox">
<SELECT NAME="slctBox" onChange="checkBlank(this);">
<OPTION value="1">option 1</OPTION>
<OPTION value="2">option 2</OPTION>
<OPTION value="3">option 3</OPTION>
</SELECT>

</FORM>
0
 
LVL 5

Expert Comment

by:darksinclair
ID: 12113045
the above will check on select change.. if you want to do it for form validation... add this to the submit button

<input type="submit" value="submit" name="submit" onClick="return( checkBlank( this.slctBox ) );"> and remove the onChange="" from the slctBox.

Cheers.
0
 
LVL 5

Accepted Solution

by:
darksinclair earned 250 total points
ID: 12113069
the following would validate on submit using my form:

<SCRIPT>
function checkBlank( objForm )
{
   if( objForm.slctBox.selectedIndex == 0 || objForm.slctBox.selectedIndex == 1)
      if( document.getElementById('txtBox').value == '' )
      {
           alert("ERROR!  You must fill in the required text box for that selection." );
          return( false );
      }
return( true );
}
</SCRIPT>
<FORM>
<INPUT TYPE="TEXT" name="txtBox" ID="txtBox">
<SELECT NAME="slctBox">
<OPTION value="1">option 1</OPTION>
<OPTION value="2">option 2</OPTION>
<OPTION value="3">option 3</OPTION>
</SELECT>
<input type="submit" name="submit" value="submit" onClick="return( checkBlank( this.form ));">

</FORM>
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12115662
I cannot get either of them to work.  ldbkutty yours doesn't do anything.  No errors or anything.  darksinclair i keep getting an object expected error when I try to use yours.
0
 
LVL 5

Expert Comment

by:darksinclair
ID: 12115737
<SCRIPT>
function checkBlank( objSlctBox )
{
   if( objSlctBox.selectedIndex == 1 || objSlctBox.selectedIndex == 2)
      if( document.getElementById('txtBox').value == '' )
      {
           alert("ERROR!  You must fill in the required text box for that selection." );
          return( false );
      }
return( true );
}
</SCRIPT>
<FORM>
<INPUT TYPE="TEXT" name="txtBox" ID="txtBox">
<SELECT NAME="slctBox" onChange="checkBlank(this);">
<OPTION>please choose a value...</OPTION
<OPTION value="1">option 1</OPTION>
<OPTION value="2">option 2</OPTION>
<OPTION value="3">option 3</OPTION>
</SELECT>

</FORM>

The above will ensure that the text box is filled in upon selecting an entry from the drop down box and the following will ensure that there is an entry in the text box if the select box has either entry 1 or 2 selected in the selct box upon submitting the form.  Both of these have been tested and work in IE... are you using netscape?

<SCRIPT>
function checkBlank( objForm )
{
   if( objForm.slctBox.selectedIndex == 1 || objForm.slctBox.selectedIndex == 2)
      if( document.getElementById('txtBox').value == '' )
      {
           alert("ERROR!  You must fill in the required text box for that selection." );
          return( false );
      }
return( true );
}
</SCRIPT>
<FORM>
<INPUT TYPE="TEXT" name="txtBox" ID="txtBox">
<SELECT NAME="slctBox">
<OPTION>Please select an entry...</OPTION>
<OPTION value="1">option 1</OPTION>
<OPTION value="2">option 2</OPTION>
<OPTION value="3">option 3</OPTION>
</SELECT>
<input type="submit" name="submit" value="submit" onClick="return( checkBlank( this.form ));">

</FORM>

The above will not process the form if select box entry 1 or 2 are chosen and there is no value in the text box.

Simply copy and paste the entire code to test it... I have tested it and it works,

Cheers.
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 12115821
i have checked my code in IE & Netscape and it works fine.
:-)
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12116390
Still get the error.  its getting the error on the onClick function.  It does work in a test page.  Here is a link to the code.  It's over 2000 lines so I don't want to post it here.

http://jneonline.com/editlistings.html

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 5

Expert Comment

by:darksinclair
ID: 12128819
Try changing

<input type="submit" name="submit" value="submit" onClick="return( checkBlank(this.form));">

to

<input type="submit" name="submit" value="submit" onclick="return checkBlank(this.form);">

ive heard there is sometimes problems with having a capital C in onclick ... Altho I havent experienced it maybe it's messing you up?

Let me know if that helps.. ill try to look at your code more thoroughly if it doesnt.

Cheers.
0
 
LVL 5

Expert Comment

by:darksinclair
ID: 12128850
Ughm, ... Line 526 it seems like you deleted the functino name... Check this out in your code




<script language="JavaScript">
{
alert("Listing Deleted!")
window.location="listingmenu.asp?view=approved"
}

function checkBlank( objForm )
{
...


You need to put that function name back in atleast.. that mighta been dah problem...

Let me know if these work out,

Cheers,
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12129537
Nothing, didn't work at all.  Does it matter where javascript is in the page?  Could it be some of the other scripts I have?
0
 
LVL 5

Expert Comment

by:darksinclair
ID: 12129547
the placement of the javascripts shouldn't matter at all...  Did you get any errors or anything or.. ? What happens when you run it?  Any Specific errors?
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12129628
Just says Object Required Character 1 and I think the line with the submit button.
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12129635
Sorry Object Expected
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12187499
Tested in Mozilla, Internet Explorer and Opera.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>Q_21139171</title>
      </head>
      <body>
            <form action="" method="get" onsubmit="return validate()">
                  <fieldset>
                        <label for="select">Select</label>
                        <select id="select">
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                        </select>
                        <label for="txt">Text</label>
                        <input id="txt" type="text">
                        <input type="submit">
                  </fieldset>
            </form>
      </body>
      <script type="text/javascript">
            function validate()
            {
                  if(document.getElementById("select").value < 3)
                  {
                        if(document.getElementById("txt").value == '')
                        {
                              return false;
                        }
                  }
            }
      </script>
</html>
0
 
LVL 6

Author Comment

by:jdfulton
ID: 12362079
Found the problem.  I had to rename the submit button to Continue.  There was a conflict swith document.forms[0].submit.  I found the answer somewhere out there in tech land.

Thanks for the help.

jd
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now