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
Related
It won't get the 2 selector to work together it only uses the second one, I don't know how. I am new to jQuery.
HTML
<div class="janee">
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>
</div>
<hr>
<div class="janee">
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()" value="Nee">
<label for="NEE3">Nee</label>
</div>
jQuery
$('#JA2') && $('#JA3').click(function(){
if ( $(this).is(':checked') )
{
alert('Selected');
}
});
Because that's not valid JavaScript.
You can separate selectors with a comma:
$('#JA2, #JA3').click(function() { });
You can specify any number of selectors to combine into a single
result. This multiple expression combinator is an efficient way to
select disparate elements. The order of the DOM elements in the
returned jQuery object may not be identical, as they will be in
document order.
Or you can use add():
$('#JA2').add('#JA3').click(function() { });
Separate them by comma
$('#JA2, #JA3').click(function()...
$('#JA2, #JA3').click(function(){
if ( $(this).is(':checked') )
{
alert('Selected');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="janee">
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>
</div>
<hr>
<div class="janee">
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()" value="Nee">
<label for="NEE3">Nee</label>
</div>
With jQuery you have to supply a comma-separated string if you want to select multiple elements. You can refer to their documentation here https://api.jquery.com/multiple-selector/#post-435
For example:
$('#element-one, #element-two').css('border', '3px solid red');
The above will add a red border to elements with an id of 'element-one' and 'element-two'.
$('#JA2, #JA3').click(function() {
if ($('#JA2').prop('checked') && $('#JA3').prop('checked')) {
alert('Both checked');
}
}
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 am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.
you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
If you want the value of an input tag, you want to use .value.
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>
I have to do a simple work.
I have:
echo' <div class="col-sm-12" id="recensioni_titolo">
<form role="form" id="review-form" method="post" action="php\insert_comment.php">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<input type="text" class="form-control" name="Titolo" id="titolo_review" placeholder="Titolo">
<input type="text" class="form-control" name="ID_locale" id="titolo_review" value="'.$id_Local.'" style="visibility: hidden; position:fixed;">
</div>
</div>
<div class="col-sm-4">
<fieldset class="rating">
<input type="radio" id="star5'.$id_Local.'" name="Voto" value="5" /><label class = "full" for="star5'.$id_Local.'" title="Ottimo - 5 stelle"></label>
<input type="radio" id="star4'.$id_Local.'" name="Voto" value="4" /><label class = "full" for="star4'.$id_Local.'" title="Buono - 4 stelle"></label>
<input type="radio" id="star3'.$id_Local.'" name="Voto" value="3" /><label class = "full" for="star3'.$id_Local.'" title="Discreto - 3 stelle"></label>
<input type="radio" id="star2'.$id_Local.'" name="Voto" value="2" /><label class = "full" for="star2'.$id_Local.'" title="Insufficiente - 2 stelle"></label>
<input type="radio" id="star1'.$id_Local.'" name="Voto" value="1" /><label class = "full" for="star1'.$id_Local.'" title="Pessimo - 1 stella"></label>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Review" id="review" placeholder="Inserisci una descrizione.."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn main-btn pull-right" name="submit_review" id="submit_review'.$id_Local.'">Invia</button>
</div>
</div>
This code is generating the same thing for 5 times. I'have to find one method to declare and use the id="review-form" in a unique mode because with this code:
$(document.getElementsByName("submit_review")).unbind().click(function() {
var chx = document.getElementsByName("Voto");
for (var i=0; i<chx.length; i++) {
// If you have more than one radio group, also check the name attribute
// for the one you want as in && chx[i].name == 'choose'
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
$.ajax({
url : "php/insert_comment.php",
type : "post",
data : $("#review-form").serialize(),
success : function(data){
$.ajax({
url : "php/reviews.php",
type : "post",
data: {'id_Local' : $('.modal').attr('data-modal')},
success : function(data){
$('#box_recensioni').html(data);
chx[i].checked=false;
}
})
}
})
return true;
}
}
// End of the loop, return false
alert("Inserisci almeno il voto!!")
return false;
});
I have only the first element is working.
I can generate the id with "id'.$variable'" but I don't know how to refers to every single id in the javascript file.
Thank you to all in advance
In HTML, an ID is supposed to be unique :
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
This is why JavaScript can grab only the first occurence of an ID, since it's supposed to be the only one. You may want to replace those multiple IDs with classes, which is at least correct in HTML5 and will be also smarter in Javascript.
Here is a link to the post in the Mozilla documentation of IDs in HTML, to be sure that you understand the role of this tag.
As other's have said using the same ID would be useless instead you may want to use a class identifier. And assuming you want to create multiple form elements... and you don't have a unique identifier to use in your scripts you may try the following which I haven't tested...
I see you have already gotten the radio button
var chx = document.getElementsByName("Voto");
and performed a check on it under your if statement
if (chx[i].type == 'radio' && chx[i].checked) {
if so, maybe you can try to get the closest form element of the radio button that you are dealing with (i.e. checked) by doing something like
var thisForm = chx[i].closest('form')
--and later do thisForm.serialize();
check this out for more detail in using closest
You can create an array, then use an loop through each radio button pushing the id into the array. Then use the array for the ids.
var radioIds = new Array();
$('.rating input[name="Voto"]').each(function(){
radioIds.push($(this).attr('id'));
});
console.log(radioIds)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<fieldset class="rating">
<input type="radio" id="star54" name="Voto" value="5" /><label class="full" for="star54" title="Ottimo - 5 stelle"></label>
<input type="radio" id="star44'" name="Voto" value="4" /><label class="full" for="star44" title="Buono - 4 stelle"></label>
<input type="radio" id="star34" name="Voto" value="3" /><label class="full" for="star34" title="Discreto - 3 stelle"></label>
<input type="radio" id="star24'" name="Voto" value="2" /><label class="full" for="star24" title="Insufficiente - 2 stelle"></label>
<input type="radio" id="star14" name="Voto" value="1" /><label class="full" for="star14" title="Pessimo - 1 stella"></label>
</fieldset>
</div>
I have this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>