Question

I am working on this website which requires a jquery/ajax contact form. Everything works fine except for IE7 (and presumably IE6, 8 and maybe even 9) but support for those was not requested/expected/needed. Here is the live version:

http://njutsu.net

In any case, here’s the JQuery code:

<!-- 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>

And here’s the HTML for the form:

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

In any case, if the key areas of the form are not ‘filled up’ when they’re submitted, there’s a PHP check which takes you to /iefail.php and lets you know.

I am new to Jquery and thus have no solid knowledge of the why’s behind the incompatibility issues of IE7 with Jquery other than knowing the IE family of browsers if the disgrace of the internet. All help is appreciated.

P.S. I did check and I have javascript enabled on IE7, just in case you were wondering.

All help/guidance is appreciated

Answer 1

It is the extra comma at the end of your data object which is causing IE to fail miserably:

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