表单提交浏览器的可配置性

时间:2015-07-16 19:02:20

标签: javascript jquery ajax

我在编程方面相当新。我使用以下代码提交表单:

     <form action="" method="post"  class="label" id="form1">

     <span id="sprytextfield1">
    <label>Ονομα*
      <br />
      <input name="onoma" type="text" id="onoma" size="30" />
    </label>
    <span class="textfieldRequiredMsg"></span></span>
    <p><span id="sprytextfield2">

    <label>Επίθετο*
      <br />
      <input name="surname" type="text" id="epitheto" size="30" />
    </label>
    <span class="textfieldRequiredMsg"></span></span></p>
    <p><span id="sprytextfield3">

      <label>Τηλέφωνο*<br />
        <input name="phone" type="text" id="tilefono" size="25" />
        <span class="textfieldRequiredMsg"> </span></label>
</span></p>
    <p><span id="sprytextfield4">

    <label>email*<br />
      <input name="email" type="text" id="email" size="30" />
    </label>
    <span class="textfieldRequiredMsg"></span></span></p>
    <p><span id="sprytextfield5">

      <label>username*
        <br />
        <input name="username" type="text" id="username" size="30" />
      </label>
      <span class="textfieldRequiredMsg"></span></span></p>
    <p><span id="sprypassword1">

    <label>password*<br />
      <input type="password" name="password" id="password" />
    </label>
    <span class="passwordRequiredMsg"></span></span></p>
    <p>

      <label>Εδρα-Νομός*
        <select name="Edra_nomos" size="1" id="edranomos">
        <option value=" Επιλογές"> Επιλογές</option>
  ......................................................... 

          </select>
      </label>
      </p>
    <p>

    <label>Εδρα-Πόλη*
        <select name="Edra-Poli" id="edrapoli">
        </select>
      </label>

     <script>
     $(document).ready(function(){

         $('#edranomos').change(function(){
             $('#edrapoli').empty();

     var option = '';
     var edra = [
     .................................................................

     ];

     var s = $( "#edranomos option:selected" ).text().trim();   

     for(n=0;n<edra.length;n++){
         if(s==edra[n][0]){         
             for(i=1;i<edra[n].length;i++){
             option += '<option value="'+ edra[n][i] + '">' + edra[n][i] + '</option>';          
             }
             $('#edrapoli').append(option);         
             }                   
         }
      });
     });
     </script></p>
    <p>         

      <label>Είδος Μεταφοράς*
        <select name="Eidos_metaforas" size="1" id="eidosmetaforas">        
         ...........................................................        

          </select>
      </label>
      </p>
    <label>Υπηρεσίες*

      <select name="ypiresies" size="3" multiple="multiple" id="exeidikypiresies">
       .....................................................

    </select>
    </label>
    <p><br />
  </p>
    <p>
      <input name="Submit"  type="submit"  id="button" value="Εγγραφή" />
  </p>
    </form>
    <p>&nbsp;</p>





<script>
$(document).ready(function(){ 

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

        alert($('#onoma').val());
        alert($('#epitheto').val());
        alert($('#email').val());
        alert($('#tilefono').val());
        alert($('#username').val());
        alert($('#password').val());
        alert($('#edranomos').val());
        alert($('#edrapoli').val());
        alert($('#eidosmetaforas').val());
        if($('#exeidikypiresies').val()!=null){
        var e = $('#exeidikypiresies').val().toString();
        } else {
            var e = 'nothing';
            }
        alert(e);

        $.ajax({
  url: 'php/register.php',   
  type: 'POST',
  data: { onoma:$('#onoma').val() , epitheto:$('#epitheto').val() , 
  email:$('#email').val() , tilefono:$('#tilefono').val(),
  username:$('#username').val() , password:$('#password').val() ,
  edranomos:$('#edranomos').val() , edrapoli:$('#edrapoli').val(),
  eidosmetaforas:$('#eidosmetaforas').val() , exeidikypiresies:e},
  dataType: 'json',
  success: function(response){        
      alert(response['message']);  
      if(response['success']=='1'){
          window.location = 'http://www.transergo.com/index.php';   
          }

}
});
});
});
</script>

我的问题是代码不适用于firefox(我甚至无法将数据存储到数据库中),使用chrome进行半工作(响应时不显示警告框)并且它与IE完美配合,因此其显然是浏览器兼容性问题。我不知道该找什么。通过谷歌搜索找不到任何具体内容。任何想法;

我更新的代码

2 个答案:

答案 0 :(得分:0)

我无法在您的页面中看到HTML,但我认为这是因为您在尝试发布表单时正在进行AJAX调用。这是一个问题,因为$ .ajax是异步的,所以在你从$ .ajax调用中获得结果之前,你的页面可能正在重新加载/导航。

答案 1 :(得分:0)

在ajax调用之后添加以下return语句,以便不会发生表单直接提交。

return false;

还可以更好地避免警报语句进行调试。 您可以使用

在控制台中打印它们
console.log("test");