I've created a content element with Mask for Typo3 where the editor can select the payment options provided. In the fluid template however, an integer with a bitmask is returned and not each individual option.
The default rendering suggested by mask is:
{f:if(condition: data.tx_mask_ue_payment_accepted, then: 'On', else: 'Off')}
The result of data.tx_mask_ue_payment_accepted can vary from 0 (nothing selected) to 511 (all 9 options selected). Has anyone managed to smoothly implement the checkbox with a for-loop or anything proper and if so how?
Many thanks in advance!
I use bitmask in a couple of areas for my current FE plugin and haven't found a better way than to map the field-value-pairs in your controller action prior to displaying the form.
For this I implemented two methods which will convert the current bitmask value to individual boolean values (and vice versa). I bind those values to an array and display it in a fluid for loop as checkboxes (not using extbase direct property mapping).
Maybe this gets somebody in the right direction, even if its no copy&paste ready solution.
Fluid:
<input type="checkbox" name="tx_myext[checkbox][0]" value="1" id="checkbox0" class="checkbox" {f:if(condition:'{return.checkbox.0} == "1"',then:'checked="checked"',else:'')}>
<input type="checkbox" name="tx_myext[checkbox][1]" value="1" id="checkbox1" class="checkbox" {f:if(condition:'{return.checkbox.1} == "1"',then:'checked="checked"',else:'')}>
As you can see we get an array "return" back that contains the values from the transmitted form. If the values exists we set the checkbox to "checked".
Related
I'm using Statamic CMS
I've got a checkbox group with two checkboxes, I'd like both of them to be checked before the form will submit.
Setting the field as 'required' half works. The form will error if nothing is checked, but it submits if one of the boxes is ticked.
I can see under the validation tab, there's a list of additional rules. But I'm not sure which rule to use.
If it helps, this is what the HTML checkbox group looks like:
<div>
<label>Contact permissions</label>
<span>Please tick both checkboxes</span>
<label>
<input type="checkbox" name="checkboxes[]" value="gdpr" />
Please contact me with the details I've provided
</label>
<label>
<input type="checkbox" name="checkboxes[]" value="terms" />
I agree with the terms and conditions
</label>
</div>
I'm using the {{ fields }} tag to generate the HTML
Within the CMS, under the validation tab, there's a link to the Laravel docs. As I want to validate two checkboxes, I think I need the required_with: rule, but I can't get it to work...
required_with: is looking for two values, the example shows this:
required_with:foo,bar,..
The values of the checkboxes are, value="gdpr" and value="terms" so I (wrongly) assume this should work...
required_with:gdpr,terms
After saving the changes and testing the form, it still submits? Even though only one of the checkboxes might be ticked...
What is the correct syntax/values to use to get this to work?
:) foo,bar in the docs are field names in your form. What you're doing with gdpr,terms are values.
Plus, since both your buttons are named checkboxes[], the form is validating that if either one is selected, then it should be passed. Hopefully this helps!
I have a country picker in my form like this:
<select class="bfh-countries text-left" name="country" id="country" data-country="DE">
</select>
I can get the value with jQuery like this:
$("#country").val()
but when i try to serialize the form with $("#myform").serializeArray() The value for "country" is an empty string.
How can i fix this?
I ran into this problem and it took me forever to find because there aren't any examples of it. What you really want to do is use data-name="country", which names the hidden variable on the back end as country. For the country picker, you can use the div tag as follows:
<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country" data-country="POSTBACK_VARIABLE_GOES_HERE"></div>
If you do this, you'll find a hidden variable that's added to the page as follows:
<input type="hidden" name="country" value="US">
The value above assumes you selected United States but it is entered as a 2 character code, which could then be entered as data-country above if you need to do server-side validation and display the page again without forcing the user to select the value all over again.
This was seriously a nightmare to find.
I have the following markup:
<input type="number" max="99" />
In Google Chrome (and possibly other webkit browsers), this will restrict the spinner's up arrow from going over 99, but it does not prevent the user from typing a number higher than 99. Even onblur, the invalid value is not removed/replaced or even a warning given that the value is invalid.
Am I misinterpreting how it's supposed to work, or is this a bug? I am using the latest version of Chrome (19 at the time of writing).
Edit:
To clarify, I want to know why a number greater than the specified max is allowed to be input in the first place. I realize that it gives a tooltip on form submission telling you that it's invalid, but it seems like inconsistent behavior that the spinner will not allow you to go above the max, yet you can simply type a number above the max at any time to circumvent it.
If this is desired behavior for some reason, why is that? And is there a better option to enforcing the input range without resorting to JS?
It does work but you only see an error message (tooltip) if you put a submit button and a form into your code:
<form action="#" method="get">
<input type="number" max="99" />
<input type="submit" value="Submit!" />
</form>
jsFiddle
It's an old question, but I didn't find any relevant answers for this question anywhere.
this behaviour is still around in chrome (version 61).
I have found a little trick that can be used in some situation.
it's relevant for those who use data-binding libraries like aurelia, angular etc.. I tested only on aurelia - but that should work also for others.
the trick relies on the fact that input of type range enforce the min/max constraints.
we simply create another input (of type range) that is bounded to the same value as the regular input, and we hide it via css.
when the user inputs something that is greater than the max value, it will snap back to the max value.
here's a demo in aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad
Is there a way to select an item based on the label containing a set of characters? I can't select by index as that will change, and the items being generated in the select have some random numbers appended at the end. I'd like the basically say if the label contains "this."
is that possible?
Thanks!
Sure, example in XPath:
//*[contains(text(), 'this')]
Or CSS:
select:contains('This')
Another example
<label for="blah">
<input name="blah" id="blah" type="checkbox" />
Store Locator Plus
</label>
My target to get the checkbox:
//label[contains(text(),'Store Locator Plus')]//input[#type="checkbox"]
To check it I use the command "check", the target noted above, and a value of "On", which forces the checkbox to be marked (versus using click which will toggle it on/off).
$score = new Zend_Form_Element_Radio('score');
$score->setRequired(true)
->setSeparator('')
->setMultiOptions(array(1 =>'Positive', -1 =>'Negative'))
->setDecorators(array('ViewHelper'));
Renders as
<label for="score-1">
<input name="score" id="score-1" value="1" checked="checked" type="radio">Positive
</label>
<label for="score-1">
<input name="score" id="score-1" value="-1" type="radio">Negative
</label>
Is the fact that it's using the same ID for the inputs and labels normal behavior or a bug?
How can I correct this?
I can't change the values as technically they are required to be that way
The real problem this causes is that when you click the negative the positive gets selected instead!
Thanks
Looks like the standard ViewHelper decorator for a radio control uses a FormRadio view-helper. When this view helper creates the id it uses on the <input> element and the <label> element, it first applies the standard AlNum filter, which is filtering out your minus sign.
So, it looks to me that instead of using the standard ViewRenderer decorator, you will have to create a custom decorator that calls your own custom FormRadio view helper.
You might be able to avoid creating your own decorators and view helpers by creating your own custom AlNum filter that allows those minus signs. The trick is to set that path only for this single use so that you;ll be able to use the normal Alnum filter for other elements.
Alternatively, you could probably trick the ViewHelper into using a custom FormRadio helper by adding a helper path on the view object so that it loads your custom view helper instead of the standard one.
Just some ideas.