Проблемы с функцией jQuery

Я не могу выполнить эту функцию jquery должным образом. Когда я нажимаю на форму отправки, отображаются только два первых предупреждения, а затем перезагрузка страницы. Поэтому я снова нажимаю кнопку отправки формы с перезагруженной страницей, а затем показывает остальные предупреждения (начиная с третьего), а затем функция работает нормально.Проблемы с функцией jQuery

В заключение: мне нужно щелкнуть два раза вместо формы, чтобы выполнить функцию.

Есть идеи? Спасибо.

JS код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 

<script type="text/javascript"> 
alert("enters script"); 

$(function() { 
    alert("enters jquery function"); 

    $(".submit").click(function() { 
     alert("enters click submit function"); 

     var name = $("#name").val(); 
     var date = $("#date").val(); 
     var dataString = 'name=' + name + '&date=' + date; 
     alert("saved variables"); 

     if (name == '' || date == '') { 
      alert("enters if"); 

      $('.success').fadeOut(200).hide(); 
      $('.error').fadeOut(200).show(); 
     } else { 
      alert("enters else"); 

      $.ajax({ 
       type: "POST", 
       url: "join.php", 
       data: dataString, 
       success: function() { 
        alert("enters success"); 

        $('.success').fadeIn(200).show(); 
        $('.error').fadeOut(200).hide(); 
        refresh(); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 
</script>

HTML код:

<form method="post" name="form"> 

    <ul> 
     <li> 
     Name <input id="name" name="name" type="text" /> 
     </li> 

     <li> 
     Date <input id="date" name="date" type="date" /> 
     </li> 
    </ul> 

    <div > 
     <input type="submit" value="Submit" class="submit"/> 
     <span class="error" style="display:none"> Please Enter Valid Data</span> 
     <span class="success" style="display:none"> Registration Successfully</span> 
    </div> 

</form>

источник

2014-02-14 pesk1

проверить, если у вас есть некоторые ошибки в консоли пожалуйста –

скрипку будет полезно, как всегда ... – kn0x

для меня отлично работает http://jsfiddle.net/7Ta8t/ –

Прежде всего, спасибо всем за вашу помощь.

Наконец, основная проблема связана с другой частью кода. Я использовал pjax (https://github.com/thybag/PJAX-Standalone), чтобы заменить форму другим html-документом (в данном случае page1.html) после выполнения вставки mysql через «join.php». И я не называю функцию jquery должным образом.

Объяснение: Вы начинаете на странице1.html, затем нажимаете «Перейти на страницу 2» (Это заменит содержимое «div» div на body2.html). Затем заполните форму и отправьте ее. Когда вы нажимаете «Отправить», активируется функция jquery (join.php mysql insert внутри) и, наконец, снова заменяется div «content».

Solution (это работает):

page1.html

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
<script type="text/javascript" src="pjax-standalone.js"></script> 

<script type="text/javascript"> 
    pjax.connect({ 
      'container': 'content', 
      'beforeSend': function(){console.log("before send");}, 
      'complete': function(){console.log("done!"); 

       if($("#button_pg_2").length) 
       { 
        $(document).ready(function() 
        { 
         $(".submit").click(function() 
         { 
          var nombre = $("#name").val(); 
          var fecha = $("#date").val(); 
          var dataString = 'name='+ name + '&date=' + date; 

          if(name=='' || date=='') 
          { 
           $('.success').fadeOut(200).hide(); 
           $('.error').fadeOut(200).show(); 
          } 
          else 
          { 
           $.ajax(
           { 
            type: "POST", 
            url: "join.php", 
            data: dataString, 
            success: function() 
            { 
             $('.success').fadeIn(200).show(); 
             $('.error').fadeOut(200).hide(); 
             replace(); 
            } 
           }); 
          } 
          return false; 
         }); 
        }); 

       } 
     } 
    }); 
</script> 

<script type="text/javascript"> 
    function replace() 
    { 
    pjax.invoke('page1.html', 'content'); 
    } 
</script> 
</head> 

<body> 
    <div id="header"> 
    This div never changes 
    </div> 
    <div id="content"> 
     <a href="page2.html" data-pjax="content">Go To Page 2</a> 
    </div> 
</body> 
</html>

page2.html

<html> 
<body> 
    <form method="post" name="form"> 

     <ul> 
      <li> 
      Name <input id="name" name="name" type="text" /> 
      </li> 

      <li> 
      Date <input id="date" name="date" type="date" /> 
      </li> 
     </ul> 

     <div > 
      <input type="button" id="button_pg_2" value="submit" class="submit"/> 
      <span class="error" style="display:none"> Please Enter Valid Data</span> 
      <span class="success" style="display:none"> Registration Successfully</span> 
     </div> 

    </form> 
</body> 
</html>

источник

2014-02-17 20:03:24 pesk1

использовать event.preventDefault, чтобы остановить подачу страницы

http://api.jquery.com/event.preventdefault/

источник

2014-02-14 17:05:52

возвращение false делает то же самое –

В дополнение к тому, что сказал Арун П. Джонни, проблема, описанная OP, заключается не в том, что страница отправляется, он/она должен дважды нажать кнопку отправки. – 11684

Ваша проблема заключается в использовании кнопок submit, у них есть поведение по умолчанию, отличное от того, что вы добавляете в качестве события к нему.

заменить это:

<input type="submit" value="Submit" class="submit" />

с:

<input type="button" value="Submit" class="submit" />

это вы работаете DEMO

кроме изменения кнопки отправки на регулярную кнопку, вы можете исправить код, отключив что по умолчанию, добавив onsubmit к вашей форме:

<form method="post" name="form" onsubmit="return false;"> 
    <!--your stuff--> 
</form>

источник

2014-02-14 17:06:28

снова действие по умолчанию нажатия кнопки предотвращается, так как это может помочь –

@ArunPJohny: фактически действие по умолчанию «отправить» не поддерживается, а не «кнопка». но дело в том, что если вы не предотвратите отправку, это приведет к отправке всего содержимого формы на сервер, и ваша страница будет перезагружена. –

Попробуйте это:.

<script type="text/javascript">

$ (документ) .ready (функция() {

$ (». Отправить ") нажмите (функция() { оповещения (" ENTRA ан ла funcion del clic del submit ");

var nombre = $("#nombre").val(); 
    var fecha = $("#fecha").val(); 
    var dataString = 'nombre='+ nombre + '&fecha=' + fecha; 
    alert("variables guardadas"); 

    if(nombre=='' || fecha=='') 
    { 
    alert("entra en el if"); 

     $('.success').fadeOut(200).hide(); 
     $('.error').fadeOut(200).show(); 
    } 
    else 
    { 
    alert("entra en el else"); 

     $.ajax({ 
      type: "POST", 
      url: "join.php", 
      data: dataString, 
      success: function() 
      { 

      alert("entra en el success"); 

       $('.success').fadeIn(200).show(); 
       $('.error').fadeOut(200).hide(); 
       refresca(); 
      } 

      }); 
    } 
    return false; 
});

});

источник

2014-02-14 17:26:55 MarianoDav

Проблемы с функцией jQuery

ответ

Смежные вопросы