在表单中提交div内容

时间:2014-12-21 19:28:42

标签: javascript html

在表单中提交div内容。我在div中检索了数据库记录,现在想要将div的内容插入到数据库中。我怎样才能做到这一点。

<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">

$(document).ready(function (e) {
    $("#SignupForm").on('submit',(function(e) {

        e.preventDefault();

        $.ajax({

url: "insert.php",


            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
$('#loader').hide();
$('#alerts').delay(2000).fadeOut('slow');
            },
            error: function() 
            {
            }           
       });
    }));
});
</script>


<form>
<div id="targetLayer"></div>
<input type=text id="targetLayer" name="targetLayer">
<input submit>
</form> 

1 个答案:

答案 0 :(得分:0)

我不建议将div内容提交到您的数据库。恶意用户可以在div中放置他们想要的任何内容并提交它。它还使您的用户界面与页面逻辑紧密耦合,并且可能涉及大量字符串解析,否则可以避免。

我在你的评论中看到div将有一个名单列表,我会研究获取此列表的其他方法,而不是将其放在HTML中。

如果这真的是你想要做的。假设div是您的#SignupForm元素的子元素,我会将div内容检索方法放在您的提交事件处理程序中,如下所示:

$("#SignupForm").on('submit',(function(e) {
        e.preventDefault();
        //
        //Get the div content
        //Replace #idofdiv with the selector for your div
        var divContent = $('#idofdiv',this).text()
        //
        //Put it in the form data
        //Change listOfNames to the name that you want the data to be posted as
        var formData = new FormData(this)
        formData.append("listOfNames", divContent)
        //
        $.ajax({
            url: "insert.php",
            type: "POST",
            data:  formData, //Change so it gets the right form data
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
                $("#targetLayer").html(data);
                $('#loader').hide();
                $('#alerts').delay(2000).fadeOut('slow');
            },
            error: function() 
            {
            }           
       });
    }));
});