views:

576

answers:

1

Hello people! 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"&gt;&lt;/script&gt;
<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&[email protected] HTTP/1.1

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

GET /teste/process_form.php?nome=maria%20&email=o%20cara&[email protected]&_=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;
});
+2  A: 
seth
Thanks for the answer seth! I tried what you said but it didn't work.
Ricardo
I updated my answer to include the code. Does this match what you tried? You are still seeing two requests to the form?
seth
Yes seth, I tried like you exemplified and I got the same problem. Doing some search I've found this article:http://www.trygve-lie.com/blog/entry/moving_a_script_ie_mightThe bug affects the ie 6 and 7. But after reading the article I still have no idea how to solve this. Maybe I can change the output of the server to not trigger the bug, it's just an idea.
Ricardo
You changed the value of #id_to_your_form to match the id of your form, right? You aren't still using #enivar are you?
seth
I added the code that I tested seth in the end of the question.
Ricardo
Yay! Thank you very much seth! I didn't know this function $.getScript. Jquery is really awesome.
Ricardo
You are welcome.
seth