1

How do I add a text box next to a radio button using django forms? I already got the setup for the radio buttons alone.

I would also like to store the value of the text box instead of "Other".

forms.py

from django import forms
from .models import MyModel

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = (
            'question',
        )
        widgets = {
            'question': forms.RadioSelect,
        }

models.py

class MyModel(TimeStampedModel):
     Choice1 = "Choice 1"
     Choice2 = "Choice 2"
     Other = "Other"
     MyModel_Choices = (
         (Choice1 = 'Choice 1'),
         (Choice2 = 'Choice 2'),
         (Other = 'Other'),
     )

     question = models.CharField(
         _('Question'),
         max_length=100,
         choices=MyModel_Choices,
         help_text='Help Text'
     )

Expected Output:

Question:

  • Choice1
  • Choice2
  • Other [textbox]

Help Text

Community
  • 1
  • 1
mionnaise
  • 188
  • 1
  • 18

3 Answers3

0

If the text box is not in your Django form, as its not one of the input in your form, then you can simply put that text in a div in your html and using the css display properties of inline or inline-block, you can display that div next to the "Other" radio button

see this -> http://www.w3schools.com/cssref/pr_class_display.asp

Ankush Raghuvanshi
  • 1,392
  • 11
  • 17
  • I would want it to be in my Django form, I would want it to be one of the inputs in my form (replacing 'Other'). – mionnaise Jul 20 '16 at 07:03
  • You want it to be dynamic or what? Coz i think if you write that text in place of 'Other' in your MyModel_Choices only, i suppose it should work.? – Ankush Raghuvanshi Jul 20 '16 at 07:15
  • I want it to be dynamic, user inputs it. – mionnaise Jul 20 '16 at 07:21
  • Just to confirm using an example, you'll ask your web-app user that what is his/her favorite fruit? And you'll give them the options of Apple, Guava and the last option being Other. And now if the user clicks on Other, then a text input box appears and the user can input his/her favorite fruit say "Grapes" and submit the form. Is this what you want @Markkkkk ? – Ankush Raghuvanshi Jul 20 '16 at 07:34
  • I've added another answer. That should work for you. – Ankush Raghuvanshi Jul 20 '16 at 07:45
0

I don't think it would work even if you could specify the widget since you'd have no where to store it in the model - your question field is limited to the choices you set in the model.

You might want to rethink your design, you could have a separate input below the radio buttons that is only required (perhaps?) if the radio choice is other.

This would be how it would have to process the code when posting anyway since all inputs would need a name assigned to them.

Sayse
  • 42,633
  • 14
  • 77
  • 146
0

Add another input field to your django form in forms.py

Now in your javascript file, hide that input when page loads.

$("#user-input-textbox").hide();

And display it when the 'Other' radio button is checked and hide it when it is unchecked and also clear the existing value before hiding:

$('#Other').click(function(){
    if ($(this).is(':checked')){
        $("#user-input-textbox").show();
    }
    else{
         $("#user-input-textbox").html('');
         $("#user-input-textbox").hide();
    }
});
Ankush Raghuvanshi
  • 1,392
  • 11
  • 17
  • This would require me to add another input field? therefore another column in my models? – mionnaise Jul 20 '16 at 10:19
  • No, you don't have to. Technically, there are two ways to do it. First is to use forms.Form instead of forms.ModelForm where u'll have the full luxury to add as many input fields and radio buttons according to you will independent of the model. Second method is to use your forms.ModelForm and simply include one extra field in it like this -> http://stackoverflow.com/questions/12097825/specifying-widget-for-model-form-extra-field-django – Ankush Raghuvanshi Jul 20 '16 at 10:48
  • Also you can make the new added input hidden by doing something like this -> http://stackoverflow.com/questions/15795869/django-modelform-to-have-a-hidden-input – Ankush Raghuvanshi Jul 20 '16 at 10:49