how to update form after a user select a choice

7 views
Skip to first unread message

xueqi dong

unread,
Mar 31, 2018, 7:15:03 AM3/31/18
to Django users

Hi, I would like to achieve the function as shown in the picture above. When an user click the radio button Lottery 1, Lottery 1 in the table above will become highlighted by colour yellow. When the form is initially rendered, neither lotteries are highlighted.

I googled this and it seems that this has to be done on the client side and has little to do with Django. But I am not sure how to track the value of the selected choice in html. I know I can get the value of the submitted choice use forms.cleaned_data in views.py.

In my form.py I have 
class AnswerForm(forms.Form):
    ANSWER_CHOICES = (
        (1, 'Lottery 1'),
        (2, 'Lottery 2'),
    )
    answer = forms.ChoiceField(choices=ANSWER_CHOICES, widget=forms.RadioSelect)
    question = forms.IntegerField(widget=forms.HiddenInput)

In problems.html template I have 

<!DOCTYPE html>
<html lang="en">



<p>Please make a choice between two lotteries.</p>
<p>Which lottery do you want choose   </p>



 <head>
      <title>Two lotteries</title>
   </head>
<body>
       <table BORDER=1 WIDTH="40%" HEIGHT="40%" border = "1" bordercolor = "green">
         <tr>
            <td>               </td>
            <th>State 1</th>
               <th>State 2</th>
               <th>State 3</th>
         </tr>

         <tr bgcolor = {{colour1}}>
            <td>Lottery 1</td>
            <td>{{ problem.0 }}{{ sltlottery }}</td>
             <td>{{ problem.1 }} </td>
             <td>{{ problem.2 }}</td>
         </tr>

           <tr bgcolor ={{colour2}}>
            <td>Lottery 2</td>
            <td> {{ problem.3 }} </td>
             <td> {{ problem.4 }} </td>
             <td> {{ problem.5 }} </td>
         </tr>

      </table>

   </body>



<form action=" " method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input  type="submit" value="Submit">
</form>

It looks like i need a logic statement like the following :  if selected choice =1, colour 1= "yellow", colour 2= "white"  else: colour 2= "yellow", colour 1= "white"

There are two crucial steps I am not sure how to do.

First, after an user select on choice by click the Radio button, how can I track the associated value?  For example, when Lottery 1 is selected, I need selected choice =1.
Second, what is the easiest way to set write the logic statement in html? I am even not quite sure where to put the logic statement...

Any help would be much appreciated!

Xueqi

Jani Tiainen

unread,
Mar 31, 2018, 8:03:08 AM3/31/18
to django...@googlegroups.com
Hi,

You need to write a piece of javascript that attaches to your radio buttons to call some javascript function to do what ever you want to happen.

You can use js libraries like jquery to make things easier.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/3bca5139-ff0c-4124-a937-947b33bd2c4c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

xueqi dong

unread,
Mar 31, 2018, 9:07:44 AM3/31/18
to django...@googlegroups.com
Hi thanks for advice. Though could you please provide an example somewhere? my application probably needs to use javescript once  - it is a bit hard to learn javascript from the beginning...

.......................................................................................................................
Xueqi Dong 
Teaching Fellow, Economics group, Newcastle University Business School
5 Barrack Road, Newcastle, NE1 4SE, UK
Tel: +44  7780113210
Email: xueqi...@gmail.com
Linkedin: https://sites.google.com/site/xueqidotdong/home

To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/sQDVzoL6D_0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users+unsubscribe@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
Reply all
Reply to author
Forward
0 new messages