Django 自定义表单单选按钮

Posted 2023-05-09

【中文标题】Django 自定义表单单选按钮

【英文标题】：Django customize form radio buttons

【发布时间】：2014-08-19 22:57:55

【问题描述】：

我的模板中有两个单选按钮，用于表示喜欢/不喜欢，应该只选择其中一个。我的模板中有以下代码，它工作正常，但它看起来真的很难看，想自定义它。

  <input type="radio" name="Like" value="Like">Like<br>
  <input type="radio" name="Like" value="Dislike">Dislike

我在视图中使用名称和值

 if request.POST.get('Like') == 'Like':
                con = UserContent(time=time, comment = comment, liked = True, disliked = False, doctor_id = doctor.id, user_id = request.user.id)
                doctor.likes += 1
                doctor.netlikes = doctor.likes - doctor.dislikes
                doctor.save()
                con.save()

            elif request.POST.get('Like') == 'Dislike':
                con = UserContent(time=time, comment = comment, liked = False, disliked = True,  doctor_id = doctor.id, user_id = request.user.id)
                doctor.dislikes +=1
                doctor.netlikes = doctor.likes - doctor.dislikes
                doctor.save()
                con.save()

我希望模板中的按钮是看起来像这样的图像按钮

    <div class="like">
         <input type = "radio" name = "Like" value = "like" <img style="max-width: 100px;"src="/static/meddy1/images/like_option.png">
        </div>

        <div class="dislike">
           <input type = "radio" name = "Like" value = "Dislike" <img style="max-width: 100px;"src="/static/meddy1/images/dislike_option.png">
        </div>

我尝试过这样做，但它们不起作用。我不确定单选按钮是否是最好的选择。我只想选择其中一个，因为它们是表单的一部分。知道该怎么做吗？

【参考方案1】：

那里有一个错字导致图像不可见，试试这样：

    <div class="dislike">
       <input type = "radio" name = "Like" value = "Dislike" ><img style="max-width: 100px;" src="/static/meddy1/images/like_option.png">
    </div>

    <div class="like">
       <input type = "radio" name = "Like" value = "Like" ><img style="max-width: 100px;" src="/static/meddy1/images/like_option.png">
    </div>

【参考方案2】：

如果我必须做你想做的事情，我会使用两个按钮，一旦点击按钮，我就会向服务器发送一个 $POST 请求......

所以你有 2 个按钮：

<style>
.vote
    background-color:#CCCCCC;

.vote:hover
    background-color:#666666;
    color:white;

</style>

<button class="vote" data-type="like">Like</button>
<button class="vote" data-type="dislike">Dislike</button>

一旦点击其中任何一个，此函数就会将数据发送到服务器。请记住，您需要将 csrf 令牌发送到服务器，否则会出现 403 错误，除非您在 django 视图中使用 @csrf_exempt，我不推荐这样做。

$(".vote").click(function()
    var vote = $(this).data('type');
    var token = " csrf_token ";
    var url = "your/url/"

    jQuery.post(url,  vote: vote , csrfmiddlewaretoken: token   , function(data) 
      // ## deal with the response...
    );
); 

在服务器上：

将 csrf 标记包含到呈现带有按钮的模板的视图中。我通常将所有内容都放在 params 字典中：

params = 
params.update(csrf(request))
params['whatever'] = "another variable that you need to send to the template"
params['other']= "you get the point, right?"

## render the view with the params
## they become accessible on the template like this :  whatever

return render_to_response('your_template_name',params)

在处理 POST 的视图中使用类似的东西

try:
    vote = request.POST['vote']
    ## do whatever you need with the vote value
except:
    ## deal with the exception here

把它们放在一起：

网址

url(r'^votes/$',  'app_name.views.votes', name='votes'),

查看

from django.core.context_processors import csrf
from django.shortcuts import render_to_response, redirect
from django.http import HttpResponse

def votes(request):
    params = 
    params.update(csrf(request))

    if request.method == 'POST':
        ## Processing
        try:
            vote = request.POST['vote']
            ## do whatever you need
            return HttpResponse('Your vote was '+vote)
        except:
            return HttpResponse('There was an error')

    else:
        ##Displaying the initial view 
        return render_to_response('votes_template',params)

模板

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

<style>
.vote
    background-color:#CCCCCC;

.vote:hover
    background-color:#666666;
    color:white;

</style>

<button class="vote" data-type="like">Like</button>
<button class="vote" data-type="dislike">Dislike</button>

<script>
$(document).ready(function()
    $(".vote").click(function()
        var vote = $(this).data('type');
        var token = " csrf_token ";
        var url = "/votes/"

        jQuery.post(url,  vote: vote , csrfmiddlewaretoken: token   , function(data) 
            alert(data)
        );
    ); 
); 
</script>

老实说，我不能做得比这更好。我注意到您已经为此苦苦挣扎了几天，所以这是我为回答您的问题所做的最大努力

【讨论】：

我应该把第二个代码块放在哪里？在我的模板或视图中？我应该为 URL 输入什么？模板是 usercontent.html，def usercontent 视图在views.py 中。

如果你的意思是jquery函数，它应该在模板的底部。不要忘记将 jquery 添加到页面。此外，当视图呈现时，您需要将 csrf_token 作为参数传递给页面。我将更新答案以包含此