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.
Related
I have radio button
Html code:
<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">
And i have a nav bar
Html code
<ul class="nav">
<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
</ul>
These 2 are conected with the data-cont that have the class of the radio button
I want when i click on the li the correct radio button be checked using javascript
I tried to make it using this code in JavaScript
let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
document.querySelector(e.currentTarget.dataset.cont).checked = true;
});
});
I try to remove the active class from li and put it on the li where i click then i want the radio button be checked
Any body can help me on this?
the last querySelector is where your code is failing you're not referencing the class for your input it needs to be document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; note the "." prefix
Although that answers your question there is probably more value in pointing out that by changing your html markup to be a little more accessible you can eliminate the need for all of the javascript in your example
e.g.
input:checked + label {
color:Red;
}
<div><input type="radio" id="first" name="bright" checked>
<label for='first'>وزارة الاستثما</label>
</div>
<div>
<input type="radio" id="second" name="bright" >
<label for='second'>وزارة التجارة</label>
</div>
<div>
<input type="radio" id="third" name="bright">
<label for='third'>جهات حكومية اخرى</label>
</div>
<div>
<input type="radio" id="four" name="bright">
<label for='four'>مكتب هندسي</label>
</div>
The use of labels associated with your radio buttons is now significantly more accessible and you can drastically reduce a lot of your markup ( though to be accessible you would need to provide a more meaningful name for for attribute.
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'm trying to make multiple select with checkbox ... if I click checkbox A then checkbox B follow click too. But only the A checkbox that appears, the B checkbox I created in a hidden state with css ..
<button type="button" id="delete" title="Delete">Delete</button>
<input type="checkbox" class="select_data" id="A" name="A[]" value="A" />
<input type="checkbox" class="info_del" id="B" name="B[]" value="B">
$('#delete').click(function() {
if($('#A').is(":checked")) {
$('#B').attr('checked', true).val();
}
var data = $(".select_data:checked, .info_del:checked").serialize();
console.log(data);
});
I believe you have a syntax issue with one line of your jQuery.
Try changing this line:
$('#B').attr('checked', true).val();
to:
$('#B').prop('checked', true);
Here is a working pen.
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 */
I'm trying to figure out how to disable a "Next section" button until all three groups of radio buttons have been answered. I've searched at length for a solution, but most refer to when a form is submitted. I'm trying to configure it so that the button is enable once all questions are answered.
This page has three panels, with only one visible at a time. When panel one is visible, panels two and three are hidden. Once all the questions on panel one are answered, the user clicks a "Next section" button, which slides up section one, and slides down section two. The trouble I'm having is the validation... making sure all questions on each panel are answered before enabling the button.
Here's a very shortened version of what I'm working with:
Q1
<div id="one">
<input type="radio" name="question01" value="Q1-A">
<input type="radio" name="question01" value="Q1-B">
<input type="radio" name="question01" value="Q1-C">
</div>
Q2
<div id="two">
<input type="radio" name="question02" value="Q2-A">
<input type="radio" name="question02" value="Q2-B">
<input type="radio" name="question02" value="Q2-C">
</div>Q3
<div id="three">
<input type="radio" name="question03" value="Q3-A">
<input type="radio" name="question03" value="Q3-B">
<input type="radio" name="question03" value="Q3-C">
</div>
<button class="btn btn-primary" type="button" id="submit1" disabled="true">Next section</button>
$(document).ready(function () {
var q01 = $('input[name=question01]');
var q02 = $('input[name=question02]');
var q03 = $('input[name=question03]');
validate();
$(q01, q02, q03).change(validate);
});
function validate() {
if ($(q01).is(':checked') && $(q02).is(':checked') && $(q03).is(':checked')) {
$(".btn#submit1").prop("disabled", false);
} else {
$(".btn#submit1").prop("disabled", true);
}
}
I think this is what you need:
http://jsfiddle.net/vss9D/4/
$(document).ready(function() {
var q01 = $('input[name=question01]');
var q02 = $('input[name=question02]');
var q03 = $('input[name=question03]');
validate();
$("input[type='radio']").change(validate);
function validate() {
if ($(q01).is(':checked') && $(q02).is(':checked') && $(q03).is(':checked')) {
$(".btn#submit1").removeAttr("disabled", false);
} else {
$(".btn#submit1").attr("disabled", true);
}
}
});
The important part here is where you bind the "validate" function to the radio groups.
$(q01, q02, q03).change(validate); is not a valid way to select three jQuery elements.
you can use the .add() function to select multiple jQuery variables (see this stack overflow question)