1

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&[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;
});

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for the answer seth! I tried what you said but it didn't work.
I updated my answer to include the code. Does this match what you tried? You are still seeing two requests to the form?
Yes seth, I tried like you exemplified and I got the same problem. Doing some search I've found this article: trygve-lie.com/blog/entry/moving_a_script_ie_might The 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.
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?
I added the code that I tested seth in the end of the question.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.