Solved

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

Posted on 2004-09-21
16
370 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

749 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