Question

这是我的模板代码

{% block content %}

<div class='main'>

<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
    {% csrf_token %}
    <h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
    <br/>
    <img src="{{ image.url }}" alt="Profile Image" height="100px" width="100px" />

    {{ form.profileimg.errors }}
    {{ form.profileimg }}
    {{ form.non_field_errors }}

    <br/>
    <h3>Enter or edit your details</h3> <br/>
    <textarea name='text' cols='50' rows='3'>{{ text }}</textarea>
    <h3>Current Workplace</h3>
    <br/>
    <input id="workplace" type="text" class="" name="workplace" value="{{ workplace }}">

    <h3>Telephone Number</h3>
    <br/>
    <input id="telephone" type="text" class="" name="telephone" value="{{ telephone }}">

    <h3>Address</h3>
    <br/>
    <textarea id="address" type="text" class="" name="address">{{ address }}</textarea>
    <br/>

    <input type="submit" value="Submit" >

</form>

</div>
{% endblock %}

form.profileimg非常简单，只有1个ImageField。

但由于某种原因，提交按钮无法点击？它在form.profileimg字段之前工作，我可以不混合使用Django Forms和普通的html吗？

浏览器来源：

<!DOCTYPE HTML>

<html>
    <head>
        <title>Social Network: Facemagazine</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="/static/social/css/main.css" />
    </head>
    <body class="loading">
        <div id="wrapper">
            <div id="bg"></div>
            <div id="overlay"></div>
            <div id="main">

                <!-- Header -->
                    <header id="header" class="whitebox">
                        <h1> Facemagazine </h1>
                        <p>Worlds second best social network! </p>
                        <nav >
                            <ul>

                                <li><a class='icon' href='/social/members/?view=julian'> <h3> Home </h3> </a></li>
                                <li><a class='icon' href='/social/members/'> <h3>Members </h3> </a></li>
                                <li><a class='icon' href='/social/friends/'> <h3> Friends </h3> </a></li>
                                <li><a class='icon' href='/social/messages/'> <h3> Messages </h3> </a></li>
                                <li><a class='icon' href='/social/profile/'> <h3> Edit Profile </h3> </a></li>
                                <li><a class='icon' href='/social/logout/'> <h3> Log out </h3> </a></li>

                            </ul>
                        </nav>

                    <br>


<div class='main'>

<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
    <input type='hidden' name='csrfmiddlewaretoken' value='kire68pdevP0JZt8gTUYSsj6Dit1cgro' />
    <h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
    <br/>
    <img src="/media/profileimgs/no-img.jpg" alt="Profile Image" height="100px" width="100px" />


    <input id="id_profileimg" name="profileimg" type="file" />


    <br/>
    <h3>Enter or edit your details</h3> <br/>
    <textarea name='text' cols='50' rows='3'>Test Details</textarea>
    <h3>Current Workplace</h3>
    <br/>
    <input id="workplace" type="text" class="" name="workplace" value="Workplacee">

    <h3>Telephone Number</h3>
    <br/>
    <input id="telephone" type="text" class="" name="telephone" value="Telefon">

    <h3>Address</h3>
    <br/>
    <textarea id="address" type="text" class="" name="address">adres</textarea>
    <br/>

    <input type="submit" value="Submit" >

</form>

</div>

                    <br>
                    </header>


                <!-- Footer -->
                    <footer id="footer">
                        <span class="copyright">&copy; Group 45</span>
                    </footer>

            </div>
        </div>
        <!--[if lte IE 8]><script src="/static/social/js/ie/respond.min.js"></script><![endif]-->
        <script>
            window.onload = function() { document.body.className = ''; }
            window.ontouchmove = function() { return false; }
            window.onorientationchange = function() { document.body.scrollTop = 0; }
        </script>
    <script src="/static/social/scripts.js"/>
    </body>
</html>

Answer 1

问题是页脚。 CSS搞砸了，所以在某种程度上覆盖在按钮顶部。

Django表单提交按钮不可点击/工作

1 个答案: