【问题标题】:Jquery/Ajax form doesn't work on IE7Jquery/Ajax 表单在 IE7 上不起作用
【发布时间】:2014-01-14 15:26:28
【问题描述】:

我在这个需要 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 的新手,因此除了了解 IE 浏览器系列(如果互联网的耻辱)之外,我不知道 IE7 与 Jquery 不兼容问题背后的原因。感谢所有帮助。

附:我做了检查,我在 IE7 上启用了 javascript,以防你想知道。

感谢所有帮助/指导

【问题讨论】:

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


    【解决方案1】:

    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
            },
    

    【讨论】:

    • 我要指出这一点。此外,在数据对象中的名称/值对的名称周围加上引号是否正确?
    • 我认为这并不重要。也就是说,无论如何我现在正在测试它。
    • @Aaron - 确认 - 没关系。
    • @Aaron Hathaway:只要名称不包含像- 这样的特殊字符,就不需要它。如果你想在你的键中使用这些字符,你需要将它们放在引号中。
    • 非常感谢卡里姆 - 忽略这些小错误有点尴尬:o 现在可以正常工作了。
    猜你喜欢
    • 1970-01-01
    • 2012-02-09
    • 1970-01-01
    • 2013-11-16
    • 1970-01-01
    • 2011-02-12
    • 1970-01-01
    • 1970-01-01
    • 2010-10-21
    相关资源
    最近更新 更多