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"></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;
});