Question

我在我的网页上创建了一个新闻系统，我使用while循环在页面上回显我的新闻。有了新闻，我创建了一个新闻表单，我按名称定位它，我想使用jquery来处理结果。当我使用PHP它工作正常但我想避免重新加载页面提交表单和立即发表评论页面。

我的表单如下：

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

我的php代码如下所示：

if (isset($_POST['comments' . $row['news_id'] . '']) === true && empty($_POST['comment']) === false) {

global $user_data; 

$user_id    = $user_data['user_id'];
$connect_id = $_POST['news_id'];
$type       = $_POST['type'];
$time       = date('Y-m-d H:i:s');
$comment    = $_POST['comment'];
$comment    = sanitize($comment);

mysql_query("INSERT INTO `comments` (`user_id`, `connect_id`, `type`, `time`, `comment`) VALUES ('$user_id', '$connect_id', '$type', '$time', '$comment')");
}

如果我尝试做这样的事情：

$(".comment-btn").click(function(e) {
    e.preventDefault();

    var text = $('.comment-area').val();

    console.log(text);

    $('.comment-area').val('');
});

它仅定位第一个新闻的形式，而不是所有形式的目标。

有没有办法以不同的方式做到这一点???

感谢您的帮助。

Answer 1

您可以尝试以下内容：

$(".comment-btn").each(function(){
    $(this).click(function(e) {
        e.preventDefault();
        var commentArea = $(this).siblings(".comment-area");
        var text = commentArea.val();
        console.log(text);
        commentArea.val('');
    });
});

问题是虽然这个$(".comment-btn")返回了你提到的表单中所有按钮的数组，但是这个$(".comment-btn").click(...仅为数组的第一项附加了一个click事件处理程序。

$(function(){ 
    $(".comment-btn").each(function(){
        $(this).click(function(e){
            e.preventDefault();
            var commentArea = $(this).siblings(".comment-area");
            var text = commentArea.val();
            console.log(text);
            commentArea.val('');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

Answer 2

你可以使用jQuery comment-btn函数绑定＆＃34;点击＆＃34;事件到comment-area类的所有按钮。但是，确定要引用哪个comment-area非常重要。如果没有这样做，它只会删除类$(".comment-btn").on("click", function(e) { e.preventDefault(); var text = $(this).parent().find('.comment-area').val(); console.log(text); $(this).parent().find('.comment-area').val(''); });的所有字段/ textareas的值。

parent()

工作示例唯一的变化是按钮的输入类型从＆＃34;提交＆＃34;到＆＃34;按钮＆＃34;：
https://jsfiddle.net/L87n4Ljo/

同样，如果您想在点击按钮时提交特定表单，则必须通过使用htm = """<table cellpadding="5" cellspacing="0" class="borders" width="100%"> <tr> <th colspan="2"> Learning Outcomes </th> </tr> <tr> <td class="info" colspan="2"> On successful completion of this module the learner will be able to: </td> </tr> <tr> <td style="width:10%;"> LO1 </td> <td> Demonstrate an awareness of the important role of Financial Accounting information as an input into the decision making process. </td> </tr> <tr> <td style="width:10%;"> LO2 </td> <td> Display an understanding of the fundamental accounting concepts, principles and conventions that underpin the preparation of Financial statements. </td> </tr> <tr> <td style="width:10%;"> LO3 </td> <td> Understand the various formats in which information in relation to transactions or events is recorded and classified. </td> </tr> <tr> <td style="width:10%;"> LO4 </td> <td> Apply a knowledge of accounting concepts,conventions and techniques such as double entry to the posting of recorded information to the T accounts in the Nominal Ledger. </td> </tr> <tr> <td style="width:10%;"> LO5 </td> <td> Prepare and present the financial statements of a Sole Trader in prescribed format from a Trial Balance accompanies by notes with additional information. </td> </tr> </table> """ pd.read_html(htm, skiprows=2, flavor='bs4')[0]功能明确标识该表单来执行此操作。

Answer 3

试试这个，这里我们阻止默认表单提交，如果你不想重新加载页面，我认为你需要它。

$(".comments").on("submit", function(e) {

        e.preventDefault();
        var text = $(this).find('.comment-area').val();
        console.log(text);
        $(this).find('.comment-area').val('');

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

我可以使用jquery

3 个答案: