Jquery / Ajax表单在IE7上不起作用

时间:2010-12-11 15:11:49

标签: javascript jquery forms internet-explorer-7 internet-explorer-6

我正在这个网站上工作,需要一个jquery / ajax联系表格。一切正常,除了IE7(可能是IE6,8,甚至可能是9),但没有要求/预期/需要支持。这是实时版本:

http://njutsu.net

无论如何,这是JQuery代码:

<!-- JS -->
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script>
function valid_email(email) {
    if (!(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i).test(email))
        return false;

    return true;
}


$(function(){
 $("#testclass").submit(function(){


 if (!valid_email($('#email').val())) {
  alert('Por favor escribe un email valido.');
  $('#email').focus();

  return false;
 }

 if ($('#nombre').val().length == 0) {
  alert('Por favor escribe tu nombre.');
  $('#nombre').focus();

  return false;
 }

 if ($('#apellido').val().length == 0) {
  alert('Por favor escribe tu apellido.');
  $('#apellido').focus();

  return false;
 }

 if ($('#edad').val().length == 0) {
  alert('Por favor escribe tu edad.');
  $('#edad').focus();

  return false;
 }

 if ($('#telcel').val().length == 0) {
  alert('Por favor escribe tu telefono o celular.');
  $('#telcel').focus();

  return false;
 }

 if ($('#razon').val().length == 0) {
  alert('Por favor escribe la razon por la cual deseas tomar una clase de prueba.');
  $('#razon').focus();

  return false;
 }






  $.ajax({url: "testclass.php",
    datatype: 'html',
    type:'POST', 
    data: { "email": $("input[type=text][name=email]").val(),
            "nombre": $("input[type=text][name=nombre]").val(),
            "apellido": $("input[type=text][name=apellido]").val(),
            "edad": $("input[type=text][name=edad]").val(),
            "telcel": $("input[type=text][name=telcel]").val(),
            "razon": $("textarea#razon").val(),
            },
    success: function (response,textstatus){
     $("#secondary div.col1-2").html("<h4 class='thanks'>Gracias por enviar tu solicitud, nos pondremos en contacto apenas leamos tu mensaje para acordar una fecha y hora para tu clase de prueba.</h4>");
     $("#secondary div.col1-2").hide();
     $("#secondary div.col1-2").fadeIn(2000);
    }
   }); 
  return false;
 });



});


</script>

这是表单的HTML:

<form id="testclass" action="testclass.php" method="post">
            <div class="row">
                <label>Tu E-Mail</label>
                <input id="email" name="email" class="text" type="text">
            </div>
            <div class="halfrow left">
                <label>Tu Nombre</label>
                <input id="nombre" name="nombre" class="text" type="text">
            </div>
            <div class="halfrow">
                <label>Tu Apellido</label>
                <input id="apellido" name="apellido" class="text" type="text">
            </div>
            <div class="halfrow left">
                <label>Tu Edad</label>
                <input id="edad" name="edad" class="text" type="text">
            </div>
            <div class="halfrow">
                <label>Tu Teléfono o Celular</label>
                <input id="telcel" name="telcel" class="text" type="text">
            </div>
            <div class="row">
                <label>Razón por la cual deseas tomar clases de Ninjutsu Instintivo</label>
                <textarea id="razon" name="razon" class="textarea" cols="" rows=""></textarea>
            </div>
            <div class="row">
                <h5><input class="button" type="submit" value="Quiero tomar una clase de prueba" /></h5>
            </div>
</form>

在任何情况下,如果表单的关键区域在提交时没有“填满”,则会有一个PHP检查,将您带到/iefail.php并告知您。

我是Jquery的新手,因此不知道IE7与Jquery的不兼容问题背后的原因,除了知道IE系列浏览器,如果互联网的耻辱。感谢所有帮助。

P.S。我做了检查,我在IE7上启用了javascript,以防万一你想知道。

感谢所有帮助/指导

1 个答案:

答案 0 :(得分:4)

这是data对象末尾的额外逗号,导致IE失败:

data: { "email": $("input[type=text][name=email]").val(),
        "nombre": $("input[type=text][name=nombre]").val(),
        "apellido": $("input[type=text][name=apellido]").val(),
        "edad": $("input[type=text][name=edad]").val(),
        "telcel": $("input[type=text][name=telcel]").val(),
        "razon": $("textarea#razon").val(), <-- here
        },