I am trying to delete the div and content inside when I click on the delete icon on the bottom left. How would I be able to do this? When the X is clicked, the content and div of the question goes away.
Here is the code.
<li class="question" id="question2">
<div class="question-header curves dense-shadows">
What color is the sky?
</div>
<div class="question-content dense-shadows">
<ol type="A">
<li><input type="radio" id="q2a1" name="question2" /> Red</li>
<li><input type="radio" id="q2a2" name="question2" /> Green</li>
<li><input type="radio" id="q2a3" name="question2" /> Blue</li>
<li><input type="radio" id="q2a4" name="question2" /> Brown</li>
</ol>
<div style="text-align:right">
<a href="#" class="delete"><span style="margin-left:5px;"><img src="images/deletebutton.png"
onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a>
</div>
</div>
</li>
<a href="#" class="delete" onclick="document.body.removeChild(document.getElementById('question2'))">
Try using
yourDivToBeDeleted.innerHTML="";
Related
I'm working on a bunch of django forms that I would like to show one after the other once the former one has been submitted.
I had a look at the question: jQuery - Function to display next element on page and hide the current one on click
But I couldn't manage to have it work with what I have. :(
I put an example below of the html generated.
What I am trying to achieve:
Start by only displaying div="question_2" and button id="submit_2". => DONE
Once I click on button id="submit_2" I want all div and button whose id ends with the following number (ie 3 here) to be displayed. In the below example I want "question_3" and "submit_3" to be displayed (and the following time: "description_4", "question_4" and "submit_4").
I want to hide button id="submit_2" so that at each step there is only one submit button at the very end of the webpage.
Ideally, I would like to hide the forms that have already been submitted. But I still want them to be displayed on the same page.
This is a dummy introduction text.
<div id="question_2" class="card" style="display: block;">
<h5 class="card-header">Question 1</h5>
<div class="card-body">
<h6 class="card-title">The first question is:</h6>
<p class="card-text">
<ul id="id_Question 1">
<li><label for="id_Question 1_0"><input type="checkbox" name="Question 1" value="A" id="id_Question 1_0">Answer 1</label></li>
<li><label for="id_Question 1_1"><input type="checkbox" name="Question 1" value="B" id="id_Question 1_1">Answer 2</label></li>
<li><label for="id_Question 1_2"><input type="checkbox" name="Question 1" value="C" id="id_Question 1_2">Answer 3</label></li>
<li><label for="id_Question 1_3"><input type="checkbox" name="Question 1" value="D" id="id_Question 1_3">Answer 4</label></li>
</ul>
</p>
</div>
</div>
<button id="submit_2" class="btn btn-primary" style="display: block;"/>Submit</button>
<div id="question_3" class="card" style="display: block;">
<h5 class="card-header">Question 2</h5>
<div class="card-body">
<h6 class="card-title">The second question is:</h6>
<p class="card-text">
<ul id="id_Question 2">
<li><label for="id_Question 2_0"><input type="checkbox" name="Question 2" value="A" id="id_Question 2_0">Answer 1</label></li>
<li><label for="id_Question 2_1"><input type="checkbox" name="Question 2" value="B" id="id_Question 2_1">Answer 2</label></li>
<li><label for="id_Question 2_2"><input type="checkbox" name="Question 2" value="C" id="id_Question 2_2">Answer 3</label></li>
<li><label for="id_Question 2_3"><input type="checkbox" name="Question 2" value="D" id="id_Question 2_3">Answer 4</label></li>
</ul>
</p>
</div>
</div>
<button id="submit_3" class="btn btn-primary" style="display: block;"/>Submit</button>
<div id="description_4" class="card text-white bg-secondary mb-3" style="display: none;">
<div class="card-body">
<h6 class="card-title">This is an intermediary description.</h6>
</div>
</div>
<div id="question_4" class="card" style="display: block;">
<h5 class="card-header">Question 3</h5>
<div class="card-body">
<h6 class="card-title">The third question is:</h6>
<p class="card-text">
<ul id="id_Question 3">
<li><label for="id_Question 3_0"><input type="checkbox" name="Question 3" value="A" id="id_Question 3_0">Answer 1</label></li>
<li><label for="id_Question 3_1"><input type="checkbox" name="Question 3" value="B" id="id_Question 3_1">Answer 2</label></li>
<li><label for="id_Question 3_2"><input type="checkbox" name="Question 3" value="C" id="id_Question 3_2">Answer 3</label></li>
<li><label for="id_Question 3_3"><input type="checkbox" name="Question 3" value="D" id="id_Question 3_3">Answer 4</label></li>
</ul>
</p>
</div>
</div>
<button id="submit_4" class="btn btn-primary" style="display: block;"/>Submit</button>
My jquery code:
{% block custom_js %}
<script>
$( "#submit_2" ).click(function() {
$( "div:hidden" ).first().fadeIn( "slow" );
}
)
</script>
{% endblock %}
It does what I want only for the very first steps. Being a beginner in jquery, I don't know how to fadeIn everything that ends with _3, ...
Would have any idea of how I could achieve that?
Thank your for your help! :D
UPDATE on 09/02/2020: I'm making progress. My jquery code now looks like:
<script>
var count = 2;
function incrementCount(){
count++;
}
$( "#submit_" + count.toString() ).click(function() {
// Make current question read only + hide the submit button.
$("div[id$='_" + count.toString() + "']").prop('readonly', true);
$("button[id$='_" + (count).toString() + "']").fadeOut( "slow" );
incrementCount();
// Display next question and associated submit button.
$("div[id$='_" + count.toString() + "']").fadeIn( "slow" );
$("button[id$='_" + count.toString() + "']").fadeIn( "slow" );
}
)
</script>
I have essentially two problems :
the function $( "#submit_" + count.toString() ).click(function() does not update when count is incremented. As a result it only works for the 1st click.
the read only does not work.
Would you have an idea for (1)? Could it be because jquery cannot cope with dynamic functions names?
I am currently new to web development, how do you get the total value of the chosen radio buttons and store it in an array then the link or page would be different base on the total value. Is it possible in javascript? let's say that the total values of the selected buttons is 50 then it will go to page1 if not it will go to page2 and so on.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<div class="wrap">
<h1 class="likert-header">Likert Scale survey</h1>
<form action="">
<label class="statement">Q1.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">Q2.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<button class="clear">Clear</button>
<button class="submit">Submit</button>
</div>
</form>
</div>
</HTML>
I have some quizzes, like I showed below. Each Quiz ends with submit and reset button. The problem here is, if I click submit button in a quiz it shows the other quiz answer too.
Can someone help me to prevent showing the answer other than active quiz div
<div id="quiz-1" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-2" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<div id="quiz-3" class="quiz">
- Qn 1 Qn 2 Qn 3
**Submit Reset**
</div>
<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-1 -->
<div id="quiz-2" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-2 -->
<div id="quiz-3" class="quiz">
<div id="q1">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
<li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
<li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
<li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<div id="q2">
<div class="qn">
<p>question</p>
</div>
<div class="ans">
<ul style="list-style-type: none;">
<li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
<li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
<li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
<li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
</ul>
<div class="expn" style="display:none">
<p><b>Some explanation</b></p>
</div>
</div>
</div>
<button class="btn1" type="submit">Show Answer</button>
<button class="btn2" type="reset">Reset</button>
<span style="display:none; color: red" class="ans_all"> Please answer all questions</span>
</div><!-- quiz-3 -->
$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);
function chkd_answer() {
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$('.expn').slideToggle();
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
function reset(){
var chkd_optn = $('input:checked');
chkd_optn.prop("checked", false);
$('.expn').slideUp();
$('li').removeClass('g-class r-class');
}
Try replacing your function with the below one:
function chkd_answer() {
var currentButton = $(this);
var chkd_optn = $('input:checked');
var correct = $("li.correct");
var wrong = chkd_optn.parent("li").not(".correct");
if (chkd_optn.length < 3) {
$('.ans_all').fadeIn(1000).fadeOut(800);
} else {
$(currentButton).closest(".quiz").find('.expn').slideToggle(); // searching the associated .expn element to show it
correct.toggleClass('g-class'); // adding green
wrong.toggleClass('r-class'); // adding red
}
}
Also all your code show work with the associated option buttons from where the button has been clicked. So please check your rest of the code too.
I have a list that looks like that, so the user should check the item one by one and get a feedback the item is checked or not.
<html>
<head>
<link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script>
</head>
<body>
<div id="topbar">
<div id="title">
Engine Run-up
</div>
<div id="leftnav">
Home
Overview
</div>
<div id="rightnav">
Next
</div>
</div>
<div id="content">
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="red"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Safety Belts -<font color="red"> fastened</font></span>
<input name="2" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Canopy -<font color="red"> closed / locked</font></span>
<input name="3" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Pressure Warning Light -<font color="red"> OFF</font></span>
<input name="4" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Shut-off Valve -<font color="red"> check OPEN</font></span>
<input name="5" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Quantity Indicator -<font color="red"> check</font></span>
<input name="6" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Engine Gauges -<font color="red"> green range</font></span>
<input name="7" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Trim -<font color="red"> NEUTRAL</font></span>
<input name="8" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Controls -<font color="red"> free</font></span>
<input name="9" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1700-1800 RPM</font></span>
<input name="10" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Prop Control Level -<font color="red"> Cycle 3 x (50-250 RPM)</font></span>
<input name="11" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Ignition Switch - Cycle -<font color="red"> L-BOTH-R-BOTH</font></span>
<input name="12" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1500 RPM</font></span>
<input name="13" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carburetor Heat -<font color="red"> ON (<50 RPM)</font></span>
<input name="14" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> IDLE</font></span>
<input name="15" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carniretor Heat -<font color="red"> OFF</font></span>
<input name="16" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Corcuit Breakers -<font color="red"> check IN</font></span>
<input name="17" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Electric Fuel Pump -<font color="red"> ON</font></span>
<input name="18" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Wing Flaps -<font color="red"> T/O</font></span>
<input name="19" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Parking Brake -<font color="red"> release</font></span>
<input name="20" type="radio" value="other" />
</li>
</ul>
</div>
<div id="footer">
<a class="noeffect" href="#" onClick="resetChecklist();">Reset ZYX</a>
<br /><br />
<a class="noeffect" href="#" onClick="openXYZDE();">XYZ</a>
</div>
</body>
I want to check via JavaScript whether one of the "li" is checked, if so it should change that line to "green".
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="green"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
If jquery is an option, it becomes pretty simple.
function checkChanges()
{
$('.radiobutton font').attr('color', 'red');
$('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green');
}
$(function()
{
checkChanges();
$('.radiobutton :radio').on('click', checkChanges);
});
Although I HIGHLY recommend removing the font tag and instead add a class to the li, such as radiobutton-checked which sets the font color to green.
The ab ove code will reset all fonts to red, then find the one radio button with a checked radio inside it, iterate back up to the parent radiobutton (closest) and then find its child font tag and set its color to green. Then anytime a radio button gets clicked, it repeats the above process, thus keeping only the actively checked radio button green.
On clicking on the Populate Values button the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively
I want to do it unobtrusively without inline JavaScript
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result"></span>and my preferred
location is: <span class="home-location-result"></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
Modified your HTML. Provided an id attribute for your result spans
$(function(){
$("#ss").click(function(){
// Find all input elements with type radio which are descendants of element with id `form`
var filt = $("#form_block input:radio");
// Apply a filter to the above object with `name='home-location'` and checked and get the value
var homeVal = filt.filter("[name='home-location']:checked").val();
// same as above
var preferredVal = filt.filter("[name='home-preferred']:checked").val();
// Set the text of the element width id `home-location-result' with the computed value
$("#home-location-result").text(homeVal);
// same as above
$("#preferred-location-result").text(preferredVal);
return false;
});
});
See a working demo
use this it's works for me
<script>
function test()
{
var home= $('input:radio[name=home-location]:checked').val();
document.getElementById("h1").innerHTML=home;
var preferred= $('input:radio[name=home-preferred]:checked').val();
document.getElementById("h2").innerHTML=preferred;
return false;
}
</script>
<form onsubmit="return test();">
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
location is: <span class="home-location-result" id='h2'></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
</form>