asked on

jQuery form sumbission if at least one dropdown is selected

Hi Experts,
The code below makes all 4 dropdown menus required. My goal is to make it possible to submit the form, if at least one dropdown is selected. It doesn't matter which one, but at least one must be selected. How can the code be modified in order to achieve this goal? Or could you help me please with any other solution, jQuery or Javascript?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/screen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script>
	$().ready(function() {
	
		$("#mydropdowns").validate({
		  messages: {
			Affiliation: {
			  required: "Please select an affiliation.",
			},
			DeviceName: {
			  required: "Please select a device."
			},
			AliasName: {
				required: "Please select an alias."
			},
			DeviceAccountID: {
				required: "Please select an Account ID"
			}
		  }
		});

	});
	</script>

</head>
<body>

<form id="mydropdowns" method="POST" action="../Search/SearchResults.asp">
  <select name="Affiliation" id="Affiliation" required>
  <option value=""></option>
  <option value="VER">VER</option>
  <option value="TIR">TIR</option>
  <option value="SAV">SAV</option>
  <option value="ASE">ASE</option>
</select>
  <select name="DeviceName" id="DeviceName" required>
  <option value=""></option>
  <option value="100968_FILE1">100968_FILE1</option>
  <option value="101324_FILE1">101324_FILE1</option>
  <option value="101325_FILE1">101325_FILE1</option>
  <option value="101333_FILE1">101333_FILE1</option>
</select>
<select name="AliasName" id="AliasName" required>
  <option value=""></option>
  <option value="021850">021850</option>
  <option value="024803">024803</option>
  <option value="026294">026294</option>
  <option value="050403">050403</option>
</select>
<select name="DeviceAccountID" id="DeviceAccountID" required>
  <option value=""></option>
  <option value="100968">100968</option>
  <option value="101324">101324</option>
  <option value="101333">101333</option>
  <option value="101335">101335</option>
</select>
  <br/><br/>
  <input type="submit" value="submit" />
</form>
</div>
</body>
</html>

Open in new window

I would really appreciate your help.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stefan Motz

ASKER

Thank you very much for the solution and also for the link you provided. It will also help me with other projects.

Julian Hansen

You are welcome.