Question

我有以下表单在数据库中发布消息。但是，每当我点击输入按钮时，它就会冻结，没有任何反应。似乎找不到确切的问题。尝试将PHP更改为if (isset($_POST['submit']))并且提交按钮正常工作，所以我认为这可能是“textarea”设置的问题。谁知道我在哪里错了？

HTML：

<div id="message" class="messagearea">
    <form action="javascript:sendPM();" name="pmForm" id="pmForm" method="post">

                <input name="pm_send_id" id="pm_send_id" type="hidden" value="<?php echo $user['userID']; ?>" />
                <input name="pm_send_name" id="pm_send_name" type="hidden" value="<?php echo $user['userName']; ?>" />
                <input name="pm_receive_id" id="pm_receive_id" type="hidden" value="<?php echo $row['userID']; ?>" />
                <input name="pm_receive_name" id="pm_receive_name" type="hidden" value="<?php echo $row['userName']; ?>" />
                <input name="pm_timesent" id="pm_timesent" type="hidden" value="" />
        <a href="#close" title="Close" class="close">x</a>
        <h2>Send A Message</h2>
                <div id="interaction"></div>
                <br>
                <p>Message:</p>
                <textarea name="pmTextArea" id="pmTextArea"></textarea>
                <p>Attach A Video:</p>
                <input name="pmSubmit" type="submit" value="Submit" />
    </form>
  </div>

JAVASCRIPT：

<script type="text/javascript">

$('#pmForm').submit(function(){$('input[type=submit]', this).attr('disabled','disabled');});
  function sendPM(){
    var pmTextArea = $("#pmTextArea");
    var sendName = $("#pm_send_name");
    var sendID = $("#pm_send_id");
    var receiveName = $("#pm_receive_name");
    var receiveID = $("#pm_receive_id");
    var timesent = $("#pm_timesent");
    var url = "messages.php";
    if (pmTextArea.val() == ""){
      $("#interaction").html('Comment field is empty.').show().fadeOut(5000);
    }
    else {
    $.post(url,{ message: pmTextArea.val(), sendername: sendName.val(), senderid: sendID.val(), recname: receiveName.val(), recID: receiveID.val(), time: timesent.val()  },    function(data){
      $("#interaction").html('Message sent successfully.').show().fadeOut(5000);
      document.pmForm.pmTextArea.value='';
      });
    }
  }

</script>

PHP：

<?php
session_start();
require_once 'class.channel.php';
require_once 'dbconfig.php';

$user_message = new USER();

if (isset($_POST['message'])) {

  $to = ($_POST['recID']);
  $from = ($_POST['senderid']);
  $toName = ($_POST['recname']);
  $fromName = ($_POST['sendername']);
  $msg = htmlspecialchars($_POST['message']);
  $time = ($_POST['time']);
  $avatar = ($_SESSION['avatar']);

  $stmt = $user_message->runQuery("INSERT INTO inbox(send_id, receive_id, send_name, rec_name, comment, timesent, avatar) VALUES(?, ?, ?, ?, ?, ?, ?)");
  $stmt->bindValue(1,$from);
  $stmt->bindValue(2,$to);
  $stmt->bindValue(3,$fromName);
  $stmt->bindValue(4,$toName);
  $stmt->bindValue(5,$msg);
  $stmt->bindValue(6,$time);
  $stmt->bindValue(7,$avatar);
  $stmt->execute();

}

?>

Answer 1

尝试替换以下行

<form action="javascript:sendPM();" name="pmForm" id="pmForm" method="post">

到

<form action="javascript:void(0);" name="pmForm" id="pmForm" method="post">

和

$('#pmForm').submit(function(){$('input[type=submit]', this).attr('disabled','disabled');});
  function sendPM(){
    var pmTextArea = $("#pmTextArea");
    var sendName = $("#pm_send_name");
    var sendID = $("#pm_send_id");
    var receiveName = $("#pm_receive_name");
    var receiveID = $("#pm_receive_id");
    var timesent = $("#pm_timesent");
    var url = "messages.php";
    if (pmTextArea.val() == ""){
      $("#interaction").html('Comment field is empty.').show().fadeOut(5000);
    }
    else {
    $.post(url,{ message: pmTextArea.val(), sendername: sendName.val(), senderid: sendID.val(), recname: receiveName.val(), recID: receiveID.val(), time: timesent.val()  },    function(data){
      $("#interaction").html('Message sent successfully.').show().fadeOut(5000);
      document.pmForm.pmTextArea.value='';
      });
    }
  }

