HTML Checkboxes in Form POST - html

vI am working with HTML and have a form with a group of checkboxes:
-> What are your favorite colors?
---> Red
---> Green
---> Blue
Say I selected, Red AND Green. In the form post, I want it to look like: "favorite-color": ["red", "green"]. Now, it only shows one of the colors, even if I select multiple. Here is some sample code:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="red" name="color" value="red">
<label class="custom-control-label" for="red">Red</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="green" name="color" value="green">
<label class="custom-control-label" for="green">Green</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="blue" name="color" value="blue">
<label class="custom-control-label" for="blue">Blue</label>
</div>
My post, when I select red AND green:
{'color': 'green'}
By the way, I am using Django as my backend to parse the form POST.
Is there a way to do this? Thanks!

Via this blog:
For multiselects or inlines (one-to-many fields) that have multiple values, use .getlist():
So:
request.POST.getlist("color")

Give all the input type="checkbox" elements the same value for their name attribute and then the values from the checked checkboxes will be submitted as a single value for the one name. In most server-side environments, that means that if you request that form value, you'll get all the values with the single form field request.

Related

For loop - bind dynamic key to the #id

I have a for loop that displays the data into multiple radio-buttons (bootstrap):
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" id="choice.id"> [[choice.content]]
</label>
</div>
As you can see, I wanted to use the choice.id for id="..." in each button, technically it should look something like this:
<input type="radio" name="optradio" id="1"> Choice1
<input type="radio" name="optradio" id="2"> Choice2
<input type="radio" name="optradio" id="3"> Choice3
But it renders it with the actual string choice.id:
<input type="radio" name="optradio" id="choice.id"> Choice1
<input type="radio" name="optradio" id="choice.id"> Choice2
<input type="radio" name="optradio" id="choice.id"> Choice3
Forgive my naiveness. Any help/advices? Thanks a lot!
It renders with choice-id string because you add plain string as the id value, not a variable value
You can use v-bind directive or the shorthand for v-bind -> :id
<div class="radio" >
<label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
<input type="radio" name="optradio" v-bind:id="choice.id"> [[choice.content]]
</label>
</div>
using shorthand <input type="radio" name="optradio" :id="choice.id">
To answer your questions in the comments.
You can ' separate 'the radios by adding them in a ' group ' using the name attribute. Radios with the same name attribute are in one group. Changing their values won't affect other radios in other groups ( with different name attributes ). See example below.
Or you can use vue v-model to separate and get the selected options.
new Vue({
el: "#radio-app",
data: {
question1: '',
question2: ''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://github.com/vuejs/vue-devtools"></script>
Question1:
<input type="radio" name="question1" id="q1choice1" value="choice1"/>
<input type="radio" name="question1" id="q1choice2" value="choice2"/>
Question2:
<input type="radio" name="question2" id="q2choice1" value="choice1"/>
<input type="radio" name="question2" id="q2choice2" value="choice2"/>
<hr />
<h2> Or with VUE v-model </h2>
<div id="radio-app">
Question1:
<input type="radio" id="q1choice1vue" value="choice1" v-model="question1">
<input type="radio" id="q1choice2vue" value="choice2" v-model="question1">
Question2:
<input type="radio" id="q2choice1vue" value="choice1" v-model="question2">
<input type="radio" id="q2choice2vue" value="choice2" v-model="question2">
<div>Question 1 selected answer: {{ question1 }}</div>
<div>Question 2 selected answer: {{ question2 }}</div>
</div>
Check more here
VUE template syntax
v-bind directive
Use: v-bind:id="choice.id" or the short version :id="choice.id"

Selenium radio input return element not interactable

I am using selenium and python 3.X to login into a bank.
I have a input type="radio" class="switch-input" with two options Personal/Business when default is Personal
elem1=browser.find_element_by_id('business')
elem2=browser.find_element_by_id('personal')
and checking with
elem1.get_attribute('checked')
elem2.get_attribute('checked')
I am getting the expected results (True for the elem2 and None for elem1)
But when using elem2.click() i am getting error :
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
I tried to change to find_element_by_xpath and to wait but the same results.
Any ideas?
Here is the HTML code:
<div class="custom-switch">
<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view" id="personal" value="Personal" checked="checked" />
<label for="personal" class="switch-label switch-label-on personal">Personal</label>
<input type="radio" class="switch-input" name="view" id="business" value="Business" />
<label for="business" class="switch-label switch-label-off business">Business</label>
<span class="switch-selection"></span>
</div>
</div>
The answer was to press on the label
browser.find_element_by_xpath('//label[#for=\'business\']').click()

Distinguishing checkboxes with the same ID in different classes

Hope you can help me regarding webscraping via VBA. In a webform I have to check and uncheck checkboxes using VBA. Now I run into the difficulty that some checkboxes have the same ID but reside in different classes.
Example:
Class "filter" has a checkbox with ID "start_date" and class "return_fields" has a checkbox with ID "start_date". When using .getElementByID("start_date") both checkboxes switch simultaneously.
But in this case I want to have the checkbox in class "filter" to be checked and the one in "return_fields" to be unchecked.
So I've attempted something like
.getElementsByClassName("filter")(0).getElementById("start_date").checked = True
.getElementsByClassName("return_fields")(0).getElementById("start_date").checked = False
Unfortunately this returns an error "Object doesn't support this property or method".
Here is the content of the element I get with .getElementByClassName("filter"):
<legend>Date Mode</legend>
<div class="start_date required">
<label for="active_date">Start Date</label>
<input name="date_mode" class="radio" id="start_date" type="radio" checked="checked" value="start_date">
</div>
<div class="report_date required">
<label for="report_date">Report Date</label>
<input name="date_mode" class="radio" id="report_date" type="radio" value="report_date">
</div>
<div class="end_date required">
<label for="end_date">End Date</label>
<input name="date_mode" class="radio" id="end_date" type="radio" value="end_date">
</div>

Radio input not changing value?

I have a radio input that is not changing values when selected. It is simply saying Domain is the value all the time.
<div class="col-xs-2">
<label class="radio-inline" for="AccountType_Domain"> <input id="AccountType_Domain" name="AccountType" type="radio" value="Domain">Domain</label>
<label class="radio-inline" for="AccountType_Local"> <input id="AccountType_Local" name="AccountType" type="radio" value="Local">Local</label>
</div>
At first I was using #html.RadioButtonFor but that was causing the 2 inputs to have the same id.
When executing $("input:radio[AccountType]").val() I am only getting Domain no matter what is selected.
You have to use the :checked css selector.
So, to get the value of the selected AccountType item in jQuery, it will look as follows:
$('input[name=AccountType]:checked').val()
You need to use:
$("input[name='AccountType']:checked").val()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-xs-2">
<label class="radio-inline" for="AccountType_Domain"> <input id="AccountType_Domain" name="AccountType" type="radio" value="Domain" checked>Domain</label>
<label class="radio-inline" for="AccountType_Local"> <input id="AccountType_Local" name="AccountType" type="radio" value="Local">Local</label>
</div>

Payment options with radio buttons in the contact form

My form is currently set up to gather all the input data to my autoresponder...however, I made the form with only one option - pay now. Users would like options, so Im thinking of giving them 2 choices, the old "pay now" COD method, and option#2 paypal. I think radio buttons are the best way for doing this. However I cant get them to work separately...when I choose option 2, option 1 remains selected. So I added the radio buttons myself after the ordernow button.
<p>mail: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__email" name="mail" class="mj" ></input>
</label>
</p>
<p>name: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__required" name="name" class="mj" ></input>
</label>
</p>
<p>
<input type="submit" value="ORDER NOW" class="butt">
<div class="selectpaymentradios">
<label class="radio" >select payment</label>
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
</div>
<input type="hidden" name="webform_id" value="12x45"/>
</p>
</form>
<script type="text/javascript" src="http://xyz.com/view_webform.js?wid=12x45&mg_param1=1"></script>
Im trying to figure out how can I make this work with my autoresponder, I think this form has to be able to tell me what kind of payment did the customer chose...but the autoresponders form creator doesnt have radio buttons at all so Im stuck, I dont know if its possible...
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
the problem you hit, is very simple - you have to use the same name for all radio-buttons, where only one item should be selected. like this:
<input class="radio" type="radio" name="payment" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="payment" value="ppal" /> <span>PaypaL</span>
The name attribute should be the same for both radio buttons:
<input class="radio" type="radio" name="method" value="cash" checked="checked" /> <span>Ca$h</span>
<input class="radio" type="radio" name="method" value="ppal" /> <span>PaypaL</span>
Also, if you are closing input tags, you are probably worried about XHTML validation. So instead of just checked you should type checked="checked".