如何在引導模式框中重置表單主體？

Question

我找到一種方法，當打開引導modalbox沒有刷新頁面時總是得到空表單。

問題是，當用戶輸入其數據提交表單並再次打開modalbox時，它會顯示以前給出的數據：。我怎樣才能在關閉的模型盒上更新形式？

Answer 1

你可以做一個JavaScript函數來做到這一點：

$.clearInput = function() { 
     $('form').find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val(''); 
}; 

，然後你可以每個模態隱藏時調用該函數：

$('#Your_Modal').on('hidden', function() { 
     $.clearInput(); 
}); 

Answer 2

我略加修改的版本去@ shibbir的回答是：

// Clear form fields in a designated area of a page 
$.clearFormFields = function(area) { 
    $(area).find('input[type="text"],input[type="email"],textarea,select').val(''); 
}; 

這樣調用：

$('#my-modal').on('hidden', function(){ 
    $.clearFormFields(this) 
}); 

Answer 3

在引導3，你可以在你的模態窗口之後重置您的形式已關閉如下：

$('.modal').on('hidden.bs.modal', function(){ 
    $(this).find('form')[0].reset(); 
}); 

Answer 4

以下解決方案解決我的問題，並且還保留了默認值

$('body').on('hidden.bs.modal', '.modal', function() { 
    $(this).find('input[type="text"],input[type="email"],textarea,select').each(function() { 
    if (this.defaultValue != '' || this.value != this.defaultValue) { 
     this.value = this.defaultValue; 
    } else { this.value = ''; } 
    }); 
}); 

Answer 5

如果您使用ajax以這種方式加載模態的身體並希望能夠重新加載它的內容

<a data-toggle="modal" data-target="#myModal" href="./add">Add</a> 
<a data-toggle="modal" data-target="#myModal" href="./edit/id">Modify</a> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- Content will be loaded here --> 
     </div> 
    </div> 
</div> 

使用

<script> 
    $(function() { 
     $('.modal').on('hidden.bs.modal', function(){ 
      $(this).removeData('bs.modal'); 
     }); 
    }); 
</script> 

Answer 6

馬克·貝瑞的回答工作在這裏很好。我只是添加拆分以前的代碼：

$.clearFormFields = function(area) { 
    $(area).find('input[type="text"],input[type="email"],textarea,select').val(''); 
}; 

到：

$.clearFormFields = function(area) { 
       $(area).find('input#name').val(''); 
       $(area).find('input#phone').val(""); 
       $(area).find('input#email').val(""); 
       $(area).find('select#topic').val(""); 
       $(area).find('textarea#description').val(""); 
      }; 

Answer 7

這是必要的身體恢復到原始內容的變化。它不涉及一個表格，但我覺得它可能有用。如果原始內容是大量html，那麼很難將html串起來並將其存儲到變量中。對於VS 2015 /任何允許的換行符，Javascript並沒有絲毫好感。 所以我在這樣的默認模式存儲原始噸的html頁面加載：

var stylesString = $('#DefaultModal .modal-body').html(); 

這使得當按下模態原來的默認按鈕，我重用此內容（還有其他的按鈕，顯示其他內容相同的模式）。

$("#btnStyles").click(function() { 
    //pass the data in the modal body adding html elements 
    $('#DefaultModal .modal-body').html(stylesString); 
$('#DefaultModal').modal('show'); 
}) 

如果我把警報的styleString變量將都沒有休息的HTML無盡的路線，但對我來說，保持它VS編輯器。

下面是它在默認模態下在Visual Studio中的外觀。保存在字符串變量中是否自動（。html），或者通過在VS中手動，它將是一條大線：

<div class="modal-body" id="modalbody"> 


    <div class="whatdays"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">All Styles</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/ballroom.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Ballroom</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/blues.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Blues</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/contra.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Contra</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/countrywestern.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Country</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/english-country.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">English Country</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/israeli.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Israeli</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/lindyhop.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Lindy Hop/Swing</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/miscvariety.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Misch/Variety</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/neo-square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Neo-Square</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/polka.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Polka</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/salsa.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Salsa</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/scottish.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Scottish</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Square</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/tango.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Tango</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/waltz.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Waltz</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/wcswing.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">WCS</span></div> 
    <div class="whatdays" style="background-image: url('../../Responsive/zyedeco-gator.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Zydeco/Cajun</span></div> 

Answer 8

只需在模態隱藏時將空值設置到輸入字段。

$('#Modal_Id').on('hidden', function() { 
    $('#Form_Id').find('input[type="text"]').val(''); 
}); 

Answer 9

只需找到您的表格並在打開前清除！

$modal = $('#modal'); 
    $modal.find('form')[0].reset();