选择一个id jquery而不重复

时间:2018-03-12 23:26:41

标签: javascript jquery ajax

我想系统评论(如facebook)系统简单,但我不知道如何选择一个ID进行提交。 第一种形式正确,但其他形式 总是我得到第一个表单的data-id和comment_input为空。

代码html

<form method="POST" class="form_add" data-id='<?php echo trim(htmlspecialchars($row['id_post'])); ?>'>

<input type="text" name="comment" class="comment_input" >
</form>

代码jquery

$('.form_add').each(function(i){
    $(this).attr('id','form_'+i);


$('#form_'+i).on('submit',function(e){
        e.preventDefault();

var query = $('.comment_input').val();


var queryid = $(this).data('id');

$.ajax({
        method : 'POST',
        data : {commentPost:query,idpost:queryid},
        url : 'traitementCommentPost.php',
        success : function(data)
        {

            $('.fetch_all_comment').prepend(data)  ;        
        }

    });

    });

});

代码php

if($_SERVER['REQUEST_METHOD'] === 'POST') 
{

 if(isset($_POST['commentPost']) && !empty($_POST['commentPost'])  )

{
$commentPost = (string) trim(htmlspecialchars($_POST['commentPost']));
$idpost = (int) trim(htmlspecialchars($_POST['idpost']));
$id_user = (int)trim(htmlspecialchars($_SESSION['user_id']));

$commentPostL = strlen($commentPost);


if($commentPostL <1 || $commentPostL > 200) 
{
            // ajouter plus du détails 

}
else 
{

if(preg_match("/^([\s*a-zA-Z0-9é\â\ô\î\'\û\-\+\.\=\/\?\!\:\;\[\]\,\_\(\)\'\%\ç\è\ê\#\Ω\<\>\x{0600}-\x{06FF}]+\s*)+$/u",$commentPost)) 
{
$stmt=$connect->prepare('INSERT INTO
                                                        comment_post(id_post,id_user,comment,date_comment)
                                                             VALUES(:a,:b,:c,NOW())');
$stmt->bindValue(':a',$idpost,PDO::PARAM_INT);
$stmt->bindValue(':b',$id_user,PDO::PARAM_INT);
$stmt->bindValue(':c',$commentPost,PDO::PARAM_STR);

$stmt->execute();   

}  // preg match
}  // else 
}}

第一种形式正确,但其他形式 我总是得到第一个表单的data-id和comment_input为空

1 个答案:

答案 0 :(得分:0)

我会通过将ID存储在隐藏的输入元素中来简化代码。

<form method="POST" class="form_add">
    <!-- name your inputs based on what you will be sending back -->
    <input type="text" name="commentPost" class="comment_input" />
    <input type="hidden" name="idpost" value="<?php echo trim(htmlspecialchars($row['id_post'])) ?>" />
</form>

然后在动态创建元素时使用delegated event handler。这将基本上将事件处理程序附加到添加到DOM的现有元素和新元素。

在处理程序中,您可以使用.serialize()获取所有提交的值。

$(document).on('submit', '.form_add', function(e){
    e.preventDefault();
    $.ajax({
        method: 'POST',
        data: $(this).serialize(),
        url: 'traitementCommentPost.php',
        success : function(data) {
            $('.fetch_all_comment').prepend(data)  ;        
        }
    });

    // or shorter to just do
    // $.post('traitementCommentPost.php', $(this).serialize(), function (data) { /* etc */ });
});