Im trying to implement a self-written query function. A brief description about the function: It should recalculate two values when changing the radio button. It is working in JSFiddle. (http://jsfiddle.net/VL465/34/)
However now i'm trying to implement it in a real webpage. But actually i'm not able to get it working. I've tried to debug it but didn't grinder to a hold.
Currently the console is only showing the "Function loaded" message. When changing the radio buttons it doesn't display days recognized.
Let me clarify the current HTML file:
in the head i have:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="/js/functions.js"></script>
The form is exactly the same:
<form action="/b/" method="POST" id="choseLessor">
<fieldset>
<input type="hidden" name="userLocale" value="en">
<ul>
<li><span class="rate"> € 21,29</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="30" data-price="21.29"><b>30 days </b></li>
<li><span class="rate"> € 23,65</span> <span class="note">starting at </span><span class="radio" style="background-position: 0px -50px;"></span><input type="radio" class="styled" name="days" value="60" data-price="23.65" checked=""><b>60 days </b></li>
<li><span class="rate"> € 26,02</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="90" data-price="26.02"><b>90 days </b></li>
<li><span class="rate"> € 27,20</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="120" data-price="27.2"><b>120 days </b></li>
</ul>
<div class="priceCalculation">
<div class="list">
<span class="type">List Price:</span>
<span class="retailPriceActual">
<div class="strikethrough">€ 49,93</div>
</span>
</div>
<div class="savings">
<span class="type">Your Savings:</span>
<span class="bookSavings" id="CalculateSavings">€ 26,28</span>
</div>
<div class="total">
<span class="type bigger">Your Price:</span>
<span class="totalPrice" id="CalculatePrice">€ 23,65</span>
</div>
</div>
<input type="submit" value="Cho" class="btn">
</fieldset>
</form>
And the contents of functions.js
$( document ).ready(function() {
console.log ( 'Function loaded' );
$("input[name=days]:radio").change(function () {
console.log ( 'Days recognized' );
// get values
var savingPrice = 0;
var msrp = $('input[name="msrp"]').val();
var periodPrice = $('input[name="days"]:checked').data('price');
var userLocale = $('input[name="userLocale"]').val();
console.log ( 'UserLocale' + userLocale);
// calculate bac
savingPrice = (msrp-periodPrice).toFixed(2);
if(userLocale === 'nl')
{
savingPrice = savingPrice.replace(/\./g, ',');
periodPrice = periodPrice.replace(/\./g, ',');
}
$('#CalculateSavings').text('€ ' + savingPrice);
$('#CalculatePrice').text('€ ' + periodPrice);
});
});
The console is showing:
Function loaded
And not more than this, even not when the radio button is changed.
What am i doing wrong?
I believe the problem is not with your code per se, but how it interacts with the code contained with custom-form-elements.js
It seems that your radio buttons are hidden behind styled span elements, to improve the look and feel of the form. However, from a DOM perspective, the actual element that the user clicks on is not the radio button, but the span element.
The custom-form-elements script does some funky stuff behind the scenes to make it look like the radio button has been selected, but a change event is never fired on the radio button.
In order to get around this, you'll need to add something like the following to your $(document).ready():
$("span.radio").click(function () {
$(this.nextSibling).trigger('change');
});
This will add a click event handler to the span masks that will fire the change event on their corresponding radio buttons. Looking at your HTML, this.nextSibling always refers to the radio button next to the span.
Related
I have two radio type inputs.
I want background change its color when radio switch to different input.
As the pic downbelow,
I met a problem that while click first one it can change color immediately,
but click second can not change at first click.
I need to click two times in second one to change its color.
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
<div class="o_radio_item">
<input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>
var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
var v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
Do anyone knows how to solve this error?
First thing , you need to have same name for radio buttons. Secondly you may not need this line $(document).on('click', "div[name='in_out']", function(event){ since the elements are not dynamically loaded.So no need to delegate it from the document. Also var v = $("div[name='in_out'] div input:checked").attr('data-value'); line will be redundant. Besides you can have the color as the data-attribute of the radio button & use change instead of click. So on change get the data attribute and set it using .css
var bg = $('.bg');
// check-box value decide background-color.
$('.o_radio_input').on('change', function(event) {
bg.css("background-color", $(this).data('color'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" style="width:70px;">
<div class="o_radio_item">
<input name="in_out" class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I" data-color='#adff2f'>
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input name="in_out" class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O" data-color="#ffc0cb">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>
You do not have any element with class bg in the markup. You also should group them by setting the name attribute.
The html document is generate by framework ODOO. So I can not change its name attribute
If you are not able to change the HTML manually then you can set the name attribute on document ready
You can try the following way:
// Set the name attribute on document ready
$('document').ready(function(){
$('.bg .o_radio_input').attr('name', 'myRadio');
});
var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
var v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
$('div[name=in_out]').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
<div class="o_radio_item">
<input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
<label class="o_form_label" for="radio1032_I">進貨</label>
</div>
<div class="o_radio_item">
<input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
<label class="o_form_label" for="radio1032_O">出貨</label>
</div>
</div>
I miss some info:
1.The html document is generate by framework ODOO. So I can not change its name atrribute.
the view template is deploy by xml document.
the origin code is looks like this:
<field class="in_out" name="in_out" widget="radio"/>
the div is wrap by a div class='bg', I just miss it.
In order to show more clearly, I add alert function.
It will show you message while you click.
var bg = $('.bg')
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
alert('clicked');
let v = $("div[name='in_out'] div input:checked").attr('data-value');
if (v =='O') {
bg.css("background-color","#adff2f");
}
else if(v =='I') {
bg.css("background-color","#ffc0cb");
}
});
$('div[name=in_out]').trigger('click');
and the result looks like this:
Mamun's script is working well here.
But when it runs on ODOO, it will work as the pic.
I'm making a quiz app.To show the progress of the quiz there is question pallette of small boxes which turn yellow when users click on any of the the radio button to show that the user has attempted the question.Along with this there is a button to move to the previous question.To show the users initial answer I have used ng-checked directive with some logic in the controller.Everything is working fine but after attempting a question when I move to the next question and click on the same option as the previous question then the question pallette box does not turn yellow.But when I click on the other option it works fine.
.html
<div class="questionsBox" >
<div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
<ul class="answerList">
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
</li>
</ul>
<div class="questionsRow">
<button ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary" ng-click="liveCtrl.nextQuestion()">Save & Next</button>
<button ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
</div>
</div>
//Question Pallete
<div class="question-pallete">
<div id="{{$index}}" ng-repeat="question in liveCtrl.questions" class="square">
<a ng-click="liveCtrl.gotoQues($index)">
{{$index + 1}}
</a>
</div>
//jquery to give color to the boxes
<script type="text/javascript">
$(document).on('click',"input[name='answerGroup']",function(){
var qid=$(this).data('id');
console.log(qid);
$('#'+qid).addClass('box-color');
});
</script>
Controller functions
this.nextQuestion=()=>{
live.activeQuestion++;
//console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
live.activeQuestion--;
//console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
//console.log(qid);
live.useranswers[qid]={
q:option
};
When I'm tried to console qid in jquery part it outputs the same qid for the same option in the next question but it is not the case for other options.I think "data-id" in html is not updating for that case.Sorry If I was not able to explain it properly.
I find 2 issues with your implementation.
I don't see ng-model in any of your input field.
Why don't you use ng-class instead of using jquery to get the id and add class?
<label ng-class="val==0 ? 'highlight':''">
<input type="Radio" ng-model="val" ng-value="0">Option A</label>
Here is the jsfiddle link
I have a product page on my website with product options, two with sub options. For those options with sub options they are using type="radio"
I've created javascript buttons which emulate clicking those sub options. I'd like to set up clearing the form and emulating the clicks all on one button. Currently I have a separate clear button, which still doesn't work.
Picture Example: http://i.imgur.com/uAlLBAK.jpg
Code examples below
Sub option code:
<li class="option">
<label for="09f0c74f3d92847ecfcf5837eb6b2f8b">
<input type="radio" class="validation" name="attribute[249]" value="127" id="09f0c74f3d92847ecfcf5837eb6b2f8b"/>
<span class="name">65cc</span>
</label>
</li>
<li class="option">
<label for="06fc48a0a3949a17c28162ea0eb1f406">
<input type="radio" class="validation" name="attribute[249]" value="128" id="06fc48a0a3949a17c28162ea0eb1f406"/>
<span class="name">75cc</span>
</label>
</li>
First button:
<input onclick="document.getElementById('06fc48a0a3949a17c28162ea0eb1f406').click(); document.getElementById('a596a2e871da26ba9b1cf7fffe325848').click();" type="button" value="0911" />
Second button:
<input onclick="document.getElementById('09f0c74f3d92847ecfcf5837eb6b2f8b').click(); document.getElementById('a596a2e871da26ba9b1cf7fffe325848').click();" type="button" value="0916" />
Clear options:
<input onclick="Clear();" type="button" value="Clear" />
<script type="text/javascript">// <![CDATA[
function Clear()
{
clearRadioGroup("09f0c74f3d92847ecfcf5837eb6b2f8b");
clearRadioGroup("a596a2e871da26ba9b1cf7fffe325848");
}
function clearRadioGroup(GroupName)
{
var ele = document.getElementsById(GroupName);
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
}
// ]]></script>
In the above example the second button click would un-select the second element if the buttons were clicked in succession. Thoughts on at the very least being able to clear the form?
There is a typo in function clearRadioGroup. It should be
"var ele = document.getElementById(GroupName);" and not
"var ele = document.getElementsById(GroupName);".
The Clear function will work then.
I am looking for a way to select/disable a single radio button in my base map. Here is my code.
This creates the baseMap for myleaflet layer
baseMap = {
Map View: mapQuestOpenEnglish
Satelite View: mapQuestAerial
}
mapControl = L.control.layers(baseMap)
Eventually I add mapControl to the map and it produces the following html
<div class="leaflet-control-layers leaflet-control" aria-haspopup="true">
<a class="leaflet-control-layers-toggle" href="#" title="Layers"></a>
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers" checked="checked">
<span>
<span class="default-map">Map View</span>
</span>
</label>
<label>
<input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers">
<span>
<span class="staelite-map">Satelite View</span>
</span>
</label>
</div>
</form>
</div>
I want a way to be able to select/disable this radio button.
<input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers">
Is there any easy way to do this? Any help is greatly appreciated
Ok, not very clean, but works...
You can select the desired radio element through it's respective span label's class. Here's a simple JS method to do that:
function SelectRadio(span_class) {
var span = document.getElementsByClassName(span_class)[0];
var radio = span.parentNode.parentNode.getElementsByTagName('radio')[0];
return radio;
}
You just call it like this:
var element = SelectRadio('staelite-map');
/* Here you'll have the DOM Element. Just use it to enable/disable,
set selection, or anything else */
Each of my radio buttons is inside a div, and immediately beside the input (radio) I have some text in a span with the CSS set to display:none. Since I have multiple radio buttons I'm trying set the span to show for ONLY the span beside the radio button that's selected. Thoughts?
Here's what I have currently.
$('input:checked').next().show();
Here's my fiddle for the full quiz I'm trying to build
http://jsfiddle.net/YSSWL/96/
Feel free to critique the rest of my jquery, as I'm likely over complicating something. I don't have a ton of experience with jquery or js (working on it).
Solution Edit: As Chausser pointed out I can use
$('input:checked').parent().find('span').show();
to select the span nearest the parent of the selected input and apply .show();
You can use:
$('input:checked').parent().find('span').show();
I updated your html to use some consistent classes and fixed your reset function as well. For working code check:
http://jsfiddle.net/YSSWL/106/
You can solve this completely with CSS:
.incorrect .incor { display: inline; }
http://jsfiddle.net/YSSWL/105/
Here is a better way to write this I think. A bit more flexible. Sorry I deleted a bunch of your stuff to make it clear what was going on.
JS:
$(document).ready(function () {
$(document).on('click', '#radiochk1', function(){
var checkedRadio = $('input[name="question1"]:checked');
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
if(checkedRadio.hasClass('rightAnswer')){
checkedRadio.parent().find('span.answer').addClass('correct');
}else{
checkedRadio.parent().find('span.answer').addClass('incorrect');
}
});
$(document).on('click', '#resetq1', function(){
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
$('input[name="question1"]').attr('checked', false);
});
});
HTML:
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. <span class="answer">Choice B</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2 rightAnswer" />C. <span class="answer">Choice C</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. <span class="answer">Choice D</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. <span class="answer">Choice E</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>