0

フォーム (またはそれに関するもの) が表示されたときにボタンを押すと、元のフォームを含む div が新しいフォームに置き換えられる jQuery/AJAX 関数はありますか? 基本的に、ページをリロードする必要のないマルチパート フォームです。

このようなものを使用できますか？

$('form#myForm').submit(function(event) {
    event.preventDefault();
        $.ajax({
            type: '',
            url: '',
            data: $(this).serialize(),
            success: function(response) { 
                $('#divName').html(response); 
                //somehow repopulate div with a second form?
            }
        })
        return false;
 });

リストにアイテムを追加するためにこれを使用したことがありますが、別のコンテンツで完全に再作成するために使用したことはありません。どうすればそれを2番目のフォームに向けることができますか?

編集 - 動作するようになりましたが、置換用に「#form2」と書いた場合のみです。私は応答を警告し、私は得る{"formToShow":"show2"}. response.formToShow を実行してみましたが、未定義です。

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>


<div id="divName">
    <form method="POST" action = "#" id="form1">
        <input type="textbox" name="textbox1" value="1"/>
        <input type="submit" name="submit1"/>
    </form>

    <form method="POST" action = "#" id="form2" style="display: none">
        <input type="textbox" name="textbox2" value="2"/>
        <input type="submit" name="submit2"/>
    </form>
</div>

<script>
 $('form#form1').submit(function(event) {
    event.preventDefault();
        $.ajax({
            type: 'JSON',
            url: 'receiving.php',
            data: $(this).serialize(),
            success: function(response) { 
                $('#form1').hide();  //hides
                //$('#form2').show();  //this will show
                $(response.formToShow).show(); //this does not display form 2
            }
        })
        return false;
    });
</script>

こちらがreceive.phpです。このページを見る{"formToShow":"show2"}と表示される

<?php
echo json_encode(array("formToShow" => "#form2"));
?>
4

3 に答える 3