Atleast one selection must be made - DropdownList

**gits** · Aug 22 '12, 11:26 AM

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

**Rabbit** · Aug 22 '12, 04:11 PM

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

Code:

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

**raamay** · Aug 23 '12, 03:31 AM

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.

Code:

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

**Rabbit** · Aug 23 '12, 03:39 AM

What does the HTML look like on the client side?

**raamay** · Aug 23 '12, 04:07 AM

Code:

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

**raamay** · Aug 23 '12, 09:39 AM

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.

**Rabbit** · Aug 23 '12, 03:22 PM

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

Code:

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

**raamay** · Aug 24 '12, 06:47 AM

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

**Rabbit** · Aug 24 '12, 03:05 PM

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

**ariful alam** · Aug 25 '12, 11:59 AM

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

**raamay** · Aug 27 '12, 05:36 AM

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.

**raamay** · Aug 28 '12, 10:51 AM

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.

**gits** · Aug 28 '12, 12:25 PM

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

**raamay** · Aug 29 '12, 04:07 AM

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.

Atleast one selection must be made - DropdownList

Atleast one selection must be made - DropdownList

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment