Динамически загружаемая форма и submit-скрипты - PullRequest
2 голосов
/ 18 июля 2011

Я загружаю форму динамически в div.При публикации формы с использованием JQuery.post результат должен быть представлен без перезагрузки всей страницы.Но вместо этого содержимое, полученное в ответе, загружается во весь браузер, поэтому на главной странице больше нет меню, логотипов и т. Д.Существует много php-кода, генерирующего контент, и вот, что я думаю, может быть интересным сейчас:

<div id='subscribe_page'>
<div id='sub' class='subscribe'>
<form id='subscribe_now' action='subscription.php' name='subscribe' method='post'>
    <p class='formlabel'>Förnamn</p> <input type='text' id='first_name' name='first_name'/><br/>
    <p class='formlabel'>Efternamn</p> <input type='text' id='surname' name='surname'/> <br/>
    <p class='formlabel'>E-mail</p> <input type='text' id='email1' name='email1'/><br/>
    <p class='formlabel'>Repeat e-mail</p> <input type='text' id='email2' name='email2'/> <br/>
    <input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<script language='javascript' type='text/javascript' src='jquery-1.6.2.min.js'></script>
 <script language='javascript' type='text/javascript'>

  $(document).ready(function() {
   $('#subscribe_now').submit(function() {
   regExp = /^[^@]+@[^@]+$/;

   if(($('#email1').val().search(regExp) == -1) || !isEqual($('#email1').val(), $('#email2').val())) 
   { 
       alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
      return false; 
   } else{
    alert('Posting data' + $('#subscribe_now').serialize());
    $.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
    });
    return true;
   }     

});

});     
</script>"

Все выше загружено в div, принадлежащий главной странице.После публикации я хочу, чтобы данные в ответе были представлены в div subse_page.Но это не так.

Обратите внимание, что предупреждение внутри $ .post не сработало.Тем не менее, предупреждающая строка, предшествующая предыдущему, запускается с таким результатом:

first_name=sertdg&surname=5tghf&email1=niklas%40iandapp.com&email2=niklas%40iandapp.com.

Я также пытался указать контент, который должен быть возвращен без различий в поведении:

$.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
}, 'html');

В чем может быть проблема и как ее решить?

Ответы [ 3 ]

1 голос
/ 07 августа 2011

Поскольку форма загружается динамически, мне нужно загрузить новый контент в div следующим образом, используя «live»:

    $("#registerform").live("submit", function(e){

            //Prevent the form from submitting normally
            e.preventDefault();

            $.post("registeraccount.php",$(this).serialize(),function(msg){

                $("#adminarea").html(msg);                          

        });
    });

Насколько я понимаю, "живой" должен использоваться для динамического контента.

1 голос
/ 09 октября 2011

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

1 голос
/ 18 июля 2011

Ну, я не совсем понимаю, но если вы понимаете:

 $('#subscribe_page').html(data); 

, вы фактически стираете все, что у вас есть внутри этого div, и заменяете его своим ответом.Может быть, вы должны сделать:

 $('#subscribe_page').after(data);

или

 $('#subscribe_page').append(data);

РЕДАКТИРОВАТЬ - поскольку проблема в вашем $ .post, я думаю, что вы не должны использовать serialize () , поскольку эта функция используется с $ .get ().вы должны изучить param () или serializeArray ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...