Question

我的模板中有两个单选按钮，用于喜欢/不喜欢，只应选择其中任何一个。我在我的模板中使用了以下代码并且工作正常，但它看起来非常难看，并且想要自定义它。

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

我尝试过这些，但他们不能工作。我不确定单选按钮是否是最好的方式。我只想要选择其中一个，因为它们是表单的一部分。知道如何去做吗？

Answer 1

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

所以你有两个按钮：

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

老实说，我做得不比这更好。我已经注意到你现在已经挣扎了好几天了，所以这是我尽力回答你的问题

Answer 2

那里有一个错误的错误导致图像不可见，请尝试这样：

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

Django自定义表单单选按钮

2 个答案:

全部放在一起：

网址

视图

模板