jQuery Post с проверкой переключателя радио кнопки - PullRequest
Новая
       22

jQuery Post с проверкой переключателя радио кнопки

1 голос
/ 28 сентября 2011

У меня есть страница, которая использует сообщение jQuery для отправки формы и возврата данных в теге div на той же странице. тогда форма все еще доступна, так что пользователю могут быть заданы несколько вопросов и информация будет извлечена из базы данных.

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

Переключатели поддерживают свое установленное значение. Любые идеи о том, как я могу использовать этот формат и убедиться, что при каждой последующей отправке формы выбран переключатель?

Вот первая страница test.php 

    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <title>test jQuery post</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict ();

    jQuery(document).ready(function(){
      initializeForm();
      });

    function initializeForm() {
      jQuery("#university").validate({

          debug: false,
          submitHandler: function(form) {


          var validationTypes = jQuery("#validationTypes");
          var valid = false;


                        if (validationTypes.val()== 'radio')
                            {
                               for(i=0; i<university.radio.length; i++) if(university.radio[i].checked) {valid=true;}

                                if (valid == false)
                                      {
                                          alert ( "Please pick an answer before trying to Submit this form." );
                                          return false;
                                      }

                            }


              jQuery.post('post.php',
                  jQuery("#university").serialize(),
                  function(data) {
                      jQuery('#box').html(data);
                      initializeForm();

                  });

          }

      });
      }



    // ]]>
    </script>
    </head>
    <body>
    <div id="box"><? include('post.php') ?></div>
    </body>
    </html>

Вот вторая страница post.php 

<?

$radio = (isset($_POST['radio'])? $_POST['radio']: 0);
    switch ($radio)
        {
          default:
          echo 'pick a number<br /><br />';
          break;
          case '1':
          echo 'you pick one<br /><br />Pick Again<br /><br />';
          break;
          case '2':
          echo 'you pick two<br /><br />Pick Again<br /><br />';
          break;
          case '3':
          echo 'you pick three<br /><br />Pick Again<br /><br />';
          break;
        }
?>
<form action="" method="POST" id="university" name="university">
<input type="radio" name="radio" value="1" /> 1&nbsp;&nbsp;
<input type="radio" name="radio" value="2" /> 2&nbsp;&nbsp;
<input type="radio" name="radio" value="3" /> 3&nbsp;&nbsp;
<input type="hidden" name="validationTypes" id="validationTypes" value="radio">
<input type="submit" name="submit" value="submit" /></form>

1 Ответ

1 голос
/ 28 сентября 2011

Я думаю, что ваш обработчик событий для проверки (jQuery("#university").validate) по-прежнему прикреплен к HTML, который вы только что заменили после отправки формы (jQuery('#box').html(data)).

Так что в этом случае я могу подуматьв 2 вариантах, которые, я думаю, решат вашу проблему:

  1. Простое решение: переместите эту часть вашего javascript на страницу post.php (чтобы она выполнялась каждый разВы загружаете форму): 

    jQuery(document).ready(function(){
  initializeForm();
});

  2. Эффективное решение: переместите свой HTML-код на страницу post.php ниже, закрывая "box" div в test.php стр.А затем использовать что-то для очистки значений, таких как: 

    $('input[name=radio]').val([]);
...