In the web page that I am working on I have to setup a page that allows the user to choose two files and compare them. They are given three choices. One of these choices uses a text box for user input. When I try implementing this I found that the text box was not connected to the intended option. It could be accessed from the other options. I would like help fixing my text box so that it is exclusively connected to the third object "substrings".
<form action="/compare" enctype="multipart/form-data" method="post">
<button> Choose File 1</button><br>
<button>Choose File 2</button><br>
<input type="radio" name="compare" value="lines"> lines<br>
<input type="radio" name="compare" value="sentences"> sentences<br>
<input type="radio" name="compare" value="substrings"> substrings
<input type="number" min="1" placeholder="length of substring n"/><br>
<button type="submit">Compare</button>
</form>
Related
I am doing a django project.
But I wanted to have radio buttons grouped as well as name of the buttons to work with django.
Is it okay to use two name attributes in one HTML tag?
Will I be facing any errors if I do so?
Below is my code I am stuck in.
<input type="radio" name="group1" name="removePunc"> Remove Punctuations
<br>
Input name attributes must be unique to send data using traditional forms. If you find yourself needing more attributes, use the data- attributes. Pls share some code to undertand what you are trying to achieve.
If you want to label the group of radio buttons add class="group1" to all of the radio buttons instead of name="group1".
<label for="removePunc">Remove Punctuations</label>
<input type="radio" class="group1" name="removePunc">
<label for="button2">Button 2</label>
<input type="radio" class="group1" name="button2">
<label for="button3">Button 3</label>
<input type="radio" class="group1" name="button3">
I am not good with front-end and HTML is what I would ideally like to work with here (if I can avoid engaging js/jquery here). I have a single textbox with multiple radio buttons - say, item1, item2,...item5. Each item1, 2... corresponds to a field. When a user enters, say, 'abc' in a textbox and selects 'item3', it should return all items having 'abc' in item3 field. I can do it with individual textboxes for each item1, 2.. but I need just one textbox associated with all the radio fields.
Here's the relevant html/template code.
<form action={% url 'search-fields-radiofields' %} method="get">
<div align="left">
<input type="text" name="name" size="54" />
<br><br>
<input type="radio" id="radio1"name="name">
<label for="radio1">item1</label>
<input type="radio" id="radio1"name="name">
<label for="radio2">item2</label>
<input type="radio" id="radio1"name="name">
<label for="radio3">item3</label>
<input type="radio" id="radio1"name="name">
<label for="radio4">item4</label>
<input type="radio" id="radio1"name="name">
<label for="radio5">item5</label>
<br><br>
<input id="search_fields" type="submit" value="Search" size="100"/>
</div>
</form>
Say, the search term is 'test'. And I select item5. Returns a MultiValueDictKeyError with Get data of
Variable Value
u'name'[u'test', u'on']
. name is one of the fields in the db and item5 is supposed to correspond to it. Similarly, if I change the textbox name to 'item1', then Get data is
Variable Value
u'item1' [u'test', u'on']
I have a dedicated view to handle all the radio inputs and it works with individual textboxes corresponding to each of the items. But I need to associate all 5 radio buttons with only 1 textbox as above.
There's no need to "associate" the buttons with the text box at all.
What you are missing is that each of the radio buttons themselves needs a value. Once you've done that, but given them a different name, you're all set.
<input type="text" name="name" size="54" />
<input type="radio" id="radio1" name="field" value="item1">
<label for="radio1">item1</label>
<input type="radio" id="radio1" name="field" value="item2">
<label for="radio2">item2</label>
...etc
Now request.GET will be {'name': 'test', 'field': 'item1'} or whatever.
Thanks all. Solved it from backend myself. The problem was that I was trying to get the request to send just the text value with the key=whatever-radio-is-selected. What I did was looked at the request it was sending which was name=? and textbox=? and then used these two keys to send the right response.
I work on a large Backbone application at work. The interface is essentially a big form. We use the name attribute to map our inputs to our model properties so we can autosave each field on change or enter, letting Backbone do its thing. I just spent two days trying to figure out why one particular section causes the page to reload with a weird URL. The answer is obvious now, but after building a big app over 9 months, you tend to overlook the small things.
Throughout the application we use <input> all over the place without a wrapping <form>. In one case, however, we have a repeating element in the form of a Handlebars template that contains radio buttons with the same name:
<div id="1">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="2">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="3">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
The problem with this is that they get grouped together because of they all have the same name attribute. So, instead of getting 3 values (one for each group), we were getting 1 value (for one big group).
Since we know that radio button groups are "scoped" to the containing <form>, we just wrapped it:
<div id="1">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="2">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="3">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
This works just fine for the radio buttons, but now that we have a form, hitting enter on the text <input> actually submits the form, instead of autosaving (technically, in addition to autosaving). At the time, this never even occurred to me, since we somehow managed to avoid this everywhere else in the application.
I can think of a few different solutions to this problem: setting a submit handler on the form, setting a submit handler on the text input, leaving the text input outside the form. But these seem like hacks to deal with what I would say is broken behavior. If input elements work outside of forms, then grouping input elements should work outside of forms. And since we're already using the name attribute (which works for everything else), unique names isn't really an option.
So is there a best practice for situations like this? Is there an element other than <form> that will properly scope radio buttons? Am I just going to have to live with <form onsubmit="return false;">?
P.S. We support IE 8+
UPDATE
This is what I ended up with:
<div id="1">
<form onsubmit="return false;">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
</form>
<input type="text">
</div>
Best thing to do would be to change the names of each group to be unique.
Second best would be to group them by form like you have done, and add the return false.
Third best would be to block form submission using jquery 'preventdefault' (which could work for all forms given a particular id).
Last (and the most ridiculous option) would be to send each group of buttons to it's own small html file and use iframes to display them on the same page.
The long and short of what I need to be able to do is to have HTML that consists of five or more radiobuttons. Based on the radiobutton choice, a freeform textarea will then be filled with text of my choosing to then later be parsed and sent to the server.
I am able to create the radiobuttons, the text area, and have the parse code. I'm having trouble prefilling my text to the textarea based on the radiobutton choice.
Help?
Use this code in the body tag of the document:
<textarea id="txt"></textarea><br />
<script>
txt=document.getElementById("txt");
</script>
<input type="radio" onclick="txt.value='value1'">
<input type="radio" onclick="txt.value='value2'">
<input type="radio" onclick="txt.value='value3'">
<input type="radio" onclick="txt.value='value4'">
<input type="radio" onclick="txt.value='value5'">
I have the following form code but I cannot select the sell radio in IE
and I can select both radios at once in Google Chrome.
<form method="post" action="dothemath.php" style="width: 403px" class="style1">
<input type="radio" id="rdobuy" style="width: 20px; height: 21px;" checked="checked"/>
<label>Buy</label>
<input type="radio" id="rdosell" style="width: 20px; height: 21px;"/>
<label >Sell</label>
</form>
Is there any thing I am missing...?
Your radio buttons don't have name attribute. They need them for two reasons.
Having the same name groups a set of radio buttons into a single radio group
The name is used to generate the form data to be submitted to the server
You also need a value to say what the submitted data is going to be.
As an aside, your <label>s are useless as they aren't associated with any controls. They need a for attribute with the same value as the id of the control they are to be associated with.
<form method="post" action="dothemath.php">
<input type="radio" id="rdobuy" name="foo" value="buy" checked="checked"/>
<label for="rdobuy">Buy</label>
<input type="radio" name="foo" value="sell" id="rdosell" />
<label for="rdosell">Sell</label>
</form>
You should add a name attribute and the names should be same for both radios.
you should add a name attribute to all your HTML element listed in your code. it helps the browser to identify what it sends to the server. Radios are optional based, you cant select two at a time, except you're using php arrays, simply use a check button instead for that.