Atleast one selection must be made - DropdownList

107 100+

I have four dropdownlist and i want to validate (client-side validation) that atleast one is selected before the form is valid for submission. I have tried the method below but it seems not working.

Expand|Select|Wrap|Line Numbers

  
<script language = "Javascript">

var filter = new Array (3);

filter[0] = "filter1"  //first dropdownlist name

filter[1] = "filter2"

filter[2] = "filter3"

filter[3] = "filter4"
 
function validate(){

   for (var i = 0; i < filter.length; i++){

      if (document.getElementById(filter[i]).value != '') {

         return true;

      }

   }

   alert("Please make atleast one selection");

   return false;

}

</script>

And i have called the validate function as below:

<form method="POST" name="form" id="form" onsubmit='return validate()'>

Can somebody help me?

Aug 22 '12 #1

Subscribe Post Reply

✓ answered by raamay

the above javascript code is working perfectly now. This is to inform all that if you are using joomla and if you don't need mootools validation then please disable it so that your custom javascript validation like above works. I disabled the use of mootools and now its working well.

2654

gits

5,390

Expert Mod 4TB

how does a selectbox in your page look like? (HTML)

Aug 22 '12 #2

Rabbit

12,516

Expert Mod 8TB

The function works perfectly fine for me with the mock up HTML I made. Most likely your HTML for your form is wrong.

Expand|Select|Wrap|Line Numbers

 <script language = "Javascript"> 

var filter = new Array (3); 

filter[0] = "filter1"  //first dropdownlist name 

filter[1] = "filter2" 

filter[2] = "filter3" 

filter[3] = "filter4" 
 
function validate(){ 

   for (var i = 0; i < filter.length; i++){ 

      if (document.getElementById(filter[i]).value != '') { 

         return true; 

      } 

   } 

   alert("Please make atleast one selection"); 

   return false; 

} 

</script> 
 
<body>

    <form method="POST" name="form" id="form" onsubmit='return validate()'>

        <select id="filter1">

          <option value="">Choose</option>

          <option value="saab">Saab</option>

        </select>

        <select id="filter2">

          <option value="">Choose</option>

          <option value="mercedes">Mercedes</option>

        </select>

        <select id="filter3">

          <option value="">Choose</option>

          <option value="audi">Audi</option>

        </select>

        <select id="filter4">

          <option value="">Choose</option>

          <option value="saab">Aston Martin</option>

        </select>

        <input type="submit" value="submit" />

    </form>

</body>

Aug 22 '12 #3

raamay

107

100+

thanks guys for your help, but i am surprised it doesn't work. My selectbox looks like below, its a joomla frontend page without having used the joomla validation.

Expand|Select|Wrap|Line Numbers

 
<?php

defined('_JEXEC') or die('Restricted access');
 
JHTML::_('behavior.calendar');

JHtml::_('behavior.tooltip');

JHTML::_('behavior.formvalidation');

?>

<script language = "Javascript">

var filter = new Array (3);

filter[0] = "filter1"

filter[1] = "filter1"

filter[2] = "filter1"

filter[3] = "filter1"
 
function validate(){

   for (var i = 0; i < filter.length; i++){

      if (document.getElementById(filter[i]).value != '') {

         return true;

      }

   }

   alert("Please make your selection");

   return false;

}

</script>

<form method="POST" name="form" id="form" onsubmit='return validate()'>

    <div align="center">

        <table id="mytable">

            <tr>

                <td>

                <div align="center">

                <table style="width:42%">

                <tr>

                    <td colspan="2"><h2 align="center">Filter and Search</h2></td>

                </tr>

                <tr>

                    <td>Class</td>

                    <td>

                        <select name="filter1" id="filter1" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Class</option>

                            <?php echo JHtml::_('select.options', JFormFieldCClass::getOptions(), 'clid', 'cclass');?>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Category</td>

                    <td>

                        <select name="filter2" id="filter2" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Category</option>

                            <?php echo JHtml::_('select.options', JFormFieldCategory::getOptions(), 'catid', 'category');?>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Client Category</td>

                    <td>

                        <select name="filter3" id="filter3" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Client</option>

                            <?php echo JHtml::_('select.options', JFormFieldClsCategory::getOptions(), 'clsid', 'clscategory');?>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Paper</td>

                    <td>

                        <select name="filter4" id="filter4" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Paper</option>

                            <?php echo JHtml::_('select.options', JFormFieldPaper::getOptions(), 'pid', 'paper');?>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td ></td>

                    <td ></td>

                </tr>

                <tr>

                    <td ></td>

                    <td> 

                        <button>Search</button>

                    </td>

                </tr>            

            </table>  

            </div>

            </td>

            </tr>

            </table>            

    <input type="hidden" name="option" value="<?php echo JRequest::getVar('option');?>"/>

    <?php echo JHTML::_( 'form.token' ); ?>    

    </div>

</form>

Aug 23 '12 #4

Rabbit

12,516

Expert Mod 8TB

What does the HTML look like on the client side?

Aug 23 '12 #5

raamay

107

100+

