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

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.
LVL 6
jdfultonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ldbkuttyCommented:
<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
darksinclairCommented:
<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
darksinclairCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jdfultonAuthor Commented:
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
darksinclairCommented:
<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
ldbkuttyCommented:
i have checked my code in IE & Netscape and it works fine.
:-)
0
jdfultonAuthor Commented:
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
darksinclairCommented:
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
darksinclairCommented:
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
jdfultonAuthor Commented:
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
darksinclairCommented:
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
jdfultonAuthor Commented:
Just says Object Required Character 1 and I think the line with the submit button.
0
jdfultonAuthor Commented:
Sorry Object Expected
0
hemebondCommented:
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
jdfultonAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.