フォームを閉じるajax登録フォームのアイコンを閉じるが、すべてのデータフィールドを消去しない

Question

フォームの右上にクローズアイコンを作成しようとしました。フォームを閉じますが、リロードせずにページを再度開くと、すべてのデータフィールドにデータが表示されます。

フォームを閉じると、すべてのフィールドを自動的に消去できますか？

（下部にはJavaScriptをインラインで、）HTMLコード：

<ul class="nav navbar-nav navbar-right"> 
    <li id="myBtn"><a href="#">Register With Us</a></li> 
    <div id="myModal" class="modal"> 
     <form> 

      <!-- Modal content --> 
      <div class="modal-content"> 
       <div class="modal-body" style="background-color: #fff;"> 
        <span class="close"><img src="images/index/close.png" width="40px;" height="40px;" ></span> 

        <h1 style="padding-top: 0px;"> WELCOME TO LOGIN PAGE</h1> 

        <div class="controls"> 

         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_name">First Name *</label> 
            <input id="form_name" autocomplete="off" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required."> 
            <div class="help-block with-errors"></div> 

           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_lastname">Last Name *</label> 
            <input id="form_lastname" type="text" name="surname" autocomplete="off" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required."> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 

         <div class="row"> 
          <div class="col-md-6"> 

           <div class="form-group"> 
            <label for="form_dob">Date of Birth *</label><br> 
            <input id="form_dob" type="date" name="dob" autocomplete="off" class="form-control" placeholder="Please enter your Date of Birth *" required="required" data-error="Date of Birth is required."> 

            <div class="help-block with-errors"></div> 

           </div> 
          </div> 

          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_gender" style="padding-right: 15px;">Gender *</label> 
            <label class="gender"><input type="radio" required autocomplete="off" name='gender' value='Male'><img src="images/index/male.png" width="40px" height="35px" > Male</label><label class="gender"><input type="radio" autocomplete="off" required name='gender' value='Female'><img src="images/index/female.png" width="40px" height="35px">Female</label> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 

           <div class="form-group"> 
            <label for="form_nationality"> Nationality *</label><br> 
            <select required name="Nationalty" class="form-control" style=" text-align: center;" autocomplete="off"> 
    <option value='' ><strong >Select Your Nationality</strong></option> 

     <option value="BGD">Bangladesh</option> 
     <option value="IND">India</option> 
     <option value="NEP">Nepal</option> 
     <option value="PAK">Pakistan</option> 

     <option value="SL">Sri Lanka</option> 
         </select> 
            <div class="help-block with-errors"></div> 

           </div> 
          </div> 

          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_photo" style="padding-right: 20px;">Photo *</label> 
            <input type="file" class=" myButton " autocomplete="off" /> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_email">Email *</label> 
            <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required." autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_phone">Phone No *</label> 
            <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone *" autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 



         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_passport_no">Passport No *</label> 
            <input id="form_passport_no" type="email" name="email" class="form-control" placeholder="Please enter your Passport Number *" required="required" data-error="Valid Passport is required." autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_passport_expiry">Passport Expiry Date*</label> 
            <input id="form_passport_expiry" type="date" name="phone" class="form-control" placeholder="Please enter your Passport Expiry Date" autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 


         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_visa_issue">Visa Issue Date *</label> 
            <input id="form_visa_issue" type="date" name="email" class="form-control" placeholder="Please enter your Visa Issue Date *" required="required" data-error="Valid email is required." autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label for="form_visa_expiry">Visa Expiry Date *</label> 
            <input id="form_visa_expiry" type="date" name="phone" class="form-control" placeholder="Please enter your Visa Expiry Date" autocomplete="off"> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
         </div> 

         <div class="row"> 
          <div class="col-md-12"> 
           <div class="form-group"> 
            <label for="form_message">Company Details *</label> 
            <textarea id="form_message" name="message" class="form-control" placeholder="Please provide company Details *" rows="4" required data-error="Please,leave us a message." autocomplete="off"></textarea> 
            <div class="help-block with-errors"></div> 
           </div> 
          </div> 
          <div class="col-md-12"> 
           <input id="reset" type="reset" class="btn btn-ghost " value="Reset" style="font-size: 20px; margin-left: 35%;"> 
           <input type="submit" class="btn btn-ghost " value="Register" style="font-size: 20px; margin-left: 50px;"> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-12"> 
           <p class="text-muted"><strong>*</strong> </p> 
          </div> 
         </div> 
        </div> 

     </form> 
     <script> 
      // Get the modal 
      var modal = document.getElementById('myModal'); 

      // Get the button that opens the modal 
      var btn = document.getElementById("myBtn"); 

      // Get the <span> element that closes the modal 
      var span = document.getElementsByClassName("close")[0]; 


      // When the user clicks the button, open the modal 
      btn.onclick = function() { 


       modal.style.display = "block"; 
      } 

      } 

      // When the user clicks on <span> (x), close the modal 
      span.onclick = function() { 

       modal.style.display = "none"; 

      }; 

      // When the user clicks anywhere outside of the modal, close it 
      window.onclick = function(event) { 
       if (event.target == modal) { 
        modal.style.display = "none"; 
       } 
      } 
     </script> 

     </div> 
     </div> 
    </div> 

Answer 1

あなたform..onは、ウィンドウを閉じると、閉じるボタンをクリックしてリセットします。このよう ...

document.getElementById("myForm").reset();//myForm is your form id 

OR jqueryのフォームをリセット使用。フォームを閉じると、フォームが、それはあなたのフォームをリセットし、いつ開いて、すべてのフィールドが空白になりますとき$("#myForm")[0].reset();

<script type="text/javascript"> 
    // When the user clicks on <span> (x), close the modal 
span.onclick = function() { 

    modal.style.display = "none"; 
    document.getElementById("myForm").reset(); 

}; 






// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
     document.getElementById("myForm").reset(); 
    } 
} 

Answer 2

呼び出しjqueryのトリガ機能は、ボタンをリセットします。

Answer 3

あなたのコードはブートストラップ機能を使用していません。

モーダルを閉じるには、新しいjavascriptは必要ありませんでした。 Bootstrap.jsはそれ自体を行います。あなたのボタンにdata-dismiss = "modal"を追加してください。ブートストラップ付きこのexample

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 

の表情を持っている、あなたは、関数によって隠されたイベントをオーバーロードすることができます。

/** 
* When moddal is closing... 
*/ 
$('myModal').on('hidden.bs.modal', function() { 
    // Reset form ! 
    $("#myForm")[0].reset(); 
}); 

Answer 4

フォームにはIDを持たず、ページ上にフォームが1つしかないと仮定すると、コードは動作するはずです。フォームを表示する直前に文を追加してください。

modal.style.display = "block"; 
document.forms[0].reset()