Remove Validation for Reset button

Question

I have below form , once we select "Designer", than only it will display options to select "Order Number" & once if select "Order Number" than only it will allow to select "Product" , where "Product" is multi-select box.

Assume i selected "Designer" & "Order Number" , than when i click Reset button , its doing validation that its asking to fill "Product" values , its fine for submit buttton, but it should not do validation for "RESET" button.

I am trying this but still its not working....

Here all option values are fetching dynamically from php code as below.

Product is multi-select box

form

<form method="post" enctype='multipart/form-data' action="update_paidstatus.php" onsubmit="return validate();">
    <table>
    <tr>
        <td> Designer </td>     
        <td>
          <select onchange="getOrderDetail(event);" name="designer_id" id="designer_id">
            <option value="">Select Designer</option>
            <?php while($data = $stmt->fetch())  { if($data['type']=="admin")continue;?>
              <option value="<?php echo $data['userID'];?>"><?php echo $data['name'];?></option>
            <?php } ?>
          </select>  
        </td> 

        <td><p id="error_para1" ></p></td>
    </tr> 

      <tr>
        <td>
           Order Number: 
        </td>
        <td>
        <div id="ordernumbers">
          <select name="designerorder_id" id="designerorder_id">
            <option value="">Select Order</option>
          </select>
          </div>
        </td>
         <td><p id="error_para2" ></p></td>
      </tr> 
      <tr>
        <td>
          Product 
        </td>
        <td>
        <div id="productnumbers" name="dproduct_ids" id="dproduct_ids">
          <select id="mySelect">
            <option>Select Products</option>
          </select>

        </div>
       </td>
        <td><p id="error_para3" ></p></td>
      </tr>

    </table>
    <hr/>

<input type="hidden" name="dproduct_id" id="dproduct_id" value=""/> 
   <input class="btn btn-large btn-primary" name="btn-signup" type="submit" id="btnSubmit" value="Submit" />
  <button formnovalidate="formnovalidate" class="btn btn-large btn-primary">RESET</button>

  </form>

Script

function validate()
{
 // alert("d");
 var error="";
 var designer_id = document.getElementById( "designer_id" );
 if( designer_id.value == "" )
 {
  error = " Please Select Designer";
  document.getElementById( "error_para1" ).innerHTML = error;
  return false;
 }
 var error="";
 var dproduct_ids = document.getElementById( "dproduct_ids" );

 if( dproduct_ids.value == "" )
 {
  error = " Please Select Product";
  document.getElementById( "error_para3" ).innerHTML = error;
  return false;
 }
 var error="";
 var designerorder_id = document.getElementById( "designerorder_id" );
 if( designerorder_id.value == "" )
 {
  error = " Please Select Order";
  document.getElementById( "error_para2" ).innerHTML = error;
  return false;
 }
 var error="";
 var commission = document.getElementById( "commission" );
 alert(commission.value );
 if(commission.value == "" )
 {
  error = " Please add commission";
  document.getElementById( "error_para5" ).innerHTML = error;
  return false;
 }
 var error="";
 var Duedate = document.getElementById( "Duedate" );
 if(Duedate.value == "" )
 {
  error = " Please Select Designer";
  document.getElementById( "error_para6" ).innerHTML = error;
  return false;
 }
  else
 {
  return true;
 }
}


$(document).ready(

  /* This is the function that will get executed after the DOM is fully loaded */
  function () {
    $( "#datepicker" ).datepicker({
      changeMonth: true,//this option for allowing user to select month
      changeYear: true //this option for allowing user to select from year range
    });
  }

);
  function getOrderDetail(e)
  {
    var designerId=e.target.options[e.target.selectedIndex].value;    
    var url="http://sbdev2.kidsdial.com:81/php/site6/designerpaidstatus.php?designer_id="+designerId+"&opration=2";
       var request = jQuery.ajax( {
                url: url ,
                type: 'POST',                      
            } );

            request.done( function (result)
            {  
              document.getElementById('ordernumbers').innerHTML =result;

            } );
            request.fail( function ( error )
            {
                console.dir(error);             
            } );
     }
  function getProductDetail(e)
  {    
    var productId = $("#dproductselect option:selected").attr("class");  
    var finalstrig=productId.split(",");

    var select='';
    select+='<select class="test" multiple="multiple" name="dproduct_ids" id="dproduct_ids">';

    for(i=0;i<finalstrig.length;i++)
    {
      if(finalstrig[i]!=0)
      {
        select +='<option value="'+finalstrig[i]+'">'+finalstrig[i]+'</option>';
      }
    }
    select +='</select>';   
    document.getElementById('productnumbers').innerHTML =select;
    (function($) {
    $(function() {
        $('.test').fSelect();
    });
})(jQuery);

  }
     <!-- reset -->
$("button").click(function() {
    $("#mySelect").val([]);
});

Note : I tried lot before posting here, also i am new to this programming world.... please help me....

Answer 1

Because you dynamically insert some html elements, so just a input tag with a type of reset can not resolve your problem, you also need register a listener to remove these additional elements when you click reset input button.

Replace your reset button tag with following HTML input tag and in your Script replace your reset code with the following Script code.

HTML:

<input type="reset" class="btn btn-large btn-primary" id='button_reset' formnovalidate="formnovalidate" value="RESET"/>

Script:

$(function(){
  $("#button_reset").click(function() { 
    $("#productnumbers").html('<select id="mySelect"><option>Select Products</option></select>');
  });
});

Hopefully this will solve your problem.

Answer 2

Make Button type as "button". Try this..

 <button type="button" onClick="resetSelect()" formnovalidate="formnovalidate" class="btn btn-large btn-primary">RESET</button>

Then in script :

<script type="text/javascript">
  function resetSelect() {
  $("#mySelect").fSelect("reload");
   }
</script>

Answer 3

<input type="reset" class="btn btn-large btn-primary" formnovalidate="formnovalidate" value="RESET"/>

Try This Code For Reset Button