物化js leanModal无法在数据提供后重置表单属性

时间:2016-01-19 07:57:35

标签: jquery

最初在点击按钮上加载leanModal(但是当文档准备就绪时加载leanModal Data entered when the modal is shown on the screen

[表单输入重置后,表单看起来像第一次加载时的方式[3]

Showing spaces and it is not like how it was first time loaded

    $(document).ready(function(){
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal({
            dismissible: true, // Modal can be dismissed by clicking outside of the modal
            opacity: .5, // Opacity of modal background
            ready: function() { 
                $("#selectFeild").hide();
                $("#inputField").show();
            }, // Callback for Modal open
        complete: function() {
        $("#selectType").val("1");
        $("#selectFeild").hide();
        $("#inputField").show(); 
        $('form').find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val('');

     } // Callback for Modal close
  });


         $('select').material_select();

      });

    <!-- Modal Structure -->
      <div id="modal1" class="modal">
        <div class="modal-content">
           <div class="pull-right"><img src="<%=VCUtils.getContextRoot()%>images/close.png" width="20px" class=" modal-action modal-close"/></div>
           <div class="col-xs-12 col-sm-12 col-md-12" style="text-align: center;"><h4>Join our growing network of agencies and providers</h4></div>

           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div style="margin-top: 30px;">
                <div class="row" style="border-right: 1px double #eaeaea;">
                        <div class="row">
                                <img src="<%=VCUtils.getContextRoot()%>images/check.png" width="25px"/><label class="vclabel">Accountability</label>
                                <p style="color:#54aecd;">Excehange invoices and documents online -- easily and secure</p>

                        </div>
                        <div class="row">
                                <img src="<%=VCUtils.getContextRoot()%>images/check.png" width="25px"/><label class="vclabel">Efficiency</label>
                                <p style="color:#54aecd;"> Start processing invoice faster with our secure customer API</p>
                        </div>
                        <div class="row">
                            <img src="<%=VCUtils.getContextRoot()%>images/check.png" width="25px"/><label class="vclabel">Status</label>
                                <p style="color:#54aecd;">Get real-time invoice status and payment information</p>
                        </div>
                </div>
                </div>

           </div>

           <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div style="margin-top: 25px; text-align: center;">
                    <form class="col s12">
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="firstName" type="text" class="validate"> <label for="firstName">First Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="lastName" type="text" class="validate" style="font-size: 14px !important;"> <label
                                     style="font-size: 14px;" for="email">Last Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="email" type="email" class="validate"> <label
                                    for="email">Email</label>
                            </div>
                        </div>
                        <div class="row">
                        <div class="input-field col s12">
                            <select style="font-size: 14px;" id="selectType">
                                <option value="1" selected="selected">I represent a NYC Vendor</option>
                                <option value="2">I represent a NYC Agency</option>
                            </select>
                        </div>
                       </div>
                            <div id="inputField">
                        <div class="row">
                        <div class="input-field col s12">
                            <div class="input-field col s12">
                                <input id="companyName" type="text" class="validate"> <label for="firstName">Company Name</label>
                            </div>
                        </div>
                       </div>
                       </div>

                       <div id="selectFeild">
                       <div class="row">
                        <div class="input-field col s12">
                            <select style="font-size: 14px;">
                                <option value="" disabled selected>Agencies</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>

                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                                <option value="1">Actuary, NYC Office of the (NYCOA)</option>
                                <option value="2">Administrative Justice Coordinator, NYC Office of (AJC)</option>
                            </select>
                        </div>
                       </div>
                       </div>

                       <div class="row">
                        <div class="input-field  col s12">
                            <a style="width: 255.594px;" class="waves-effect waves-light btn btnColor" onclick="javascript:validateFields()">Sign Up</a>
                        </div>
                       </div>
                    </form>
                </div>
            </div>  
         </div>   
      </div>
      <!-- Thank You Model -->

       <!-- Modal Structure -->
      <div id="modal2" class="modal modalHeight">
        <div class="modal-content">
           <div class="pull-right"><img src="<%=VCUtils.getContextRoot()%>images/close.png" width="20px" class=" modal-action modal-close"/></div>
           <div class="col-xs-12 col-sm-12 col-md-12" style="text-align: center;">
           <p style="font-size: 20px; font-weight: normal;">Thank you for your interest. Your request was<br/>successfully submitted.</p>
           <p style="font-size: 20px; margin-top: 30px; font-weight: normal;"> We'll be in touch.</p>
           </div>
        </div>
      </div>

2 个答案:

答案 0 :(得分:0)

完成:

function() {
     //Added this line 
     location.reload(false); //you can use true or false if true it will reload      from the server if false it will reload from browser cache 
}

答案 1 :(得分:0)

materialize css 中使用

$('select').material_select();

重置Dropdownlist