Question

所以我尝试在以下应用程序的基础上构建，之前我在下面有这个功能<form>标记。

它有点像眼睛，但它基本上只是inputs中的table用于文体目的，由form包围：

<form method='POST' action='http://localhost:8080/hw4/submission'
            form id="form" name="form">
    <table>
    <tr>
        <td>
            <b>Claim *</b>
        </td>
        <td>
            <input id="claim" name='claim' class="text" size="35" type="text" placeholder="What's your assertion?">
        </td>
    </tr>
    <tr>
        <td>
            <b>Argument/Evidence *</b>
        </td>
            <td>
                <textarea id="arg" name='arg' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="font-size:12px; color:#FF0099;x"> &lowast; - Required field
            </td>
        </tr>
        </table>
    <!-- Form submit -->
        <p><input type='button' value='Submit' style='width:100px' onclick='return checkFields();'></p></form>

checkFields()是一个Javascript函数，只检查空输入字段，如果它们不是全空，则调用document.getElementById("form").submit();

在检查源代码时，我的浏览器（Chrome，Firefox）会说<form>标记已打开，但它仍会执行POST调用而没有任何问题。

然后我尝试添加一个额外的输入字段，如下所示：

<form method='POST' action="http://localhost:8080/hw5/submission"
            id="form" name="form">
            <table width="550px">
            <tr>
                <td>
                <b>Name</b>
                </td>
                <td>
                    <input id="username" class="text" size="45" type="text" placeholder="This will display with your claim">
                </td>
            </tr>
            <tr>
                <td>
                <b>Claim</b>
                </td>
                <td>
                    <input id="claim" class="text" size="45" type="text" placeholder="What's your assertion?">
                </td>
            </tr>
            <tr>
                <td>
                <b>Argument/Evidence</b>
                </td>
                <td>
                    <textarea id="arg" class="text" cols="37" rows="2" placeholder="Go ahead, prove yourself!"></textarea>
                </td>
            </tr>
            </table>
            <!-- Form submit -->
            <input id="submit" type="button" value="Submit" style="width:100px" onclick="return checkFields();">
    </form>

注意我真正改变的是我添加了<input id="username">。在检查浏览器中的代码时，它说<form>已关闭（虽然eclipse说它不是）并且它不会提交。

我尝试用<input>包裹每个<form id="form"></form>本身，这贴上了日食的警告，但在尝试输出任何请求参数时，它会返回{{1} }。

我在我的智慧结束时试图了解这里发生的事情。

Answer 1

不要使用Snippet，请使用Plunker

有一些关键的拼写错误导致一切失败：

每个<form>分为两行，但如果修复后就无所谓......
...因为每个表单在代码中都有一个额外的字词：form
color:#FF0099"之后是x;，看起来像px。

添加了一些内容：

每个<form>都有一个功能正常的测试服务器method和target属性指向...
...一个新的iframe。它的目的是显示表格发送的数据。
将所有<input type='button'...>更改为<input type='submit'...>。现在有了真正的提交按钮，您不再需要任何额外的JS / jQ来提交表单。

的 PLUNKER

段

＆＃13;
＆＃13;
<form method='POST' action='http://www.hashemian.com/tools/form-post-tester.php/form1' id="form1" name="form1" target='win1'> <table> <tr> <td> <b>Claim *</b> </td> <td> <input id="claim1" name='claim1' class="text" size="35" type="text" placeholder="What's your assertion?"> </td> </tr> <tr> <td> <b>Argument/Evidence *</b> </td> <td> <textarea id="arg1" name='arg1' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea> </td> </tr> <tr> <td colspan="2" style="font-size:12px; color:#FF0099"> &lowast; - Required field </td> </tr> </table>  <p><input type='submit' style='width:100px'></p></form> <iframe src='about:_blank' id='win1' name='win1' width='200' height='50px'></iframe>  <form method='POST' action='http://www.hashemian.com/tools/form-post-tester.php/form2' id="form2" name="form2" target='win2'> <table> <tr> <td> <b>Claim *</b> </td> <td> <input id="claim2" name='claim2' class="text" size="35" type="text" placeholder="What's your assertion?"> </td> </tr> <tr> <td> <b>Argument/Evidence *</b> </td> <td> <textarea id="arg2" name='arg2' class="text" cols="37" rows="4" placeholder="Go ahead, prove yourself!" style="resize:none; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"></textarea> </td> </tr> <tr> <td colspan="2" style="font-size:12px; color:#FF0099"> &lowast; - Required field </td> </tr> </table>  <p><input type='submit' style='width:100px'></p></form> <iframe src='about:_blank' id='win2' name='win2' width='200' height='50px'></iframe>  <form method='POST' action="http://www.hashemian.com/tools/form-post-tester.php/form3" id="form3" name="form3" target='win3'> <table width="550px"> <tr> <td> <b>Name</b> </td> <td> <input id="username3" class="text" size="45" type="text" placeholder="This will display with your claim"> </td> </tr> <tr> <td> <b>Claim</b> </td> <td> <input id="claim3" class="text" size="45" type="text" placeholder="What's your assertion?"> </td> </tr> <tr> <td> <b>Argument/Evidence</b> </td> <td> <textarea id="arg3" class="text" cols="37" rows="2" placeholder="Go ahead, prove yourself!"></textarea> </td> </tr> </table>  <input id="submit3" type="submit" style="width:100px"> </form> <iframe src='about:_blank' id='win3' name='win3' width='200' height='50px'></iframe>
＆＃13;
＆＃13;
＆＃13;

为什么<form>提交<form>即使它被认为是关闭的？

1 个答案:

不要使用Snippet，请使用Plunker

段