Question

我有一个表格

rest_framework_jwt

这是我的JavaScript

<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" style="background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; color: #3897f0; font-weight:600;"class="submit">
      comment
    </button>
  </div>
</form>

我希望每当用户单击此按钮时应当弹出一个警报，并在该表单的后面添加注释，表明用户已编写了此代码，可以正常工作，但是现在我不知道发生了什么，它突然停止工作了，你们能帮我我其余的jquery代码是否在工作，而不是此代码

Answer 1

$（document）.ready（function（）{

$('.submit').click(function () {
  $post = $(this);
  var username2 = $(this).parent().find("#username").val();
  var comment2 = $(this).parent().find("#comment").val();
  $commentsec = $(this).closest("form").find(".comment"); // here you missed to get comment element too.
  var dataString = {
      id: $(this).parent().find("#id").val(),
      username: $(this).parent().find("#username").val(),
      uid: $(this).parent().find("#uid").val(),
      comment: $(this).parent().find("#comment").val()
  };
  // remaining printing stuff goes here
});

}）;

Answer 2

$(document).on('click', '.submit', function () {

    $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };

    $.ajax({
        url: 'comments.php',
        data: dataString,
        method: "POST",
        success: function () {
            alert("alert");
            $commentsec.append('<p class="written"><a href="users.php?id= <?php echo $id3 ?>"><b>' + username2 + '</b> </a>' + comment2 + "</p>" + '<div class="dropdown"><img src="ellipsis.png" class="dots"><div class="dropdown-content"><br><p  class="delete" data-delete=<?php echo $commentid; ?>">delete</p></div></div>');
            $(" #comment").val("");
        },
        error:function(err){
        console.log(err);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" style="background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; color: #3897f0; font-weight:600;"class="submit">
      comment
    </button>
  </div>
</form>

您应该在ajax配置中添加方法。

Answer 3

 $(document).on('click', '.submit', function () {

    $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };
    //your ajax request here
    console.log(dataString)
});

<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" class="submit">
      comment
    </button>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

$(document).on('click','.submit',function(e){
     e.preventDefault();
     $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };
   //Get values of input fields from DOM structure 
   var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
         comment: $(this).parent().find("#comment").val()
    };

   $.ajax({
   url:'comments.php',  
   data:dataString,
   success:function(){
 $commentsec.append('<p class="written"><a href="users.php?id= <?php echo $id3; ?>"><b>'+username2+'</b> </a>'+comment2+"</p>"+'<div class="dropdown"><img src="ellipsis.png" class="dots"><div class="dropdown-content"><br><p  class="delete" data-delete=<?php echo $commentid; ?>">delete</p></div></div>');
     $(" #comment").val("");   
   }
   });
});

此代码对我有用，我不知道

jQuery的按钮不工作，我不知道为什么

4 个答案: