Question

我有下面的表格，一旦我们选择＆＃34; Designer＆＃34;，只有它会显示选项以选择＆＃34;订单编号＆＃34; ＆安培;一旦选择＆＃34;订单号＆＃34;而不仅仅是它将允许选择＆＃34;产品＆＃34; ，其中＆＃34;产品＆＃34;是多选框。

假设我选择了＃34; Designer＆＃34; ＆安培; ＆＃34;订单号＆＃34; ，当我点击重置按钮时，它正在验证它要求填写＆＃34;产品＆＃34; 值，它适用于提交按钮，但它不应该对＆＃34;进行验证。 RESET＆＃34;按钮。

我正在尝试this但仍然没有工作......

这里所有选项值都是从php代码动态获取的，如下所示。

产品是多选框

形式

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

脚本

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([]);
});

注意：我在发布之前尝试了很多，也是我对这个编程世界的新手....请帮助我....

Answer 1

将按钮类型设为＆＃34;按钮＆＃34;。试试这个..

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

然后在脚本中：

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

Answer 2

因为您动态插入了一些html元素，所以只有input标签的类型为reset无法解决您的问题，您还需要注册一个侦听器，以便在您单击重置时删除这些其他元素输入按钮。

将重置button标记替换为以下HTML input标记，并在脚本中使用以下脚本代码替换重置代码。

HTML：

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

脚本：

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

希望这可以解决您的问题。

Answer 3

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

尝试使用此代码重置按钮

删除重置验证按钮

3 个答案: