empty multiple select field prevent form submission

Question

I have multiple select field among other fields on my form and submitting the data to the database using ajax. The data is submitting successfully but the problem is, when the multiple select field is empty, noting works: both the js and php code does not execute. Even thought I have the multiple select on the form but I plan not to make mandatory. Please help

 $(function() { $('#form1').on('click', function(e) { e.preventDefault(); // do not allow the default form action /* var realvalues = new Array();//storing the selected values inside an array $('#s2_multi_value:selected').each(function(i, selected) { realvalues[i] = $(selected).val(); }); */ var form = $(this)[0].form; var data = $(form).serialize(); $.ajax({ method: "POST", url: "orgprocess1.php", data: data }) .done(function(data) { // capture the return from process.php var obj = $.parseJSON(data); var orgvalid = obj.valid2; var buty = obj.$bty; var orgmessage = obj.msg_orgcode; var btypemessage = obj.msg_business; if (orgvalid == 1) { // place results on the page $('input[name="org_Code"]').removeClass('textBoxError'); $('#result2').html('<div class="valid"></div>'); } else { $('input[name="org_Code"]').addClass('textBoxError'); $('#result2').html('<div class="error">' + orgmessage + '</div>'); } if (buty == 1) { // place results on the page $('select[name="btype"]').removeClass('textBoxError'); $('#result3').html('<div class="valid"></div>'); } else { $('input[name="btype"]').addClass('textBoxError'); $('#select3').html('<div class="error">' + btypemessage + '</div>'); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-sm-4"> <p>Email Address</p> <input type="text" class="form-control" id="email" name="email" placeholder="Email Address"> </div> <div class="col-sm-4"> <p>Address</p> <input type="text" class="form-control" id="addre" name="addre" placeholder="Physical Assress"> </div> <div class="col-sm-4"> <p>Business Type</p> <select id="s2_multi_value" name="btype[]" class="form-control" multiple="multiple"> <option value="">select one</option> <option value="Goods">Goods</option> <option value="Consultancy">Consultancy</option> </select> <input type="submit" value="submit" name="submit"> </div> 

Answer 1

Try the following snippet it submits form weather you select any value or not.

 $(document).ready(function() { $(document).on('submit', function(e) { e.preventDefault(); // do not allow the default form action console.log("form submitting and sending ajax call"); /* var realvalues = new Array();//storing the selected values inside an array $('#s2_multi_value:selected').each(function(i, selected) { realvalues[i] = $(selected).val(); }); */ var form = $(this)[0].form; var data = $(form).serialize(); $.ajax({ method: "POST", url: "orgprocess1.php", data: data }).error(function(){ console.log('error for ajax') }) .done(function(data) { // capture the return from process.php var obj = $.parseJSON(data); var orgvalid = obj.valid2; var buty = obj.$bty; var orgmessage = obj.msg_orgcode; var btypemessage = obj.msg_business; console.log("into ajax done function",data); if (orgvalid == 1) { // place results on the page $('input[name="org_Code"]').removeClass('textBoxError'); $('#result2').html('<div class="valid"></div>'); } else { $('input[name="org_Code"]').addClass('textBoxError'); $('#result2').html('<div class="error">' + orgmessage + '</div>'); } if (buty == 1) { // place results on the page $('select[name="btype"]').removeClass('textBoxError'); $('#result3').html('<div class="valid"></div>'); } else { $('input[name="btype"]').addClass('textBoxError'); $('#select3').html('<div class="error">' + btypemessage + '</div>'); } }); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="my-form" action="http://google.com"> <div class="form-group"> <div class="col-sm-4"> <p>Email Address</p> <input type="text" class="form-control" id="email" name="email" placeholder="Email Address"> </div> <div class="col-sm-4"> <p>Address</p> <input type="text" class="form-control" id="addre" name="addre" placeholder="Physical Assress"> </div> <div class="col-sm-4"> <p>Business Type</p> <select id="s2_multi_value" name="btype[]" class="form-control" multiple="multiple"> <option value="">select one</option> <option value="Goods">Goods</option> <option value="Consultancy">Consultancy</option> </select> <input type="submit" value="submit" name="submit"> </div> </form>