0

だから私はいくつかの囲みフォームと2つのネストされたフォームを手に入れました。2つのネストされたフォームはbuttonclickでajaxを使用して評価され、外部フォームには送信ボタンがあります。

簡略化されたマークアップ：

<form id="form1" action="default.asp">
    //some fields inside a list with unnecessary text
    <input type="text" name="shortdesc"/>
    <form id="deleteform" action="delete.asp">
       //dynamically generated checkboxes
       <input type="checkbox" name="deleter" value="somedocument.txt">somedocument.txt<br>
       <input type="checkbox" name="deleter" value="some_otherdocument.doc">some_otherdocument.doc<br>
       <input type="button" onclick="console.log(this.form); ajaxcall('delete.asp', this.form);" />
    </form>
    <form id="addfileform" action="upload.asp">
        <input type="file" name="file"/>
        <input type="button" onclick="console.log(this.form); ajaxcall('upload.asp', this.form);" />
    </form>
    <input type="button" value="send" onclick="dataValidation(form1),"/>
</form>

チェックボックスをオンにしてフォームを「送信」すると、コンソールは外部フォームをログに記録しますが、ファイルを選択して「送信」すると、正しいフォームがログに記録されます。

誰かがこれを修正する理由や方法に光を当てることができますか？

明確にするために：これは、いくつかのテキストフィールドを送信してCEOに変更を求めることができるサイト（ HTML5ではない）であると想定されています。私は今、ファイル追加を実装することになっています。

フォームはaspclassicで処理および作成されます（苦痛ですが... ）。 2つのリダイレクト（アップロード用とアップロードされたファイルの表示用）全体でフォームデータ全体を保持することにあまり熱心ではないためです。 ）私はAJAXに行くことにしました。

参考：console.log（document.getElementById（'deleteform'））は未定義を返します

4

3 に答える 3

3

HTMLフォームはネストできません。ここで何が起こるかというと、ブラウザは最初の<form id="form1">タグを認識しますが、ネストされたタグを無視し<form id="deleteform">ます。

次に、を確認</form>して閉じます<form id="form1">。その後、<form id="addfileform">タグを確認して新しいフォームを開始し、次のフォームで閉じ</form>ます。

次に、最後の<input type="submit" value="send">ボタンがあります。これは期待どおりに解析されますが、フォーム内にはまったくありません。

</form>最後に、それが無視する余分なものが最後にあります。

言い換えれば、それはあなたが書いたのと同じです：

<form id="form1" action="default.asp">
    <input type="checkbox" name="deleter" value="somedocument.txt">somedocument.txt<br>
    <input type="checkbox" name="deleter" value="some_otherdocument.doc">some_otherdocument.doc<br>
    <input type="button" onclick="console.log(this.form); ajaxcall('delete.asp', this.form);" />
 </form>
<form id="addfileform" action="upload.asp">
    <input type="file" name="file"/>
    <input type="button" onclick="console.log(this.form); ajaxcall('upload.asp', this.form);" />
</form>
<input type="button" value="send" onclick="dataValidation(form1),"/>

このようなことがいつ発生するかを確認する簡単な方法の1つは、ブラウザーでDOMインスペクターを使用することです。これは、ブラウザがHTMLコードから生成したDOMを示しています。これは、驚くこともあります。他の人が述べているように、HTMLコードも検証する必要があります。

を試してみると、上記のようにDOMに組み込まれたことがないためconsole.log(document.getElementById('deleteform'))、ログに記録されます。undefineddeleteform

于 2013-03-27T08:47:49.913 に答える
0

異なるアクションを指している場合は、1つのHTMLに複数のフォームを含めることができます。フォームタグのネストは禁止されています

このW3仕様を確認してください

http://www.w3.org/TR/xhtml1/#prohibitions

于 2013-03-27T08:47:19.847 に答える
0

一般的に、ネストされたフォームは使用しないでください。何らかの理由でネストされたフォームを使用する必要がある場合は、おそらく、Webアプリケーションのアーキテクチャを変更することを検討する必要があります。

たとえば、上記の例では、ネストされたフォームをフィールドセットに置き換え、クリックイベントを介してそれぞれの送信ボタンを直接制御し、ajax呼び出しに必要な情報だけを取得できます。

于 2013-03-27T09:18:56.370 に答える