3

編集: テキスト入力を使用するように例を単純化しました。同じエラー。入力がフォームから削除されると、フォームの送信に失敗します。編集: Firefox 14 で複製されました。Chrome は同じ動作をしません。

フォームからファイル入力要素を追加および削除するための jquery を使用した複数ファイル アップロード フォームがあります。入力の 1 つを削除すると、form.submit() 関数は続行しません。以下は、「テキスト」入力を使用した簡略化されたコードです。そしてhttp://jsfiddle.net/carbontax/rMMuE/のフィドル

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

脚本

    $('#submit').click(function() {
        $('#form-foo').submit();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });
4

3 に答える 3

3

Satya Teja は、送信ボタンをフォーム内に配置するという有益な提案をしましたが、それが機能する理由はわかりません。私の場合、別のイベントの結果に基づいて、フォームを間接的に送信する必要があります。だからここに解決策があります。

HTML: フォーム内に非表示の送信ボタンを追加する

    <form id="form-foo" method="POST">
        <div id="input-container-container">
       </div>
       <!-- workaround to allow submit after deleting a form element -->
       <input type="submit" id="form-foo-submit" style="display: none"/>
    </form>
    <input type="button" id="add-text-input" value="ADD TEXT INPUT">
    <input type="button" id="submit" value="SUBMIT">

脚本。フォームで submit() を呼び出す代わりに、非表示の送信ボタンで click() を呼び出します。Firefox、Chrome、さらには IE6 でも動作します

    $('#submit').click(function() {
        // Instead of calling $('#form-foo').submit()
        $('#form-foo-submit').click();
    });

    $("#add-text-input").click(function() {
        var div = $('<div/>', {
            'class': 'input-container'
        }).append($('<button/>', {
            'class': 'delete-text-input',
            html: "X"
        }));
        var input = $('<input/>', {
            type: 'text',
            name: 'texts',
            'class': 'input-text'
        }).appendTo(div);
        div.appendTo($('#input-container-container'));
    });

    $('#form-foo').on('click', 'button.delete-text-input', function(e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });
于 2012-07-20T17:37:25.683 に答える
1

フォームの外側ではなく、フォームの内側に送信してください。

<form id="form-foo" method="POST">
        <div id="input-container-container">
        </div>

    <input type="button" id="submit" value="SUBMIT">
    </form>

参加する

于 2012-07-20T16:08:38.493 に答える
1

入力はフォームの外側にあるため、どれも送信されません。送信するすべてのデータがform タグの間にあることを確認してください。

于 2012-07-20T16:11:31.487 に答える