Home/ Questions/Q 7750503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:18:32+00:00

I have this code <html> <include jquery> <script> function crea() { var html =

  • 0

I have this code

<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>

This code:

  1. When I click on <a href="#" onClick="crea()"> it “shows” the form
    into the <div id="cont">
  2. Way 1: When I click on <a href=""
    onClick="prova()">submit</a>     it calls $('#popUpForm').submit();
    Way 2: Click on <input type="submit" id="11" value="Procedi"
    />

Problem:

  1. If I click <input type="submit" id="11" value="Procedi" /> I
    reload the page and see correct query string (form action="get"). In
    the reloaded page, if I “show” the form and click on the input I see the last
    input (browser autofill okay).

  2. If I click <a href="" onClick="prova()">submit</a>, after, I
    don’t see the query string. In the reloaded page if I “show” the form and
    click on the input I don’t see the last input (browser autofill fails).

(I see this problem in Chrome and IE, but not in Firefox.)

Goal

The browser autofill should always show.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem might be that the HTML form you are creating with JavaScript was not in the browser’s DOM at the moment the page was loading. You can fix this by placing the form’s HTML into your body tag to be rendered in the DOM, and hide it with JavaScript until a user clicks the crea link.

    The problem number 2 seems to be that your link ( <a href="" onclick="prova()"... ) might go to the url given in the HREF attribute. Since that attribute is empty, your page goes to itself.

    To make things easier, you should keep your HTML form out of your JavaScript logic. Also since you are using jQuery, I have converted your functions to binds.

    Working example in 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>​
    • 0