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：当我点击<a href="" onClick="prova()">submit</a>它调用$('#popUpForm').submit();
    方式2：点击<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 放入body要在 DOM 中呈现的标签中来解决此问题，并使用 JavaScript 将其隐藏，直到用户单击crea链接。

问题2似乎是您的链接 ( <a href="" onclick="prova()"...) 可能会转到HREF属性中给出的 url。由于该属性为空，因此您的页面将转到自身。

为了使事情变得更容易，您应该将 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 回答