Question

我想在按下提交按钮后应该添加.after()属性的div上显示表单内容。

问题1：我还没有验证表格，所以当我按下提交按钮时，div没有添加..为什么？它将如何运作？

问题2：
验证后如何将表单元素写入div？

<!doctype html>
<html>
    <head>

        <title>prepend demo</title>
        <style>
            #PostDiv{
                position:relative; 
                top:2%; 
                left:30%;
                height:500px;
                width:600px;
                border:1px solid black;
                display:none;
            }
            #textField{
                position:absolute;
                left:20%;
                top:5%;
                height:25px;
                width:400px
            }
            #textArea{
                position:absolute;
                left:20%;
                top:30%;
                width:400px;
            }
            #addBut{
                position:absolute;
                display: block;
                padding: 3px 10px;
                cursor: pointer;
                top:75%;
                left:40%;
                height:8%;
                width:20%;
                font-size:150%;
            }
            #postAd{
                position:absolute;
                left:94%;
                top:0%;
            }   

            .content{
                position:relative;
                background-color: white;
                width: 500px;
                height:350px;
                padding: 25px;
                border: 5px solid black;
                display:block;
                margin-left:auto; 
                margin-right:auto;
                top:200px; 
                z-index:99999;
            }
            </style>
            <script src="jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <form>
            <div id="PostDiv">
                <label style="position:absolute;font-size:160%;top:5%; 
                left:8%;" for=textField">Title:</label>
                <input type="text" id="textField">
                <label style="position:absolute;font-size:160%;top:20%; 
                left:8%;" for="description">Description: </label>
                <textarea id="textArea" rows="12"></textarea>
                <input type="submit" id="addBut" value="Submit">//this is submit button
            </div>
        </form>

        <input type="button" id="postAd" value="Post an ad">
        <script>
            $(document).ready(function(){
                $("#postAd").click(function(){
                    $("#PostDiv").show();
                });
                var count=0;
                $("#‎addBut").click(function(){
                    $("#PostDiv").remove();
                    $('body').after('<div class="content" id="first'+count+'"></div>'); //This is div which is supposed to be added after pressing submit button
                    count++;
                });
            });
        </script>

    </body>
</html>

注意：
运行代码时，您会看到一个按钮（发布广告）。按下它后，您将看到尚未验证的表格。按下提交按钮时，表单将消失，并且应创建一个不使用.after()属性创建的div。我是jquery的新手任何人都可以告诉我为什么提交按钮不起作用？

Answer 1

单击提交按钮时，您需要阻止提交表单。

$("#addBut").click(function(e){
e.preventDefault();

Answer 2

这是一个工作https://jsfiddle.net/cshanno/mp8Ltgxt/2/

的小提琴

至于提交表单，你可以在发送ajax帖子的click方法中调用一个函数，或者在你的提交中调用你想做的任何事情。此外，您应该考虑将CSS和JS分离为单独的文件，尤其是摆脱所有内联CSS样式。它使我们难以维护，并且难以阅读。

HTML

<button type='button' id='show'>Place Ad</button>
<div id='container'>
    <p>
        <label>Title:</label>
    </p>
    <input type='text' id='txtTitle' />
    <p>
        <label>Description:</label>
    </p>
    <textarea id='txtDescription'></textarea>
    <button type='submit' id='submit'>Submit</button>
</div>

CSS

#container {
    text-align:center;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    position:relative;
    display:none;
}
.content {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

JS

var count = 0;
$('#show').click(function () {
    $('#container').toggle();
    $('.content').hide();
});
$('#submit').click(function (e) {
    $('#container').toggle();
    $('body').after('<div class="content" id="first' + count + '"></div>');

    $('.content').show();
    count++;
});

如何添加容器以显示表单内容？

2 个答案: