Question

如果你花时间为我看一下，请提前感谢。

我正在努力将表单数据发布到php脚本。目前输入字段#userreviewtitle工作正常，但textarea #comment和选项#hearts似乎没有发布。他们将通过jquery提醒，以便脚本正在接收它们，但不仅仅是发布。

我在这里做错了什么？热衷于解决这个问题并学习！

以下是表格：

    <div id="userreviewcontainer">

    <form id="userreview" name="userreview" action="" method="POST">
    <input type="text" id="userreviewtitle" name="userreviewtitle" placeholder="Review title">
    <textarea id="comment" name="comment" rows="4" placeholder="What is your opinion of <?php the_title(); ?>?"></textarea>
    <div id="userreviewrating">
    <select name="hearts" id="hearts">
    <option value="" disabled selected>Your Rating</option>
    <option  value="1">1 Heart</option>
    <option value="2">2 Hearts</option>
    <option value="3">3 Hearts</option>
    <option value="4">4 Hearts</option>
    <option value="5">5 Hearts</option>
    </select>
    </div>
    <div id="userreviewratingsubmit">   
    <?php if($_SESSION['login'] !== 1 || $_SESSION['logged_in'] !== "logged") {?>
    <a rel="prettyPhoto" href="#user_inline" class="button customreviewbutton">Submit</a>
   <?php }

    else if($_SESSION['login'] === 1 || $_SESSION['logged_in'] === "logged"){ ?>
    <input type="submit" value="submit" id="performreview" class="button customreviewbutton" alt="Submit"/>
    <?php } ?>


    </div>
    <div id="clear"></div>
    </form>

这是Jquery：

<script type="text/javascript">
$(document).ready(function($){



                $("#performreview").on('click',function(event) {
                //Create Variables
                var title = $('#userreviewtitle').val();
                var comment = $('#comment').val();
                var hearts =  $('#hearts').val();
                // Prevent form from submitting the normal way
                $("#userreviewnew").empty(); 

                $.post( "/wp-content/themes/xxxxxxx/process-comment.php", 
                {
                'userreviewtitle' : title,
                'comment' : comment,
                'hearts' : hearts
                },
                function( data ) {
                $('#userreviewnew').append(data);});

                event.preventDefault();
                });
});
</script>

如果你能指出我正确的方向，再次非常感谢

Answer 1

这两位评论者所说的是，您通过收集所有表单值并将其传递给Ajax调用来执行额外且不必要的步骤。

更好的方法是使用jQuery serialize()方法。您的代码看起来像这样（请注意，我更喜欢$.ajax语法，但仍然应该很容易理解）：

$('form').on('submit'), function(e) {
  e.preventDefault();

  $.ajax({
    type: 'post',
    data: $(this).serialize(),
    dataType: 'html',
    success: function(result) {
      $('userreviewnew').append(result);
    },
    error: function(xhr, status, err) {
     console.log(err);
    }
  });

我不完全确定你在会话状态中做了什么，但重要的部分是$.ajax调用中以data开头的行。如果在制作此模型后仍未达到预期值，请更新。

JQUERY $ .post表单到PHP脚本

1 个答案: