Need help figuring out why my pricing calculator for different document types is not working properly in Safari and IE browsers. The calculator gives you a final price based on the number of pages, quality, and quantity in your document.
The pricing data is generated by a service and outputted as a JSON object which is then used on the calculator. However, I have found that there is an issue with the Quality radio buttons specifically when using Safari browser.
In Safari, the pricing is always incorrect when selecting the "Quality" radio buttons. It seems that the first click on the radio button does not register correctly, resulting in the wrong price being displayed.
I've provided an example on jsfiddle to demonstrate the issue: https://jsfiddle.net/IntricatePixels/f21dtr8j/
Feel free to refer to the JSFiddle example for more details. If you need additional information, I'm happy to provide it here as well.
<div class="form-group document-quality">
<label>Quality</label>
<fieldset data-role="controlgroup">
<div class="field-container" data-bind="foreach:categoryOptions, valueUpdate: 'afterkeydown', event: { change: onSubmit }" id="documentQuality">
<label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }"></label>
<div class="radio-container">
<label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }">
<input data-bind="attr: {value: value}, checked: $parent.selectedCategoryValue" id="uniqueQuestionName" name="uniqueQuestionName" type="radio">
</label>
</div>
<label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }"><span data-bind="text: label"></span></label>
</div>
</fieldset>
</div>
<div class="form-group quantity">
<label>Quantity</label>
<input data-bind="value: copies, valueUpdate: 'keyup'" id="numberofCopies" type="text">
</div>