0

我有这个小问题，关于我正在提交的 ajax 表单（成功）。

我遵循了一个教程（http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/），它提交的表单只是一个标准联系表。但是我正在通过表单发送消息，因此我想向用户显示一条消息，然后让用户能够在点击时删除该消息。

  1. 表单发送消息。
  2. 用户收到反馈（ajax）
  3. 显示后如何删除此 div？

HTML

<div class="module send-message" id="send-message">
                    <form name="send" class="pure-form pure-form-stacked">
                        <fieldset>

                        <label for="recipient" id="recipient_label">Your recipient(s):</label>
                        <input type="text" name="recipient" id="recipient" class="pure-input-1 input-tags"></input>                     
                        <label class="error" id="recipient_error" for="recipient">This field is required.</label>  

                        <label for="message">Your message:</label>
                        <textarea name="message" maxLength="120" rows="4" class="pure-input-1" id="message"></textarea>
                        <label class="error" for="message" id="message_error">This field is required.</label>  

                        <p id="counter" style="margin-bottom: 25px;"><span>0</span> characters of 120</p>

                        <input type="submit" name="submit" id="submit_btn" class="button btn-large btn-warning" value="Pipit"></input>
                        </fieldset>

                    </form>
                </div>

JS/jQuery：

var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "process.php",  
      data: dataString,  
      success: function() {  
        $('#send-message').html("<div id='feedback'></div>");  
        $('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn();  
      }  
    });  
    return false;     
  });  
});

:: 更新 :: 感谢这个很棒的网站上的许多人，我让它工作了！

但是，有两个小缺陷：

  1. 我希望刷新表单（从中删除所有数据）。
  2. 首次显示反馈消息时，它会按原样消失。但是，当我重新提交表单时，反馈表会一直停留在底部。

any1 可以在这里帮忙吗？

非常感谢！

4

6 回答 6

2

像这样的东西应该适合你：

更改这行代码：

$('#send-message').html("<div id='feedback'></div>");

到：

$('#send-message').html("<div id='feedback' onclick='hideMe()'></div>");

然后加：

var hideMe = function () {
    $("#feedback").hide();
}

如果你只是想隐藏它。如果要完全删除它，请使用 .remove() 而不是 .hide();

var hideMe = function () {
    $("#feedback").remove();
}
于 2013-11-12T13:59:04.087 回答
1

我会这样做，单击时首先将其淡出，然后将其完全从 dom 中删除。

var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;  
    //alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "process.php",  
      data: dataString,  
      success: function() {  
        $('#send-message').html("<div id='feedback'></div>");  
        var $feedback = $('#feedback');
        $feedback.html("<h2>Your message has been sent!</h2>").append("<p>Click anywhere to hide this message.</p>");
        $feedback.on("click", function () {
               $(this).fadeOut(function () {
                     $(this).remove();
               });
            });              
        $feedback.fadeIn();  
      }  
    });  
    return false;     
  });  
});
于 2013-11-12T14:05:11.310 回答
0

您可以像这样将点击功能附加到 div：

$('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn()
        .click(function(){    
            // Hide the div and remove it
            $(this).fadeOut(function(){
                $(this).remove();
            });
        )};

或者，如果您只想自动隐藏消息，您可以使用 jQuerydelay()函数或简单地使用setTimeout. 以下是您如何使用该delay()功能：

$('#feedback').html("<h2>Your message has been sent!</h2>")  
        .append("<p>Click anywhere to hide this message.</p>")  
        .hide()  
        .fadeIn()
        .delay(1000)
        .fadeOut();

或者，这是一个使用函数的示例setTimeout：

setTimeout(function(){
    $('#feedback').hide();
}, 1000);

这里1000与执行代码之前等待的毫秒数有关。

1000 miliseconds = 1 second

编辑：

好的，为了确保您没有替换需要附加消息的表单，如下所示：

$('#send-message').append("<div id='feedback'></div>");

您还可以暂时隐藏表单，然后在您的用户关闭反馈消息后显示它：

$('#send-message form').hide();

// Add show form to the click function
.click(function(){    
            // Hide the div and remove it
            $(this).fadeOut(function(){
                $(this).remove();
                $('#send-message form').show();
            });
        )};

进一步编辑：

// Simple jQuery Plugin
$.fn.clearForm = function() {
    $this = this;

    // Find inputs
    $this.find('input[type=text], select').val('');
    $this.find('input[type=checkbox]').removeAttr('checked');
};

// Usage
$('#form').clearForm();

这里的例子：http: //jsfiddle.net/dUQ9T/5/

于 2013-11-12T13:57:13.113 回答
0

像这样的东西：

$('#feedback').on('click',function() { $(this).hide(); });

为您的反馈 div 分配一个单击事件，使其在单击时隐藏。

于 2013-11-12T13:58:35.433 回答
0

试试这个，

$('#send-message').html("<div id='feedback' onclick='$(this).hide();'></div>");
于 2013-11-12T14:00:24.547 回答
0

如果您想为最终用户提供#feedback在文档中单击的任何位置隐藏 div 的可能性，您可以向文档添加事件处理程序并在#feedback发生单击事件时隐藏 div：

// jQuery
$(document).on('click', function(){
    $('#feedback').hide();

    // to show the form again
    $('#formID').show();
}); 

// no jQuery
document.addEventListener('click', function() {
    document.getElementById('feedback').style.display = none;

    // show the form again
    document.getElementById('formID').style.display = block;
});

如果您希望用户在单击 div 时关闭该#feedbackdiv，只需更改侦听该单击事件的元素：

// jQuery
$('#feedback').on('click', function(){
    $(this).hide();

    // show the form
    $('#formID').show();
}); 

// no jQuery
document.getElementById('feedback').addEventListener('click', function() {
    this.style.display = none;

    // if you want to show the form
    document.getElementById('formID').style.display = block;
});

EDIT1：我已经更新了我的答案，以便在反馈 div 隐藏后立即显示表单 div。如果收到反馈后您的表单 div 为空，您可以在脚本开头缓存 for m HTML，或者将该 div 复制到变量中并在重新显示表单时将其附加到 div。

于 2013-11-12T14:02:00.043 回答