带有 3 次提交的 HTML 表单，但 JavaScript 无法正常工作

Question

我正在为我的论坛编写 BBCodes 部分，因此我有三个提交按钮：一个用于颜色选择器，一个用于插入键入的 url，一个用于实际发布论坛。

我正在使用带有 onclick 的按钮：url 和颜色选择器使用提交按钮将文本插入到 textarea 中，最终提交发布表单。按最终提交时出现以下错误：

未捕获的类型错误：document.getElementById(...).submit 不是函数

附言我已经删除了简单 BBCode 的大部分 's 以减少 html 下的代码量。

注意：我有另一个与此类似的发布类，它尚未添加 bbcode，用于发布表单的 javascript 工作得非常好 - 因此我猜测 3 个提交按钮会导致这种情况。

html:

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="get" 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-addons">
        <input type="button" class="bbc_button" name="color" value="Choose a Font Color" onclick="bbstylecolor()" title="Font color: [color=red]text[/color] or [color=#FF0000]text[/color]">
        <div id="colour_palette" style="display:none;">
            <br>
            <input type="color" id="color" value="#ff0000">
            <input type="button" name="submit" value="Pick" onclick="bbcolor();">
            <br>
        </div>
        <br>
        <input type="button" class="bbc-button" name="bbcode1" value=" " style="background-image:url('../images/BBC/bold.gif');" onclick="bbstyle(1);" title="Bold Text: [b]text[/b]">
        <input type="button" class="bbc_button" name="bburl" value=" " style="background-image:url('../images/BBC/url.gif');" onclick="bburl();" title="List item: [url]http://url[/url] or [url=http://url]text[/url]">
        <div class="urlforms" id="url_div" style="display:none;">
            <br>
            <table style="margin: 0 auto;">
            <tr>
            <td>Enter a site URL:</td>
            <td width="200px";><input type="text" id="url_input" placeholder="http://themooliecommunity.com/"></td>
            </tr>
            <tr>
            <td>Optional description:</td> 
            <td width="200px";><input type="text" id="url_input_title" placeholder="The Moolie Community"></td>
            </tr>
            </table>
            <input type="button" name="submit" value="Insert into message" onclick="bburlpick();">
            <input type="button" name="cancel" value="Exit" onclick="bburl();">
        <br>
        </div>
        <br>
        <input type="button" class="bbc_button" name="bbcode14" value=" " style="background-image:url('../images/BBC/spoil.gif');" onclick="bbstyle(14);" title="Spoiler: [spoil]Text[/spoil]">
    </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>
    <br>
</form>

Javascript：

最终提交按钮：

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(); //This is where the error is coming
  }
}

网址提交按钮js：

function bburlpick() 
{
    var e = document.getElementById("url_div");
    var text = document.getElementById("post_text").value;
    var url = document.getElementById("url_input").value;
    var url_title = document.getElementById("url_input_title").value;

    if (url_title == "")
    {
        var bburl = "[url]" + url + "[/url]";
    }
    else
    {
        var bburl = "[url=" + url + "]" + url_title + "[/url]";
    }
    text += bburl;
    document.getElementById("post_text").value = text;
    document.getElementById("post_text").focus();
    e.style.display = "none";
}

颜色提交按钮：

function bbcolor() 
{
    var text = document.getElementById("post_text").value;
    var color = document.getElementById("color").value;
    var bbcolor = "[color=" + color + "][/color]";
    text += bbcolor;
    document.getElementById("post_text").value = text;
    document.getElementById("post_text").focus();
}

Answer 1

问题是您已将其他按钮命名为与submit 相同的形式，因此错误不是得到.submit()，而是引用submit button 当然那些不是function 所以尝试重命名他们尝试不同的东西，然后尝试

Answer 2

改变

<input type="button" name="submit" value="Pick" onclick="bbcolor();">

到

<input type="button" name="btnSubmit" value="Pick" onclick="bbcolor();">

问题是您的按钮被命名为“提交”

“提交不是函数”意味着您将提交按钮或其他元素命名为提交。将按钮重命名为 btnSubmit，您的呼叫将正常工作。只要确保你重新命名所有名为“提交”的按钮，你就有很多。

看看这个： http://www.chovy.com/javascript/javascript-error-submit-is-not-a-function/