我有一些輸入的表格。我想在提交表單時顯示加載 gif 并在提交表單時隱藏。我使用 php 發送詳細信息，一旦提交，它就會顯示響應，但是在提交表單時，我想將 gif 顯示為加載屏幕，并在完成后隱藏。$(function() { // Get the form. var form = $('#ajax-contact'); // Get the messages div. var formMessages = $('#form-messages'); // Set up an event listener for the contact form. $(form).submit(function(e) { // Stop the browser from submitting the form. e.preventDefault(); // Serialize the form data. var formData = $(form).serialize(); // Submit the form using AJAX. $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData }) .done(function(response) { // Make sure that the formMessages div has the 'success' class. $(formMessages).removeClass('error'); $(formMessages).addClass('success'); // Set the message text. $(formMessages).text(response); // Clear the form. $('#name').val(''); $('#email').val(''); $('#subject').val(''); $('#message').val(''); }); });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter Email" id="email" value="[email protected]" name="email" required> </div> <div class="form-group"> <textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea> </div> <button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button></form>
1 回答
長風秋雁
TA貢獻1757條經驗 獲得超7個贊
好的，首先你可以使用模態并在其上添加 gif 文件?；蛘吣梢院唵蔚貙D像添加到要添加的位置。在這里，我將使用模態。
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
var result = $.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
});
// Here, you have to add, what you want to do right after data is sent.
$("#modal").css("display", "flex");
// Overflow of main body to hidden
$("body").css("overflow", "hidden");
result.done(function(response) {
// Now, you can hide modal or loading gif
$("#modal").css("display", "none");
// Overflow of main body to hidden
$("body").css("overflow", "auto");
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Reset form at once instead
$("#ajax-contact").reset();
});
});
});
#modal {
display: none;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Email" id="email" value="[email protected]" name="email" required>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>
</div>
<button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<!-- My modal for modal -->
<div id="modal">
<img width=200 src="https://thumbs.gfycat.com/BogusEmptyBrontosaurus-small.gif" alt="Loading-gif"/>
</div>
在js中，我將結果添加為ajax對象。并且，數據發送后，我們立即顯示 gif 文件。并且，在我們給出數據后，我們將再次隱藏 gif div。隨意詢問?。。。。。?！
- 1 回答
- 0 關注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消