Solved

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

Posted on 2004-09-21
16
366 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
Comment Utility
<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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
i have checked my code in IE & Netscape and it works fine.
:-)
0
 
LVL 6

Author Comment

by:jdfulton
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 5

Expert Comment

by:darksinclair
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Just says Object Required Character 1 and I think the line with the submit button.
0
 
LVL 6

Author Comment

by:jdfulton
Comment Utility
Sorry Object Expected
0
 
LVL 3

Expert Comment

by:hemebond
Comment Utility
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
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

772 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

11 Experts available now in Live!

Get 1:1 Help Now