javascript - 使用javascript后提交按钮帖子未发送

Question

我有 3 个单独的表单，每个表单都有自己的提交按钮(删除了所有其他不需要的表单代码行):

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
    <input type="button" name="submitreply" id="submitreply" value="Submit" onclick="replyPostSubmit();"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
    <input type="button" name="submitedit" id="submitedit" value="Submit" onclick="editPostSubmit();"/>

我在提交之前使用 JavaScript 来验证表单数据是否已填写，但是因为使用 JavaScript，按钮中的 POST 数据并未发送。

为每个表单提交 JavaScript:

document.getElementById("postingTopicSub").submit();
document.getElementById("postingTopicReply").submit();
document.getElementById("postingTopicEdit").submit();

在我的数据页面上，我使用 isset 使 SQL 查询运行的形式正确:

// User meets all conditions and posts a topic
    if (isset($_POST['topicID'], $_POST['subject'], $_POST['post_text'], $_SESSION['username'], $_POST['submittopic']) && !isset($_POST['forumID'])) {

// User meets all conditions and posts a reply
    if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitreply'], $_POST['forumID'], $_POST['subject'])) {

// User meets all conditions and edits a post
    if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitedit'], $_POST['forumID'], $_POST['postID'], $_POST['subject'])) {

我的问题:

• 有没有办法让我的方法将 3 个 SQL 查询分开 具体表格
• 有没有办法发送提交的 POST，即使它正在被提交 通过 JavaScript 提交？
• 还有其他我没见过的方法吗？

提前致谢。

编辑:

完整表格(无 bbcodes)

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
       <div class="post-subject">
        Subject:
        <input type="text" name="subject" id="subject" />
    </div>

    <div class="post-textarea">
        <textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
    </div>
    <div class="post-button">
        <input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/> 
    </div>
</form>

用于表单验证的完整 JS:

function forumssubmit() 
{
    var subject = document.getElementById("subject").value;
    var text = document.getElementById("post_text").value;

    if(subject=="" || text=="")
    {
        alert('Please fill in the subject and text');
        return false;
    }
        return true;
}

function topicPostSubmit()
{
  if(forumssubmit())
  {
    document.getElementById("postingTopicSub").submit();
  }
}

编辑2::

新的js:

function forumssubmit() 
{
    var subject = document.getElementById("subject").value;
    var text = document.getElementById("post_text").value;

    if(subject=="" || text=="")
    {
        alert('Please fill in the subject and text');
        return false;
    }
    return true;
}

function topicPostSubmit()
{
  if(forumssubmit())
  {
    //document.getElementById("postingTopicSub").submit();
    return true;
  }
}

新按钮:

<input type="button" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit();"/> 

Answer 1

如果您真的只是“使用 Javascript 来验证表单数据是否已填写”，您可以向提交按钮的 onclick 添加返回。然后，您将能够使用它们来提交表单，而不是 Javascript。

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
    <input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit()"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
    <input type="submit" name="submitreply" id="submitreply" value="Submit" onclick="return replyPostSubmit()"/>

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
    <input type="submit" name="submitedit" id="submitedit" value="Submit" onclick="return editPostSubmit()"/>

然后在 JavaScript 中，如果状态不好则返回 false。

function editPostSubmit(){
  if(data == 'bad')
    return false;

  return true;
}

我还想确保您在后端进行数据验证。我们不想允许在您的页面上进行 SQL 注入(inject)。

编辑: 更新了您修改后的代码。

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
   <div class="post-subject">
    Subject:
    <input type="text" name="subject" id="subject" />
</div>

<div class="post-textarea">
    <textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
</div>
<div class="post-button">
    <input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return forumssubmit();"/> 
</div>
</form>