Expand|Select|Wrap|Line Numbers

 <form method="POST" name="form" id="form" onsubmit='return validate()'>

    <div align="center">

        <table id="mytable">

            <tr>

                <td>

                <div align="center">

                <table style="width:42%">

                <tr>

                    <td colspan="2"><h2 align="center">Search Tenders</h2></td>

                </tr>

                <tr>

                    <td>Class</td>

                    <td>

                        <select name="filter1" id="filter1" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Class</option>

                            <option value="26">L</option>

<option value="27">M</option>

<option value="28">S</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Category</td>

                    <td>

                        <select name="filter2" id="filter2" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Category</option>

                            <option value="22">W1</option>

<option value="23">W2</option>

<option value="24">W3</option>

<option value="25">W4</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Client</td>

                    <td>

                        <select name="filter3" id="filter3" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Client </option>

                            <option value="13">Government</option>

<option value="12">Private</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Paper</td>

                    <td>

                        <select name="filter4" id="filter4" class="inputbox1" style="width: 140px">

                            <option value="">Filter by Paper</option>

                            <option value="11">Times</option>

<option value="10">Business</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td ></td>

                    <td ></td>

                </tr>

                <tr>

                    <td ></td>

                    <td> 

                        <button>Search</button>

                    </td>

                </tr>            

            </table>  

            </div>

            </td>

            </tr>

            </table>            

        </fieldset>

    <input type="hidden" name="option" value="com_filters"/>

    <input type="hidden" name="412f9f21029443c16fad2f9ddbda9369" value="1" />    

    </div>

</form>

Aug 23 '12 #6

raamay

107

100+

does anybody have any idea? i too tried the function as suggested by RABBIT and it works in a mock html page but when i implement it in my actual form it doesn't.

Aug 23 '12 #7

Rabbit

12,516

Expert Mod 8TB

It's because your button isn't a submit button.

Expand|Select|Wrap|Line Numbers

<button type="submit">Search</button>

Aug 23 '12 #8

raamay

107

100+

i tried your solution rabbit but still the result is out of question. But please note that the validation works in IE7 and only in firefox and chrome it has no effect.

does it have anything to do with mootools in joomla? but infact i ve not used the joomla validation

Aug 24 '12 #9

Rabbit

12,516

Expert Mod 8TB

It would help had you said that at the beginning. I don't have chrome or firefox at work.

Aug 24 '12 #10

ariful alam

185

100+

The code is working fine in ie6, firefox 10.0.2, opera 12.01, safari 5.1.2 and chrome 21.0.

Aug 25 '12 #11

raamay

107

100+

it works in IE7 too but still not working in FF 9 or 14 and Chrome. i am sure it has something to do with joomla only. Since this forum is not for joomla, so i don't understand how to solve this problem.

Aug 27 '12 #12

raamay

107

100+

Aug 28 '12 #13

gits

5,390

Expert Mod 4TB

either that or make use of the Joomla built in tools like this: http://docs.joomla.org/Client-side_form_validation

Aug 28 '12 #14

raamay

107

100+

ya Expert gits, you are right but you may be aware Joomla has limited resources to refer to. It would be easy for us to use the built in joomla validation but i didn't know how to create custom validation like above using the built in support.

Aug 29 '12 #15

Similar topics

problem when no selection made

by: middletree | last post by:

Posted this to Access group, meant to do it here: I have what I call a composite table. Can't recall what they called it in database class, but it's where you take the PK of two different...

ASP / Active Server Pages

Multiple selection in DropDownList

by: Michael Groeger | last post by:

Hi, I want to be able to have a DropDownList which supports multiple selection, but I haven't found a property for that in the DropDownList control. Is there a way to have multiple selection...

ASP.NET

Disab;e selection of dropdownlist items (in a GridView)

by: Nick Zdunic | last post by:

Is there an example of using client side script to disable selection of some items in a drop down that I could follow. It would seem tricky as there are multiple drop downs in the GridView. I...

ASP.NET

How to set selection in dropdownlist included in a Gridview <EditItemTemplate>

by: WT | last post by:

Hello, I can figure how to set selectIndex or Value, I have tried this <EditItemTemplate> <asp:DropdownList ID="DDLSector3" DataSource='<%#...

ASP.NET

Displaying access records based on selection made in a combo box

by: kennygee | last post by:

I am trying to learn VB after many years programming in Access. I am trying to do something in VB that is simple in Access. How do I display record data on a form based on the selection made in a...

Visual Basic 4 / 5 / 6

Need to access the selection made by the user from selection control

by: subbaraju | last post by:

I have two selection controls and based on the selection made by the user i need to pass those values to the other program in java...... can u give me the way......

Java

Retriving values from backend dependnig on selection made in choice box

by: manishamca | last post by:

i want to retrive values from backend depending on the selection made in choice box. i have two choice box and different values shuld be retrived depending on the selection made in this two...

Java

Validate--dropdown menu lists--no selection made

by: ammweb | last post by:

How would you validate a page that had several drop down menus. When the submit button is submitted, and NO selection has been made? See code below: <html> <head> </head> <body> <table...

Javascript

Identify last selection made on list box

by: Claus Mygind | last post by:

I have a list box and want to limit the user to selecting a max of 5 items from the list. I've put in a counter which warns the user that more than 5 items have been selected, however I cannot...

Javascript

web application to display according to selection made

by: ash42 | last post by:

I need to write an asp application consisting of a webform which allows a user to make a selection from menu and display all jobs relalted to IT or all jobs related to Admin . A user will click...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++