Dynamic including javascript with jquery

Question

I'm facing a problem using IE here. I need to insert a form on distinct web pages in distinct servers and domains. I'm doing this through a javascript include like this:

<script type="text/javascript" src="http://www.sisgol.com.br/teste/write_js.php?content=form_content"></script>
<div id="form_hypescience">
</div>

The include loads the following content into the div:

$(document).ready(function(){
$('#form_hypescience').html('\
    <style>\n\
        #form_hypescience {\n\
            width: 250px;\n\
            height: 250px;\n\
        }\n\
        #form_hypescience p {\n\
            margin: 0;\n\
            padding: 0;\n\
        }\n\
        #form_hypescience label {\n\
            font-size: x-small;\n\
            display: block;\n\
        }\n\
        #form_hypescience input[type=text], textarea{\n\
            font-size: x-small;\n\
            width: 240px;\n\
        }\n\
        #form_hypescience textarea {\n\
            height: 40px;\n\
        }\n\
        #form_hypescience button {\n\
            background:#000000 none repeat scroll 0 0;\n\
            border: medium none;\n\
            color: #e7e7e7;\n\
            padding: 1px;\n\
            font-size: 60%;\n\
        }\n\
    \n\
    </style>\n\
    \n\
    <form class="form_hypescience" method="post" action="<!URL_PROCESS_FORM_DATA!>">\n\
    <p>\n\
        <label for="nome">Seu Nome</label>\n\
        <input type="text" id="nome" name="nome" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="email">Seu e-mail</label>\n\
        <input type="text" id="email" name="email" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="emails_amigos">E-mail dos seus amigos</label>\n\
        <textarea id="emails_amigos" name="emails_amigos" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="mensagem">Mensagem</label>\n\
        <textarea id="mensagem" name="mensagem" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="captcha">Digite o texto ao lado</label>\n\
        <input type="text" id="captcha" name="captcha" size="15" />\n\
    </p>\n\
    <button type="button" id="enviar">Enviar</button>\n\
    </form>\n\
    <span id="retorno_envio_form"></span>'
);
$('#enviar').click(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
});});

I'm sending the the form data through a javascript include (because the security model of the browsers regarding requests to distinct domains). In FireFox the code is working nicely and I was just wondering the next step when I noticed that this code on Microsoft Browsers send the request twice when the button is clicked. I used a program called Fiddler to confirm the fact.

This is an example of the first request:

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com HTTP/1.1

now the second request (that happens just after the first):

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com&_=1251168480125 HTTP/1.1

I've tried use preventDefault() (returning false in the end of the function), cut the form off, use a input type='submit' instead of a button, use a link instead of a button, create the script using the $('body').append(). Someone has any idea to help here?

Thanks in advance. ps: the code that I tried like seth said:

$('#data_form').submit(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    parametros.push('mensagem=' + $('#mensagem').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
    return false;
});

Answer 1

EDIT

OK, original answer was wrong. Your form is doing a POST but you are seeing two GET requests. Sorry about that. Missed it the first time around.

Instead of writing out the script tag in HTML, why not just use the $.getScript function?

$('#enviar').click( function(evt) {
  var parametros = new Array();
  parametros.push('nome=' + $('#nome').val());
  parametros.push('email=' + $('#email').val());
  parametros.push('emails_amigos=' + $('#emails_amigos').val());
  $.getScript('<!URL_PROCESS_FORM_DATA>?' + encodeURL(parametros.join('&') ),
    function() {
     // something you'd like to do afterwards
    });
});

It's because the form is submitting when the submit button is clicked and then your JS call is going though as well.

You can stop that my connecting to the onsubmit in your form (instead of the onclick).

Like so:

  $("#id_to_your_form").submit(function() {
     var parametros = new Array();
     parametros.push('nome=' + $('#nome').val());
     parametros.push('email=' + $('#email').val());
     parametros.push('emails_amigos=' + $('#emails_amigos').val());
     $('#retorno_envio_form').html('\
         <script type="text/javascript" \n\
          src="<!URL_PROCESS_FORM_DATA!>?' +
          encodeURI(parametros.join('&')) +
     '"></script>\n');
      return false;
  });

The return false will prevent the form from submitting.