1

私はこのコードを持っています

<html>
<include jquery>
<script>
  function crea()
  {
     var html = '<form method="get" id="popUpForm" name="popUpForm" action="form_ricorda_dati.php"><hr /><input type="hidden" name="mio" value="1" />input3<input type="text" name="input3" value="" /><br />input4<input type="text" name="input4" value="" /><br /><input type="submit" id="11" value="Procedi" /></form><br /><a href="" onClick="prova()">submit</a>';
     var div = document.getElementById('cont');
     div.innerHTML = html;
  }

  function prova()
  {
     $('#popUpForm').submit();
  }

</script>
<body>
< a href="#" onClick="crea()">lancia funzione JS</a><br /><br />
<div id="cont"></div>
</body>
</html>

このコード：

  1. それをクリックする<a href="#" onClick="crea()">と、フォームが「表示」されます<div id="cont">
  2. 方法1：クリックすると、方法2：を<a href="" onClick="prova()">submit</a>クリック$('#popUpForm').submit();
    します。<input type="submit" id="11" value="Procedi" />

問題：

  1. クリック<input type="submit" id="11" value="Procedi" />すると、ページをリロードして、正しいクエリ文字列（フォームaction="get"）が表示されます。再読み込みされたページで、フォームを「表示」して入力をクリックすると、最後の入力が表示されます（ブラウザーの自動入力は問題ありません）。

  2. 後にクリック<a href="" onClick="prova()">submit</a>すると、クエリ文字列が表示されません。再ロードされたページで、フォームを「表示」して入力をクリックすると、最後の入力が表示されません（ブラウザーの自動入力が失敗します）。

（この問題はChromeとIEで見られますが、Firefoxでは見られません。）

ゴール

ブラウザのオートフィルは常に表示されます。

4

2 に答える 2

0

問題は、JavaScriptを使用して作成しているHTMLフォームが、ページの読み込み時にブラウザのDOMに含まれていなかったことである可能性があります。これを修正するには、フォームのHTMLをタグに配置してDOMでレンダリングし、ユーザーがリンクをbodyクリックするまでJavaScriptで非表示にします。crea

問題2は、リンク（ ）が属性<a href="" onclick="prova()"...で指定されたURLに移動する可能性があることです。HREFその属性は空なので、ページはそれ自体に移動します。

作業を簡単にするために、HTMLフォームをJavaScriptロジックから除外する必要があります。また、jQueryを使用しているので、関数をバインドに変換しました。

JSFIddleでの作業例。

<html>
    <head>
        <script type="text/javascript" src="url/to/jquery.js"></script>
        <script type="text/javascript">
            jQuery(function(){
                var form = jQuery( '#form' ),
                    crea = jQuery( '#creaLink' ),
                    prova = jQuery( '#provaLink' );

                form.hide();

                crea.on( 'click', function(){
                    form.show();
                });

                prova.on( 'click', function(){
                    form.submit();
                });
            });
        </script>
    </head>
    <body>
        <a href="#" id="creaLink">lancia funzione JS</a>
        <br />
        <br />
        <div id="form">
            <form method="post" id="popUpForm" name="popUpForm">
                <hr />
                <input type="hidden" name="mio" value="1" />
                input3
                <input type="text" name="input3" value="" />
                <br />

                input4
                <input type="text" name="input4" value="" />
                <br />

                <input type="submit" id="11" value="Procedi" />
            </form>
            <br />
            <a href="#" id="provaLink">submit</a>
        </div>
    </body>
</html>​
于 2012-04-06T10:14:53.380 に答える
-1

ブラウザが異なれば動作も異なる可能性があるため、ブラウザの自動入力に依存することはお勧めできません。ここで、フォームデータがサーバーで受信されて処理された後でも、フィールドに値が存在することを想定している場合は、AJAX手法を使用することをお勧めします。バックグラウンドでフォームデータをサーバーに送信し、応答を受信したら結果のみを表示します。

于 2012-04-06T10:08:56.017 に答える