Question

您好我在按下编辑按钮时尝试显示表单，然后按下表单的保存按钮后，我想编辑我的数据库并显示新信息。我需要这样做而不刷新页面。我是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>

Answer 1

有许多更清洁的解决方案。我只是隐藏表单，然后单击编辑显示它。以下是获取父母身份的示例。

<!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>

网站上的动态表单

1 个答案: