2

こんにちは、編集ボタンが押されたときにフォームを表示しようとしています。フォームの保存ボタンが押されたら、データベースを編集して新しい情報を表示したいと思います。ページも更新せずにこれを行う必要があります。私はjqueryを初めて使用しますが、以下はこれまでに書いたものですが、event.preventDefault(); 関数が何らかの理由で機能せず、フォーム アクションが実行されます。私のコードが失敗する理由についての助けをいただければ幸いです。

<!doctype html>
<html lang="en">
<head>
<!-- Irrelevant scripts from the site go here -->
</head>
<body>
<!-- Lots of other code from the site is here -->
<div id="jqueryFunction"></div>
<script text="text/javascript">
    function checkEdit(ID){
        //Check the fields make sure they're not empty
        return true;
    }
</script>
<script text="text/javascript">
    function editV(ID, titleOld, descOld){
        document.getElementById("divForm" + ID).innerHTML = 
        "<form name=\"editDiv" + ID + "\" id=\"editDiv" + ID + "\" onsubmit=\"return checkEdit(" + ID + ");\" action=\"editvid.php\" method=\"POST\">" +
        "<input type=\"hidden\" name=\"divID\" id=\"divID\" value=\"" + ID + "\"/>" +
        "<input type=\"text\" name=\"titleNew" + ID + "\" id=\"titleNew" + ID + "\" value=\"" + titleOld + "\"/><br>" +
        "<textarea name=\"descNew" + ID + "\" id=\"descNew" + ID + "\">" + descOld + "</textarea><br>" +
        "<input type=\"submit\" value=\"Save\" class=\"alt_btn\">" +
        "</form>";
        document.getElementById("jqueryFunction").innerHTML = 
        "<script src=\"js/jquery-1.5.2.min.js\" type=\"text/javascript\"><\/script>" +
        "<script>" +
            "$(function(){" +
                "$('form[name=\"editDiv" + ID + "\"]').on('submit', function(event){" +
                    "event.preventDefault();" +
                    "var form = this;" +
                    "$.ajax({" +
                        "url: $(form).attr('action')," +
                        "type: \"POST\"," +
                        "data: {divID:$(form.divID).val(), titleN:$(form.titleNew).val(), descN:$(form.descNew).val()}," +
                        "success: function (response) {" +
                            "alert('response');" +
                        "}" +
                    "});" +
                "});" +
            "});" +
        "<\/script>";
    }
</script>
</body>
4

1 に答える 1

2

多くのよりクリーンなソリューションがあります。フォームを非表示にしてから、[編集] をクリックして表示します。これは、両親のIDを取得する例です。

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>

<style>
    .editForm {
        display:none;
    }
</style>
<script>
</script>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {

    $('.edit').click(function() {
        $('.editForm').fadeIn();
    });

    $('a.submit').click(function() {

        // get parents id
        var parentId = $(this).parent().parent().parent().attr('id');

        $.ajax({
          type: "POST",
          url: "some.php",
          data: { divId: parentId, aName: $('.aName').val() }
        }).done(function( msg ) {
          alert( "Data Saved: " + msg );
        });
    });

});
</script>

<body>

<div id="anId">
    <a class="edit">edit</a>
    <form class="editForm">
        <div>
            <input type="text" class="aName" />
            <a href="#" class="button submit">Submit</a>
        </div>
    </form>
</div>
</body>
</html>
于 2012-11-26T20:28:22.170 に答える