D3: select only unchecked checkboxes - d3.js

It seems very easy but somehow I can not find anything on the matter neither on stackoverflow, nor by googling it. Basically I need to just select all unchecked checkboxes on the page with d3 and disable them. How to do that?

You can select unchecked checkboxes with a css pseudo selector using d3.selectAll(), and then set the disabled property with selection.property("disabled",true);
var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
.property("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
Though you should be able to use .attr("disabled",true) as well:
var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
.attr("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">

Related

Submit checkbox values to Controller

I am having the following form, which I would like to submit to my backend.
<form id="revisionFilter" action="{{ route('revision.filter') }}" method='POST'>
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
1
</label>
<input class="form-check-input" type="checkbox" value="" id="checkbox0">
<label class="form-check-label" for="checkbox0">
0
</label>
<label class="form-check-label" for="checkboxNull">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="checkboxNull">
Null
</label>
<input type="hidden" name='_method' value='POST'>
<input id="revisionFilterSubmit" type="submit" class='btn btn-danger btn-sm' value='Filter'>
</form>
My backend looks like the following:
routes:
Route::post('/revision/filter', 'RevisionController#filter')->name('revision.filter');
RevisionController:
public function filter(Request $request)
{
Log::info("Request: ");
Log::info($request);
return redirect()->route('revision.rindex');
}
My problem is that when I press the button I am getting redirected to:
The page has expired due to inactivity.
Please refresh and try again.
Instead I would like to see the request with the values of the checkboxes to implement the db saving functionality.
I appreciate your replies!
since I've already made a comment. I will put my answer in the answer box lol.
To answer you, you're not getting any checkbox value since you're checkboxes don't have any name attribute.
You need to put a name attribute to them. E.g.,
<input class="form-check-input" type="checkbox" value="" name="checkbox0" id="checkbox0">
From there, you should now be able to see the value of the checkbox via its name.
Just put same name to your checkbox.For example
<input class="form-check-input" type="checkbox" value="" id="checkbox1" name="revisionFilter">
<input class="form-check-input" type="checkbox" value="" id="checkbox2" name="revisionFilter">

How to click on a nested checkbox using Capybara

I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)

Why is PayPal ignoring discount_amount_cart?

I have been using PayPal Payments Standard. Everything has been working great. Now I want to add support for coupon discounts.
According to the documentation, the discount_amount_cart variable appears to be what I want:
Single discount amount charged cart-wide.
It must be less than the selling price of all items combined in the cart. This variable overrides any individual item discount_amount_x values, if present.
Applies only to the Cart Upload command.
So, I add the variable to my form:
<form id="Paypal" name="Paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input id="cmd" name="cmd" type="hidden" value="_cart">
<input id="upload" name="upload" type="hidden" value="1">
<input id="business" name="business" type="hidden" value="kelly#hopskipdesign.com">
<input id="custom" name="custom" type="hidden" value="Client">
<input id="discount_amount_cart" name="discount_amount_cart"
type="hidden" value="$4.00">
<input id="tax_cart" name="tax_cart" type="hidden" value="$1.65">
<input id="currency_code" name="currency_code" type="hidden" value="USD">
<input id="return" name="return" type="hidden" value="http://www.hopskipphotography.com/Order/Confirm/Client">
<input id="cancel_return" name="cancel_return" type="hidden" value="http://www.hopskipphotography.com/Order/Cart/Client">
<input id="cbt" name="cbt" type="hidden" value="Place Order">
<input id="item_name_1" name="item_name_1" type="hidden" value="Photo #6">
<input id="amount_1" name="amount_1" type="hidden" value="$20.00">
<input id="item_number_1" name="item_number_1" type="hidden" value="B49A8382">
<input id="quantity_1" name="quantity_1" type="hidden" value="1">
<input id="item_name_2" name="item_name_2" type="hidden" value="Photo #10">
<input id="amount_2" name="amount_2" type="hidden" value="$20.00">
<input id="item_number_2" name="item_number_2" type="hidden" value="B49A8428">
<input id="quantity_2" name="quantity_2" type="hidden" value="1">
<div class="checkout-button">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Check out with PayPal">
</div>
</form>
But when I click the button, everything appears except the discount:
I found a similar question where the answer was to use the tax_cart variable instead of tax_x. But I was already using tax_cart.
Any other ideas as to why discount_amount_cart is not working?
Unlike other amount variables, discount_amount_cart does not like dollar signs.
When I changed the field to:
<input id="discount_amount_cart" name="discount_amount_cart"
type="hidden" value="4.00">
PayPal displayed the discount:

how to quickly reset all the checkboxes on the webpage?

I have a div with checkboxes, and everytime before checking any of them I want to make sure they are cleared first. Any input on how I can do it?
The HTML code for the div consisting of checkboxes is
<div class="row_bus_groups cuke_business_group">
<div class="row">
<input class="field_checkbox cuke_partners" type="checkbox" id="SelectedBusinessGroups[0]" name="SelectedBusinessGroups[0]" value="Partners">
<label for="SelectedBusinessGroups[0]"><span class="translated_text" rel="BusinessGroups.Partners">Partners</span></label>
<input type="hidden" name="SelectedBusinessGroups[0]" value="">
</div>
<div class="row">
<input class="field_checkbox cuke_press" type="checkbox" id="SelectedBusinessGroups[1]" name="SelectedBusinessGroups[1]" value="Press">
<label for="SelectedBusinessGroups[1]"><span class="translated_text" rel="BusinessGroups.Press">Press</span></label>
<input type="hidden" name="SelectedBusinessGroups[1]" value="">
</div>
</div>
I tried doing
#browser.div(:class, "cuke_business_group").checkbox.each{ |all| all.clear }
You were close. Try this:
#browser.div(:class => "cuke_business_group").checkboxes.each {|checkbox| checkbox.clear}

Prototype and radio buttons

I have two sets of radios:
<div class="form-row">
<div class="field-label">
<label for="part"><span class="style37">Participated</span></label><p class="aste">*</p>
<input type="radio" name="particip" id="particip-yes" value="on" checked> Yes
<input type="radio" name="particip" id="particip-no" value="off">No
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="trav"><span class="style37">Traveled?:</span></label>
<input type="radio" name="traveled" id="traveled-yes" value="on" checked>Yes
<input type="radio" name="traveled" id="traveled-no" value="off">No
</div>
</div>
When I click on particip-no, I need to select traveled-no and disable both travel-yes and travel no. I tried:
Event.observe('particip-no', 'click', function() {
$$('travel-no').checked=true
$$('travel-no').disabled=true
$$('travel-si').disabled=true
alert('no travel');});
The alert shows up, but there are no changes in the radios. Any hints ? Thanks.
If you're selecting by id you just want $ not $$
$('travel-no').checked=true;
$('travel-no').disabled=true;
$('travel-si').disabled=true;
...assuming the id's are correct. You're missing the semicolons too btw

Resources