Vue: How to display different images based on RadioButton choice - javascript

I am facing a problem where I want to display a different image if a radiobutton is selected with Vuejs. It currently only shows the image for the false state since I do not seem to be able to retrieve the state of the button in the way I tried. Here is an example with two buttons:
<template>
<div id="choose-route">
<label>
<input type="radio" name="Radio" id="choice1"
v-on:change="someMethodOne"
/>
<img
:src="checked ? 'icon_checked.png' : 'icon.png'"
/>
</label>
<label>
<input type="radio" name="Radio" id="choice2"
v-on:change="someMethodTwo"
/>
<img
:src="checked ? 'different_icon_checked.png' : 'different_icon.png'"
/>
</label>
</div>
</template>
<script>
export default {
methods: {
someMethodOne () {
// does something
},
someMethodTwo () {
// does another thing
}
}
}
</script>
<style>
</style>
How do I go about changing the image based on the checked state of the radiobutton? I already did it using CSS, but that lead to another problem due to the fact that I use recursive components which is why I am here now.

Use v-model. You can also use watch to do something when checked value change.
There is this exact example on Vue.js' website.
https://v2.vuejs.org/v2/guide/forms.html#Radio
new Vue({
el: "#app",
data: {
checked: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="radio" id="one" value='One' v-model="checked">
<label for="one">Option one</label>
<br>
<input type="radio" id="two" value="Two" v-model="checked">
<label for="two">Option two</label>
<br>
<span>Checked: {{ checked }}</span>
<br>
<span v-if="checked === 'One'">One is checked!</span>
<span v-else-if="checked === 'Two'">Two is checked!</span>
</div>

Related

change checkbox value vuejs

I need to change the checkbox value, Instead of true to be 1
and instead of false to be 0.
Here's my code :
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault"
v-model="discount.has_limit_times_use">
<label class="form-check-label" for="flexCheckDefault">
Limit number of times this discount can be used in total
</label>
</div>
I tried this code but it doesn't work. Can someone help me on this ?
You can try this, it is documented in Vue 3 Form input bindings.
string value:
<input type="checkbox" v-model="discount.has_limit_times_use" true-value="1" false-value="0">
number value:
<input type="checkbox" v-model="discount.has_limit_times_use" :true-value="1" :false-value="0">
Observation: As you are having v-model attribute in your input element. Then you can achieve the checkbox value binding via v-model itself.
Demo :
new Vue({
el: '#app',
data: {
discount: {
has_limit_times_use: 1
}
},
methods: {
getVal() {
console.log(this.discount.has_limit_times_use)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" :true-value="1" :false-value="0" v-model="discount.has_limit_times_use" #change="getVal">
</div>

How to create a single-question quiz in React?

How do I implement the logic for correct and incorrect answers? I have created a single-question quiz with multiple options. I have created a Quiz component. Here is the source:
Quiz Component
export default function Quiz(props) {
return (
<div className="QuizContainer">
<div className="quizHeader">
<h1>Question</h1>
<p className="PracticeDescription">
Read the question and choose the most correct option.
</p>
</div>
<hr/>
<div className="PracticeQuestionContainer">
<p>{props.question}</p>
<div class="option-container">
<input type="radio" name="select" id="option-1" className="input-radio" />
<input type="radio" name="select" id="option-2" className="input-radio" />
<input type="radio" name="select" id="option-3" className="input-radio" />
<input type="radio" name="select" id="option-4" className="input-radio" />
<label for="option-1" className="option option-1">
<div className="dot"></div>
<span>{props.option1}</span>
</label>
<label for="option-2" className="option option-2">
<div className="dot"></div>
<span>{props.option2}</span>
</label>
<label for="option-3" className="option option-3">
<div className="dot"></div>
<span>{props.option3}</span>
</label>
<label for="option-4" className="option option-4">
<div className="dot"></div>
<span>{props.option4}</span>
</label>
</div>
</div>
</div>
);
}
And I have used this component on the page like this:
<Quiz
question="1. Which one is not a JavaScript variable?"
option1="var a=5"
option2="let b=6"
option3="const c=3"
option4="int x=9"
/>
Here how it looks like:
If the user selects the correct answer, it should colsole.log("Correct!") else console.log("Incorrect!"). How do I do this? Please help me!!
First of all you'd also need to pass a correct answer to your Quiz component, after which you'd need to take a look at event handling, so whenever user clicks an option, a function gets called which compares clicked answer with the correct answer.
Read more here: https://reactjs.org/docs/handling-events.html

JavaScript.JQuery toggle and fade in

If you have one div with two radio buttons with no ids and each one disables content and displays new content if selected. Should be simple but its not working properly. When the radio button is changed, toggle off that content and fade in the new content and vice versa.
What is wrong with this code? Is it not this simple?
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" />
Projects <input name="change" type="radio" value="2" />
</div>
$(":radio").change( function(e) {
$(".radios__home").toggle().fadeIn(400);
$(".radios__projects").toggle().fadeIn(400);});
Your issue is that .fadeIn always makes the element visible, regardless of what you do with .toggle. So you need to check the value of the checked radio and use that to fade in/hide the appropriate element. Something like this (but hopefully a bit prettier):
$(":radio").change(function(e) {
if ($(this).val() == 1) {
$(".radios__home").fadeIn(400);
$(".radios__projects").hide();
} else {
$(".radios__home").hide();
$(".radios__projects").fadeIn(400);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
</div>
<div class="radios__home" style="display:block">Home Radio</div>
<div class="radios__projects" style="display:none">Projects Radio</div>
</div>

Submitting radio inputs with ReactJs and setting active class to the current selection

I am trying to submit the event_type attached to the option chosen from the radio buttons. For example if "professional" is the chosen option, I would like to set the event_type to that on the submitted data. Also setting the "active" class to the label that is currently selected. I am trying to figure out how to do that. Any help? Thanks
<label htmlFor="professional" className="EventTypeFieldButton EventTypeFieldProfessional active">
<span className="TypeDot"></span>Professional
</label>
<input type="radio" name="event_type" id="professional" value="professional" />
<label htmlFor="academic" className="EventTypeFieldButton EventTypeFieldAcademic">
<span className="TypeDot"></span>Academic
</label>
<input type="radio" name="event_type" id="academic" value="academic" />
<label htmlFor="miscellaneous" className="EventTypeFieldButton EventTypeFieldMiscellaneous">
<span className="TypeDot"></span>Miscellaneous
</label>
<input type="radio" name="event_type" id="miscellaneous" value="miscellaneous" />
var MyComponent = React.createClass({
render: function() {
<label className={this.state.isActive}>
<input type="radio" name="event_type" id="professional" value="professional" onChange={this._onselectRadio(e)} />
</label>
},
_onselectRadio: function(e) {
var event_type= e.target.name;
// submit stuff
this.setState({
isActive = "active"
});
}
});
Since you have several label you'll have to render your radio inputs dynamically and check if e.target.name is equal to your label id/name , something like that.

Delete drop down when it is blank using Javascript or Jquery

Is it possible to write a Javascript function to delete a drop down when it is blank?
<form name="myform" method="post" enctype="multipart/form-data" action="" id="myform">
<div>
<label id="question1">1) Draw recognizable shapes</label>
<br />
<input type="radio" value="Yes" id="question1_0" name="question1_0" />
Yes
<input type="radio" value="No" id="question1_1" name="question1_1" />
No
</div>
<div>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
<div>
<label id="question3">3) Hold a pencil</label>
<br />
<input type="radio" value="Yes" id="question3_0" name="question3_0" />
Yes
<input type="radio" value="No" id="question3_1" name="question3_1" />
No
</div>
<input type="submit" value="Delete Drop Down" onclick="return checkanddelete"/>
</form>
If somebody does not select question 2 for example, it deletes question 2 label and the drop down.
Assuming you actually meant radio button groups (and not drop down lists) then firstly your HTML is incorrect, you need to set the name values of each group of radio buttons to be the same:
<input type="radio" value="Yes" id="question1_0" name="question1" /> Yes
<input type="radio" value="No" id="question1_1" name="question1" /> No
Then you need to loop through the list of radio buttons, if none in the group are selected then delete the parent div:
$('input[type=submit]').on('click', function() {
var radioArr = [];
$(':radio').each(function(){
var radName = this.name;
if($.inArray(radName, radioArr) < 0 && $(':radio[name='+radName+']:checked').length == 0)
{
radioArr.push(radName);
$(this).closest("div")
.remove();
}
});
return false; //to stop the form submitting for testing purposes
});
While you are there, you might want to add some <label for=""> tags around your text.
Here is a jsFiddle of the solution.
If your dropdown has an id of DropDown, and you are looking to hide the dropdon on submit click:
function checkanddelete()
{
if ( $('#question2_0.=:checked, #question2_1:checked').length )
$('#dropdown').hide() // Or $('#dropdown').remove() if you do not plan on showing it again.
return false; // if you plan on not submitting the form..
}
Optimization for use in a module for a page include adding appropriate ids and classes to the divs, which I'm assuming that in full code are there, but if you are planning on making UI adjustments I would advise against using a submit button in the mix..
I don't know, what do you mean under "dropdown menu", but here some info, that can help you.
You can set a class name for the all Objects, you want to delete. E.g.
HTML
<div>
<label class='question2' id="question2">2) Competently cut paper </label>
<br />
<input class='question2' type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input class='question2' type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
JS
$(".question2").remove();
As an another solution you can set an ID for the DIV Tag above all of this elements
<div id='block_to_remove'>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
And then remove it in JS
$("#block_to_remove").remove();

Categories

Resources