I have a jQuery class that manipulates an image whenever it is applied to it, like this:
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="myJQclass1" />
</div>
This works perfectly on its own, however I also have 2 other jQuery classes: myJQclass2 and myJQclass3, these manipulate the image differently than myJQclass1.
What I’m trying to do is create 3 radio buttons and the user will be able to switch the class used depending on what radio button they select (this will change how the image looks).
This is my code so far:
<script>
function check(effect) {
document.getElementById("answer").value=effect;
}
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
This isn’t working, I think I’m making a basic error, but I’m not sure what it is.
I’ve never worked with radio buttons nor jQuery before, so I would really appreciate any help with this.
Thank you in advance!
Use jQuery removeClass()/addClass(). Use the overload of removeClass() which allows you to remove multiple classes. Then add the class passed into the function
function check(effect) {
$('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
$('.answer').addClass(effect);
}
.myJQclass1{
color:yellow;
}
.myJQclass2{
color:green;
}
.myJQclass3{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
You could simplify things a bit more:
$('input:radio').click(function() {
var index = $(this).index('input:radio') + 1;
$('.answer').attr('class', 'answer myJQclass' + index);
});
.myJQclass1 {
color: red;
}
.myJQclass2 {
color: blue;
}
.myJQclass3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="effect" />Change Colour
<br/>
<input type="radio" name="effect" />Change Brightness
<br/>
<input type="radio" name="effect" />Change Contrast
<br/>
<br/>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
Related
I currently have a form that has many different inputs. There are two sets of radio buttons which when selected, display two different divs with input that is required. The issue is that I cannot send the email until all required inputs are provided , even the ones that aren't displayed. I have fixed the first occurrence name=(tick), but don't know how to only display the required message for (requirements) when the div has been shown by selecting the radio button (option).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
<title>Test</title>
<style type="text/css">
body {
padding: 80px;
}
#requirements {
width: 100%;
}
#results {
width: 100%;
}
</style>
<script type="text/javascript">
// DISPLAY HIDDEN TEXT
function hide() {
document.getElementById('hidden').style.display ='none';
}
function show() {
document.getElementById('hidden').style.display = 'block';
}
function hidetext() {
document.getElementById('hiddentwo').style.display = 'none';
}
function showtext() {
document.getElementById('hiddentwo').style.display = 'block';
}
function validateForm(e) {
let inp=[...document.getElementsByName("tick")];
if(!inp.some(i=>i.checked) && chk.checked) {
e.preventDefault();
alert('You must select why you are attending!');
}
}
</script>
</head>
<body>
<h1>Registration Request</h1>
<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">
<p>This course is identified in my Work Plan and Learning Agreement</p>
<input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
<input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>
<div id="optionOne_error" class="val_error"></div>
<p>
<div id="hidden" style="display: none">
<p>I am attending this session because (tick all that apply) </p>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
<input type="checkbox" name="tick" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
<input type="checkbox" name="tick" value="My manager recommended that I attend"> My manager recommended that I attend<br>
<input type="checkbox" name="tick" value="I am interested in the content"> I am interested in the content<br>
<p>
<div id="tick_error" class="val_error"></div>
<p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
<input type="text" id="results" name="results">
</div>
<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
<input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
<input type="radio" name="option" value="no" onclick="hidetext()"> No<br>
<div id="option_error" class="val_error"></div>
<div id="hiddentwo" style="display: none;">
<p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" required >
</div>
<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
<input type="file" name="attachments[]" multiple="multiple"></input>
</div>
<div class="submit-button">
<button type="submit" name="submit" onclick="validateForm(event)" onclick="validateFormTxt(event)" value="submit">Submit</button>
</div>
</form>
<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">
</body>
</html>
Perhaps you could create an "inactive" option which populates on select A when select B is selected. For example:
<input style="display: none;" type="checkbox" name="tick" value="inactive">
And then (pseudo code):
when ( input A :selected ) { activate( input B "inactive" ) }
And vice versa. This should allow you to filter out inactive form fields, and allow users to submit the form despite all visible and invisible fields being required -- without them being able to select an empty option.
I'm working on a form that has a funky layout and requires me to duplicate one of the radio questions into another location. This is causing some issues with the Javascript I've written.
On page load, I call a method to find the checked radio input and add a class to its parent (for styling reasons) to do this:
checkPillRadioButton("valuemodeheight");
function checkPillRadioButton(name) {
var checked = $('input[name="' + name + '"]:checked')
checked.parent().addClass("selected");
}
This was working, but now the question has been duplicated it only works for the second set of the radio buttons. Is there a way I can modify what I have to work with duplicate input radio names?
Thanks.
As per request, example of markup:
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM" checked>
<span>CM</span>
</label>
</div>
Here is also a Plunkr of the issue:
https://plnkr.co/edit/PDJhLtN1ub1SPH3iKXvq?p=preview
Thats is not working because you have passed a different argument altogether to the function 'checkPillRadioButton'
It should be 'valuemodeheight'
checkPillRadioButton("valuemodeweight");
Actually, I didn't get what you are looking for, but here is an answer from me from my understanding of the issue.
checkPillRadioButton("valuemodeheight");
checkPillRadioButton("valuemodewidth");
function checkPillRadioButton(name) {
var checked = $('input[name="' + name + '"]:checked');
checked.parent().addClass("selected");
}
.pillRadioButtons-option.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="Feet" checked>
<span>Feet</span>
</label>
</div>
<br/>
<br/>
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodewidth" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodewidth" value="Feet" checked>
<span>Feet</span>
</label>
</div>
change your css to:
<style type="text/css" media="all">
input[type=radio]:checked + span {
background-color: red;
}
</style>
and add an onchange event to your input
I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}
Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>
Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.
Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>
I am quite new to js and html and have some problems with a task. I want to create a "checkbox" that will make some pictures visible. For example I have 5 pictures. On each picture there is a male or female. Now i want to make all female picures visible if someone check the "female checkbox". I think that I will need to create some datatable (?) in js but not sure how to do it.
This is what I created so far
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
<div class='Humans'>
<label for="menu">male</label>
<input type="checkbox" id="malecheck" onChange="checkpaycondition('1');" /><br/>
<label for="menu">female</label>
<input type="checkbox" id="femalecheck" onChange="checkpaycondition('2');" /><br/>
<label for="picture">Person1</label>
<input type="checkbox" id="Person1check" onChange="toggleVisibility('4');" /><br/>
<label for="picture">Person2</label>
<input type="checkbox" id="Person2check" onChange="toggleVisibility('1');" /><br/>
<label for="picture">Person3</label>
<input type="checkbox" id="Person3check" onChange="toggleVisibility('2');" /><br/>
<label for="picture">Person4</label>
<input type="checkbox" id="Person4check" onChange="toggleVisibility('3');" /><br/>
<label for="picture">Person5</label>
<input type="checkbox" id="Person5check" onChange="toggleVisibility('5');" /><br/>
<img id='1' src='/home/Person1.png' style='visibility:hidden'/> <!--male-->
<img id='2' src='/home/Person2.png' style='visibility:hidden'/> <!--female-->
<img id='3' src='/home/Person3.png' style='visibility:hidden'/> <!--female-->
<img id='4' src='/home/Person4.png' style='visibility:hidden'/> <!--male-->
<img id='5' src='/home/Person5.png' style='visibility:hidden'/> <!--female-->
</div>
Any idea how I can get this to work? Hope you can help.
Cheers!
I have made some changes to your HTML; it's usually better to use classes when dealing with a group of elements --- it's harder using ids. Here are some changes I have made:
Removed inline JavaScript -- it's not recommended
Removed inline CSS -- not recommended either
Added a class instead of inline css and define a rule
Added two event handlers instead of inline JS
Changed you :checkbox ids to names instead
Removed IDs from img elements
Added a data attribute to each image, data-gender to be used with name="gender"
Added a value attribute to each :checkbox
BONUS added one proper use of IDs -- label for attribute -- click label to check/uncheck
As you can see, once your HTML is well designed, writing your JavaScript and CSS is a piece of cake.
$(document).ready(function() {
//Event handler for checkboxes with name="gender"
$(':checkbox[name=gender]').on('change',function() {
$('img[data-gender=' + this.value + ']').css('visibility', this.checked ? 'visible' : 'hidden');
});
//Event handler for checkboxes with name="visibility"
$(':checkbox[name=visibility]').on('change', function() {
$('img[src*=' + this.value + ']').css('visibility',this.checked ? 'visible' : 'hidden');
});
});
.myimage {
visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='Humans'>
<label for="gender1">male</label>
<input type="checkbox" name="gender" id="gender1" value="male" /><br/>
<label for="gender2">female</label>
<input type="checkbox" name="gender" id="gender2" value="female" /><br/>
<label for="visibility1">Person1</label>
<input type="checkbox" name="visibility" id="visibility1" value="Person1" /><br/>
<label for="visibility2">Person2</label>
<input type="checkbox" name="visibility" id="visibility2" value="Person2" /><br/>
<label for="visibility3">Person3</label>
<input type="checkbox" name="visibility" id="visibility3" value="Person3" /><br/>
<label for="visibility4">Person4</label>
<input type="checkbox" name="visibility" id="visibility4" value="Person4" /><br/>
<label for="visibility5">Person5</label>
<input type="checkbox" name="visibility" id="visibility5" value="Person5" /><br/>
<img src='/home/Person1.png' data-gender="male" class="myimage"/> <!--male-->
<img src='/home/Person2.png' data-gender="female" class="myimage"/> <!--female-->
<img src='/home/Person3.png' data-gender="female" class="myimage"/> <!--female-->
<img src='/home/Person4.png' data-gender="male" class="myimage"/> <!--male-->
<img src='/home/Person5.png' data-gender="female" class="myimage"/> <!--female-->
</div>
You need to change id to something string_with_number.
For example:
id="image1"... etc
Then you can use this function with having
var el = document.getElementById("image"+id);
and instead of visibility, you should use display: block and display: none
I'm new to CSS/Javascript and am having trouble with something that seems like it should be simple. I have a series of radio buttons and corresponding text. I'd like it all to appear as a bullet-point list, but for some reason messing with the properties of one messes up (or supersedes?) the alignment of the other.
Trying to achieve this (text adjacent to button):
How do I style this in CSS?
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<div id="c0" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<div id="c1" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<div id="c2" class="choiceText">text here</div>
</form>
The thing is that the div element, by default, have its display CSS property set to block.
Quoting W3Schools, 'a block element is an element that takes up the full width available, and has a line break before and after it.' you may notice that both <div> and <p> behave like this.
You have a couple options here. You may want to use an element that have its display property already set to inline by default, like span or label. An inline element only takes up as much width as necessary, and does not force line breaks.
You may also set your DIVs to display:inline instead of the standard display:block. But then you'll probably want to break the line after the content; in that case you can use the :after selector marker, adding a line break - like this:
<style>
div.choicetext { display:inline; }
div.choicetext:after { content:"\A"; white-space:pre; }
</style>
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<div id="c0" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<div id="c1" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<div id="c2" class="choiceText">text here</div>
</form>
Very simple, use the <label> tag. Doesn't require extra styling or any CSS tricks to make it work. It just works. Thats what the <label> tag was created for.
Here's the MDN.
Here's the Fiddle
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<label id="c0" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<label id="c1" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<label id="c2" class="choiceText">text here</label>
</form>
Try this
<form id="form1">
<div id="c0" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
text here</div>
<div id="c1" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
text here</div>
<div id="c2" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
text here</div>
</form>