到

    $(document).on('submit','#pmForm',function() {
    $('input[type=submit]', this).attr('disabled','disabled');

    var pmTextArea = $("#pmTextArea");
    var sendName = $("#pm_send_name");
    var sendID = $("#pm_send_id");
    var receiveName = $("#pm_receive_name");
    var receiveID = $("#pm_receive_id");
    var timesent = $("#pm_timesent");
    var url = "messages.php";
    if (pmTextArea.val() == "") {
      $("#interaction").html('Comment field is empty.').show().fadeOut(5000);
    }
    else {
      var data = { message: pmTextArea.val(), sendername: sendName.val(), senderid: sendID.val(), recname: receiveName.val(), recID: receiveID.val(), time: timesent.val()  };
      $.post(url,data,    function(data){
      $("#interaction").html('Message sent successfully.').show().fadeOut(5000);
      document.pmForm.pmTextArea.value='';
      });
    }
});

如果它没有奏效，请告诉我。感谢

Answer 2

尝试以下代码段。在我的机器上工作得很好。希望它有效

$(document).on('submit','#pmForm',function() {
        $('input[type=submit]', this).attr('disabled','disabled');

        var pmTextArea = $("#pmTextArea");
        var sendName = $("#pm_send_name");
        var sendID = $("#pm_send_id");
        var receiveName = $("#pm_receive_name");
        var receiveID = $("#pm_receive_id");
        var timesent = $("#pm_timesent");
        var url = "messages.php";
        if (pmTextArea.val() == "") {
          $("#interaction").html('Comment field is empty.').show().fadeOut(5000);
        }
        else {
          var data = { message: pmTextArea.val(), sendername: sendName.val(), senderid: sendID.val(), recname: receiveName.val(), recID: receiveID.val(), time: timesent.val()  };
          $.post(url,data,    function(data){
          $("#interaction").html('Message sent successfully.').show().fadeOut(5000);
          document.pmForm.pmTextArea.value='';
          });
        }
    });

Answer 3

首先，您不需要从表单标记中调用js：

<form action="javascript:sendPM();" name="pmForm" id="pmForm" method="post">

变为：

<form name="pmForm" id="pmForm" method="post">

然后将事件挂钩到提交按钮并简化你的js：

$('input[type=submit]').click(function(e){
    e.preventDefault();
    $(this).attr('disabled','disabled');
    var pmTextArea = $("#pmTextArea");
    var sendName = $("#pm_send_name");
    var sendID = $("#pm_send_id");
    var receiveName = $("#pm_receive_name");
    var receiveID = $("#pm_receive_id");
    var timesent = $("#pm_timesent");
    var url = "messages.php";
    if (pmTextArea.val() == ""){
      $("#interaction").html('Comment field is empty.').show().fadeOut(5000);
    }
    else {
    $.post(url,{ message: pmTextArea.val(), sendername: sendName.val(), senderid: sendID.val(), recname: receiveName.val(), recID: receiveID.val(), time: timesent.val()  },    function(data){
      $("#interaction").html('Message sent successfully.').show().fadeOut(5000);
      document.pmForm.pmTextArea.value='';
      });
    }
});

您不需要您定义的功能。另请注意e.preventDefault阻止表单进行默认提交操作。

Answer 4

将你的js-code改为那个：

$('#pmForm').submit(function(e){
    // prevent default event handler
    e.preventDefault();
    // disable input
    $('input[type=submit]', this).attr('disabled','disabled');
    // call your function
    sendPM()
 });

然后你可以将表单的action属性设置为空。只是：

<form action="" name="pmForm" id="pmForm">

如果你在js中自己制造了所有魔法，那么你实际上并不需要这些属性。

但是如果你想支持没有javascript的浏览器，你应该添加＆＃34; action＆＃34;和＆＃34;方法＆＃34;属性根据您的API网址。因此，如果用户的浏览器支持JS，则所有这些attrubutes都将被忽略，但对于其他人，您的表单将以本机方式工作。

为什么这个表格没有发布数据？

4 个答案: