Solved

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

Posted on 2004-09-21
16
368 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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
 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

785 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