Динамически загружать форму с помощью jQuery

Question

Я изучаю веб-дизайн и столкнулся с трудностью, которую я не могу понять самостоятельно.Я хочу, чтобы динамически загрузить форму с использованием JQuery.Мой код выглядит так:

Из основного файла:

$('#left_colum').click(function(e) {
e.preventDefault();
   $('#column_left').load(create_album.php);
});

create_album.php -> он содержит фактическую форму, а также скрипт php, который обрабатывает его на POST.Это очень просто.Если я загружаю my_form.php сам по себе, он работает нормально.Если я динамически загрузить его, как указано выше;HTML работает, но скрипт POST php не выполняется.

Есть и другое интересное поведение;если я нажимаю кнопку «Отправить» в динамически загруженной форме, она исчезает (в отличие от «правильно» загруженной).

Я просмотрел много постов и руководств и не смогчтобы найти решение, кроме использования фреймов.Кажется, что люди обычно не загружают динамически ничего, кроме базового HTML, который не должен возвращаться к серверу.Я новичок в этом: P

Есть ли исправление или другой способ сделать это?Спасибо!

Редактировать:

album.php:

<?php
include 'init.php';

if(!logged_in()) {
    header("Location: index.php");
    exit();
}

?>

<h3>Albums</h3>
<?php
/*Output albums*/
$albums = get_albums();
if(empty($albums)) {
    echo("You don't have any albums");
} else {
    /*Changed: uploading images is now part of the albums sections*/
    foreach($albums as $album) {
        echo '<p><a class="album_view" id="'.$album['id'].'" href="">', $album['name'], '</a> (', $album['count'], ' images)<br/>Description: ', $album['description'], '...<br/><a class="album_edit" id="'.$album['id'].'" href="">Edit</a> / <a href="delete_album.php?album_id=', $album['id'], '">Delete</a> / <a class="upload_image" id="'.$album['id'].'" href="">Upload</a></p>';
    }
}
?>
<script type="text/javascript">
    $(document).ready(function() {

        /*Creating albums*/
        $('#create_album').click(function(e) {
            e.preventDefault();
            $('#column_left').load(album.php);
        });
    });

create_album.php:

<h3>Create Album</h3>

<?php
if(isset($_POST["album_name"], $_POST["album_description"])) {

    echo 'got here';
    $album_name = $_POST["album_name"];
    $album_description = $_POST["album_description"];

    $errors = array();
    if(empty($album_name) || empty($album_description)) {
        $errors[] = "Album name and description required";
    } else {
        if(strlen($album_name) > 55 || strlen($album_description) > 255) {
            $errors[] = "Name/description too long";
        }
    }

    if(!empty($errors)) {
        foreach($errors as $error) {
            echo $error, "<br/>";
        }
    } else {
        echo 'got here, too';
        //create_album($album_name, $album_description);
        //header("Location: albums.php");
    }
}
?>

<form action="" method="post">
    <p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
    <p>Description:</br><textarea name="album_description" rows="6" cols="35" maxlength="255"></textarea></p>
    <p><input type="submit" value="Create"/></p>
</form>

Answer 1

Ваше действие с формой отсутствует, попробуйте это, я пробовал и работаю на своем конце

album.php

<h3>Create Album</h3>

 <?php
if(isset($_POST["album_name"], $_POST["album_description"])) {

echo 'got here';
$album_name = $_POST["album_name"];
$album_description = $_POST["album_description"];

$errors = array();
if(empty($album_name) || empty($album_description)) {
    $errors[] = "Album name and description required";
} else {
    if(strlen($album_name) > 55 || strlen($album_description) > 255) {
        $errors[] = "Name/description too long";
    }
}

if(!empty($errors)) {
    foreach($errors as $error) {
        echo $error, "<br/>";
    }
} else {
    echo 'got here, too';
    //create_album($album_name, $album_description);
    //header("Location: albums.php");
}
     }
        ?>

     <form action="album.php" method="post">
<p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
<p>Description:</br><textarea name="album_description" rows="6" cols="35 "maxlength="255"></textarea></p>
<p><input type="submit" value="Create"/></p>

yourmainfile.php

<!DOCTYPE html>  
      <html lang="en">  
       <head>  
<meta charset="utf-8">  
<title>Untitled</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
    $('#create_album').click(function(e) {
        e.preventDefault();
        $('#column_left').load('album.php');

    });

    });
</script>
      </head> 
        <body>
<div id="mainWrapper">
    <div id="column_left"></div><!-- end column left -->

    <a href="#" id="create_album"> Create New Album </a>

</div><!--end mainWrapper-->
        </body>
        </html>

Answer 2

потому что ваше действие формы будет на другой странице, поэтому каждый раз, когда вы нажимаете кнопку отправки, вы перенаправляете вас на эту страницу, вы можете попробовать использовать iframe, который будет работать таким образом, или если вы хотите использовать только jquery, а не вставлять некоторыекод, чтобы мы могли понять, что на самом деле происходит ... хотя iframe является лучшим решением для вас, как будто сейчас

Answer 3

С вашим кодом вы загружаете только HTML-часть вашей формы.Поэтому, когда пользователь нажимает кнопку «Отправить», ваши поля были отправлены на исходную страницу, а не в «my_form.php», где, я полагаю, вы управляете данными POST.Самое простое решение - использовать IFRAME для загрузки кода формы.

Answer 4

Я думаю, что это:

$('#column_left').load('my_form.php');

верно?

В любом случае:

• Правильно ли отображается форма?
• Попробуйтепосмотрите на сгенерированный источник с помощью firebug, чтобы увидеть, была ли загрузка успешной
• Убедитесь, что «my_form.php» вернул html не весь <html>, а просто <form> иего содержание
• Какая форма action?Это абсолютный путь или нет?Если он относительный, он может указывать на разные местоположения при вызове со страницы загрузки ajax или с my_form.php
• Отправляете ли вы форму vja ajax или «стандартным способом»?
• Что именно происходит, когда вы нажимаете на форму отправки?Куда вас перенаправляют?