Distinguishing checkboxes with the same ID in different classes - html

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>

Related

HTML Checkboxes in Form POST

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.

Save the value of checked checkbox as 1

How can I save the value of checked checkbox as 1 and unchecked as 0, I'm using boolean on my model.
<div class="form-check form-check-inline">
<input name="vat" class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" [(ngModel)]="VatExempt">
<label class="form-check-label" for="inlineCheckbox1">VAT EXEMPT </label> <div class="row pl-4 font-italic">(Check if PEZA member)</div>
</div>
You can use a getter (other variable)
get VatExemptInt(){
return VatExempt?1:0
}
By the way, it's a common use camel-case to name the variables (better vatExempt, than VatExempt)

Can a <FORM> submit radio-button's <LABEL> as VALUE?

We currently use the following syntax for radio buttons:
<input type="radio" id="opt1" name="option" value="opt1" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="opt2" required/>
<label for="opt2">Description of Option Two</label>
The query-processing script receives the string "opt1", which it then needs to convert to the full-text description of the option. In PHP-speak, I get:
$_POST['option'] => "opt1"
I'd like to save that step and have the full text of the description to be submitted as the value:
$_POST['option'] => "Description of Option One"
Can this be done with HTML alone -- without resorting to JavaScript-rewriting hacks and without duplicating the description text in the HTML? Thanks!
Unfortunately not.
If you have control over the form, the best solution is to use the description for the value:
<input type="radio" id="opt1" name="option" value="Description of Option One" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="Description of Option Two" required/>
<label for="opt2">Description of Option Two</label>
If you don't have control over the form, then javascript is your only solution, you could use a function like the below (either inside an onload event for the page or an onsubmit event on the form:
function radioUpdate() {
document.querySelectorAll('radio').forEach(function(input) {
input.value = document.querySelector('label[for="' + input.id + '"]').text();
});
};
No, it can't.
Consider generating the HTML from your server side code in the first place. You could write a PHP function that takes the label/value as a single argument.

Multiple radiobutton groups with the same names?

Is it possible to have multiple radiobutton groups in one form with the same name values?
I'm working on a quiz which consists of multiple (questions) radiobutton groups like:
<div class="question">
<p><b>Question 19</b></p>
<div class="choices">
<input type="radio" name="choice-for-question-98" id="choice-98-1" value="389">
<label for="choice-98-1">e duhur </label><br>
<input type="radio" name="choice-for-question-98" id="choice-98-2" value="388">
<label for="choice-98-2">qëllim</label><br>
<input type="radio" name="choice-for-question-98" id="choice-98-3" value="387">
<label for="choice-98-3">drejt</label><br>
<input type="radio" name="choice-for-question-98" id="choice-98-4" value="386">
<label for="choice-98-4">e drejtë</label><br>
</div>
</div>
What I want is to get a list of "answer" attributes in POST but when I set the same names for different questions, user can choose only one radiobutton from all questions.
No.
The name is the mechanism used to define which group a radio button belongs to.
You could use similar, but different, names and then look for them on the server with a loop.
e.g.
name="choice-for-question-98-group-1"
and
my $choice;
my $group = 1;
while ($choice = $q->param("choice-for-question-98-group-" . $choice)) {
do_something_with($choice);
$group++;
}

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>