we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.
please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/
jquery code :-
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$('.textArea').show();
$('.browseArea').hide();
}
else if (this.value == 'Text') {
$('.textArea').hide();
$('.browseArea').show();
}
});
}
Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image
changeCheck();
function changeCheck() {
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
} else if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
.questionBlock {
float: left;
margin: 0;
padding: 10px 0;
width: 100%;
display: flex;
}
.questionBlock .alloption {
float: left;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
.questionBlock .text {
display: inline-block;
margin: 0;
padding: 0;
width: 10%;
}
.questionBlock .radioArea {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
}
.questionBlock .textArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
}
.questionBlock .browseArea {
display: inline-block;
margin: 0;
padding: 0;
width: 70%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
You can find working jsfiddle here without so much changes to your code
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio]', function() {
if (this.value == 'Image') {
console.log($(this).parent())
$(this).parents('.questionBlock').find('.textArea').hide();
$(this).parents('.questionBlock').find('.browseArea').show();
}
else if (this.value == 'Text') {
$(this).parents('.questionBlock').find('.textArea').show();
$(this).parents('.questionBlock').find('.browseArea').hide();
}
});
}
Multiple checkbox toggle with image and textarea
Here is updated jquery function:
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).closest('.questionBlock').find('.textArea').show();
$(this).closest('.questionBlock').find('.browseArea').hide();
}
else if (this.value == 'Text') {
$(this).closest('.questionBlock').find('.textArea').hide();
$(this).closest('.questionBlock').find('.browseArea').show();
}
});
}
I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.
Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
changeCheck();
function changeCheck(){
$('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
var changeOption = $(this).closest('.radioArea').attr("data-id");
console.log(changeOption);
if (this.value == 'Image') {
$(this).parent().closest('div').next().next().show();//show browseArea div
$(this).parent().closest('div').next().hide(); //hide textArea div
}
else if (this.value == 'Text') {
$(this).parent().closest('div').next().next().hide(); //hide browseArea div
$(this).parent().closest('div').next().show(); //show textArea div
}
});
}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
<div class="text">Option 1</div>
<div class="radioArea" data-id="upload1">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 2</div>
<div class="radioArea" data-id="upload2">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
<div class="questionBlock">
<div class="text">Option 3</div>
<div class="radioArea" data-id="upload3">
<input type="radio" name="gender" value="Image" checked> Image
<input type="radio" name="gender" value="Text"> Text
</div>
<div class="textArea">
<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
</div>
<div class="browseArea">
<input type="file" name="" class="" id="">
</div>
</div>
Related
I am trying to write a basic form in Flask which is just a single page right now. The user first types in their name, then they can answer their gender, and finally respond what transportation method they use. But I need them to do be able to do this sequentially, so they cannot answer their transportation method until the previous two responses have been typed or selected. This is a learning exercise, so I also want to aim this to be on a single page.
The following html/css/javascript code shows the rudimentary basics of what I have currently. All three topic questions are in a collapsible field. So I want the user unable to click on the following collapsible fields until the previous field has a response. I was thinking that this must be done in javascript, but I am unsure as to how I can do this.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: rgb(200, 211, 214);
color: black;
font-weight:bold;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: brown;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: beige;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:rgb(172, 212, 245);overflow-x:hidden">
<button type="button" class="collapsible">Name</button>
<div class="content">
<p> Must fill out before heading to next section </p>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</div>
<br>
<button type="button" class="collapsible">Gender</button>
<div class="content">
<p> Must fill out before heading to next section </p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<br>
<button type="button" class="collapsible">Transportation</button>
<div class="content">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</div>
</body>
</html>
can you try this
coll[i].collapsible( "disable" );
you can disable the rest after first is answered enable the second and go on like this
I made a quiz and the plan is when you click submit there is going to be some text next to the answers with some more information. But now, when I click on submit the information is displayed beneath the answers instead of next to it.
You can see the problem in question 2 answer 1 after submitting.
demo: https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview
What can be the problem ?
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div> <span id="demo"></span>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" onclick="myFunction()" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
hgf
<div> </div>
With these couple of changes, the text "Hello World" was getting displayed next to the answer.
Adding a css for the "demo" span tag to stay inline.
span#demo {
display: inline;
}
/* A small bonus */
.quizstyle {
padding-right: 20%;
}
Moving it inside your "row" div tag.
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1
<span id="demo"></span>
</div>
Ofcourse, you'll have to work out the other detailing (like adding sufficient margin between your row div and demo span, providing enough width for the span to be shown on same line, reducing it's size, giving it some color, etc.), but this kind of achieves what your original requirement was.
Just add float: right; for span#demo element
I have few div elements and inside every div one checkbox.
On click this div I want to check/uncheck checkbox and add class like active or checked. Have some code if you have any idea.
<div class="filter">
<div id="select_10">
<input type="checkbox" name="what" />
visible1
</div>
<div id="select_91">
<input type="checkbox" name="ever" />
visible2
</div>
<div id="select_101">
<input type="checkbox" name="whatever" />
visible3
</div>
</div>
using this code:
$(document).on("click", "div.filter div", function (event) {
var target = $(event.target);
var id = $(this)attr('id');
if (target.is('div#'+id+' input:checkbox')) {
return;
}
var checkbox = $(this).find("input[type='checkbox']");
checkbox.prop("checked", !checkbox.is(':checked'));
});
$(this)attr('id'); should have a . like in
$(this).attr('id');
That's it.
Why using DIV and JS when we have <label> for that purpose!
.filter label {
cursor: pointer;
display: block;
background: #eee;
margin:5px; padding: 10px;
}
<div class="filter">
<label id="select_10">
<input type="checkbox" name="what" />
visible1
</label>
<label id="select_91">
<input type="checkbox" name="ever" />
visible2
</label >
<label id="select_101">
<input type="checkbox" name="whatever" />
visible3
</label >
</div>
all you need. Style label as you would for your DIV by just adding eventually display: block;
Or you can even move the inputs before the label and style the complete LABEL elements in pure CSS:
.filter input{
position: absolute;
visibility: hidden;
}
.filter label {
cursor: pointer;
display: block;
margin:5px; padding: 10px;
background: #eee;
}
.filter input:checked + label{
background: #cf5;
}
.filter label:before{content: "\2610";}
.filter input:checked + label:before{content: "\2611";}
<div class="filter">
<input id="ckb_10" type="checkbox" name="what" />
<label for="ckb_10">
what
</label>
<input id="ckb_91" type="checkbox" name="foo" />
<label for="ckb_91">
foo
</label>
</div>
I am trying to have a button change color when a user clicks one of the options from a menu listing. Is this possible?
For btn_clear, I would like the background-color to change automatically immediately to BLUE upon click of one of the menu options, and for btn_apply the same but color change to RED.
So for example, for category "Products" a user clicks "Alpha" and then the button color changes take effect automatically immediately.
Please see my FIDDLE... FIDDLE
(SA snippet doesnt seem to want to work... sorry).
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$("checkbox").on("click", function(e) {
e.preventDefault();
var i = $("li").index( $(this).parent() );
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>
Yes, it is possible http://www.bootply.com/rb3Uyw68Zg
but you have a few issues with your code, I added some "console.log" the see what was going on there
first you were missing a "." in your selectors, to change
if ( i === 1 ) {
$('btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('btn_apply').css('background', 'red');
}
into
if ( i === 1 ) {
$('.btn_clear').css('background', 'blue');
} else if ( i === 2 ) {
$('.btn_apply').css('background', 'red');
}
also
var i = $("li").index( $(this).parent() );
is always resulting -1, so you never get into those ifs, you'll have to fix this line for your background color changes to get called.
this is the code after my changes http://www.bootply.com/rb3Uyw68Zg
EDIT
to restrict the handling of clicks per menu, you can use the descendant selector, so you should change:
$(".checkbox").on("click", function(e) {
into
$(".products .checkbox").on("click", function(e) {
that means, you will only handle clicks to checkboxes that are children of ".products" (you also have to add products class to your dropdown)
here's an updated example: http://www.bootply.com/QoIe6kIt2e
This will change the colors of both of the buttons when one option is selected:
$(".checkbox").on("click", function(e) {
$('.btn_clear').css('background-color', 'blue');
$('.btn_apply').css('background-color', 'red');
});
Snippet:http://www.bootply.com/0CQWCAtU2s
This is my first attempt at using javscript with html/css. I have a button that when clicked shows a question, and three radio buttons. Everything so far so good, but I would like the radio buttons to be aligned with their actual button on the left (not the text). The content div is centered, so it seems like it is just centering the radio buttons to the page, but not relative to one another. I think if you take a look at my link you will understand:
Link to example page
Any ideas on how I can get the affect I am looking for here? Admittedly this is pretty clunky but baby steps :)
Here is my html:
<!-- Here is the main content -->
<div class="content">
<h1>Quiz With Javascript</h1>
<p>This is a simple quiz leveraging javascript.</p>
<div class="btn-group">
<input type="button" class="btn btn-primary btn-lg" onclick="showDiv()" value="Click Here For The Question" />
</div>
<div id="question1">
<h3>Where Does Phil Work?</h3>
<div>
<form>
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</form>
</div>
<script src="js/quiz.js"></script>
<script type="text/javascript">
function showDiv() {
document.getElementById('question1').style.display = "block";
}
</script>
</div>
Here is a snippet from my CSS:
body {
margin: 50px 0px;
padding: 0px;
background-color: #7FFFD4;
border-radius: 25px;
}
.content {
text-align: center;
}
input[type='radio']{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
form {
padding-left: 559px;
text-align: left;
}
Try this:
<form style="">
<div class="centerDiv">
<input type="radio" name="work" id="optionsRadios1" value="INTUIT">Intuit<br>
<input type="radio" name="work" value="GOOGLE">Google<br>
<input type="radio" name="work" value="AMAZON">Amazon<br>
</div>
</form>
and the CSS:
.centerDiv {
display: inline-block;
margin: auto;
text-align: left;
}