I've been trying to do a radio button checker with HTML and java script. When I click the 'check' button, it changes the inner-html to a paragraph. For some reason, the text only shows for about a half second then disappears.
JS file:
function runQuestionCheck() {
var question_one_answer = 1;
var question_two_answer = 1;
var question_three_answer = 1;
var question_one_explanation = "Text explaining why that's stupid!";
var question_two_explanation = " ";
var question_three_explanation = " ";
var question_one = document.getElementById("question_1").childNodes;
if (question_one[question_one_answer].isChecked) {
document.getElementById("q1_response").class = "correct";
document.getElementById("q1_response").innerHTML = "Correct!";
}
else
{
document.getElementById("q1_response").innerHTML = ("Sorry, that's incorrect." + question_one_explanation);
}
}
HTML:
<!DOCTYPE html>
<html>
<!-- Init CSS -->
<style>
html {
background-image: url("../Pictures/bg_france.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.center {
margin-left: auto;
margin-right: auto;
width: 20%;
}
.right {
position: absolute;
right: 1cm;
}
.left {
position: absolute;
left: 1cm;
}
.button_left {
position: absolute;
left: 1cm;
color: blue;
}
.button_right {
position: absolute;
right: 1cm;
color: blue;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
</style>
<!-- Init head -->
<head>
<a href="home.html">
<div class="button_left">
Back to Home
</div>
</a>
<a href="sub_france.html">
<div class="button_right">
Highlight facts
</div>
</a>
<title>
France
</title>
<link rel="icon" type="image/png" href="../Pictures/beck_icon.png">
</head>
<!-- Init question script -->
<script type="text/javascript" src="../JavaScripts/questions_spain.js"></script>
<!-- Init body -->
<body>
<br>
<FONT FACE="arial">
<!-- Title -->
<h1>
America and France
</h1>
<!-- Body/Info -->
<p>
This is where the info would go.
</p>
<br>
<!-- Questions -->
<hr>
<h1>Comprehension Questions</h1>
<form id="question_1">
This is the first question!
<br>
<input type="radio" name="color" value="q1_one">Answer one<br>
<input type="radio" name="color" id="q1_two" value="green">Answer two<br>
<input type="radio" name="color" id="q1_three" value="blue">Answer three<br>
</form>
<p id="q1_response"></p>
<br>
<form id="question_2">
This is the second question!
<br>
<input type="radio" name="color" value="q2_one">Answer one<br>
<input type="radio" name="color" id="q2_two" value="green">Answer two<br>
<input type="radio" name="color" id="q2_three" value="blue">Answer three<br>
</form>
<p id="q2_response"></p>
<br>
<form id="question_3">
This is the third question!
<br>
<input type="radio" name="color" value="q3_one">Answer one<br>
<input type="radio" name="color" id="q3_two" value="green">Answer two<br>
<input type="radio" name="color" id="q3_three" value="blue">Answer three<br>
</form>
<br>
<form>
<button onclick="runQuestionCheck()">Check answers!</button>
</form>
<p id="q3_response"></p>
<br>
</FONT>
</body>
</html>
The reason you're seeing only a flash of text is because the text is being displayed, and then the page is immediately being refreshed. That's caused by the fact that your check button is inside a form. Since the form doesn't have an action or a method set, it defaults to submitting to the current page, via GET, which is basically the same as refreshing the page.
Looking at your code, you have a lot of forms that you probably don't need. You're not sending the data anywhere, you're just checking it locally in JavaScript. However, to remove all of them, your JavaScript code would need to be significantly overhauled, so to avoid that you can solve this problem either of these two ways:
Removing the form from your button
Right now it's not doing anything at all. Just get rid of it and you won't have a problem. Replace
<form>
<button onclick="runQuestionCheck()">Check answers!</button>
</form>
With
<button onclick="runQuestionCheck()">Check answers!</button>
Or, Add a type attribute to the button
The button defaults to being a submit button, which will submit whatever form it's in when it's clicked. That's what we want to avoid, so you can instead set it to be just a normal button, like this:
<form>
<button onclick="runQuestionCheck()" type="button">Check answers!</button>
</form>
If you want to keep the form, then this is your best option.
Your code has some other problems, too.
Your style should go in the head.
Your links (Back to Home and Highlight facts) should not be in the head, they should be in the body. Content never goes in the head.
Your script can't just be in the middle of nowhere. It has to go in either the head or the body. Nowadays it's generally recommended to put it in the body.
You shouldn't use FONT tags to style your text, you should use CSS. To put everything in Arial, you can put this in your style tag:
body {
font-family: arial;
}
Your JavaScript will encounter an error. The correct way to change an element's class in JavaScript is className. Replace this:
document.getElementById("q1_response").class = "correct";
With this:
document.getElementById("q1_response").className = "correct";
Related
I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>
Again I got a problem with JavaScript, but this time is something more complex.
I'm trying to make a little JavaScript text editor. Basically it's an experiment, a test and the thing should be easy. I have a <h1> HTML element, and a <p> HTML element, and both of them change, as the user writes on a <input type="text" /> element and a <textarea></textarea>.
Now, everything work fine, but there is a problem. For making a space between lines, the user can't just press Enter, but of course need to use the <br /> HTML tag.
So my idea was to make a little button that allows the user to add this tag by pressing that button.
And JavaScript just makes a variable of the actual text, save it and add at the end of it the <br />. The result should be the text written by the user plus the break HTML tag.
And this works, if the textarea is empty and if you have never written something on it. It works and work even 10 or 20 times, but if you write something on it, it just stop working, even if you delete all the text. What is the problem in the code below?
<html>
<head>
<title>Text editor</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
<style>
.title {
font-family: roboto;
text-align: center;
}
.text {
font-family: roboto slab;
text-align: justify;
margin-bottom: 40px;
}
.container {
width: 80%;
}
.textarea {
width: 100%;
height: 30em;
text-indent: 0.5em;
}
.title_box {
margin: 10px;
width: 20em;
padding: 10px;
font-size: 1em;
}
</style>
</head>
<body>
<center>
<div class="container">
<h1 class="title" id="title_space">Title of the page</h1>
<p class="text" id="text_space">Content of the page.</p>
</div>
</center>
<hr />
<center><input type="text" class="title_box" placeholder="Title" id="title_box" /></center>
<textarea class="textarea" id="text_box"></textarea>
<input type="submit" value="Save" onclick="saveText()" />
<input type="submit" value="br" onclick="br()" />
<script>
function saveText(){
var title = document.getElementById("title_box").value;
var text = document.getElementById("text_box").value;
document.getElementById("title_space").innerHTML = title;
document.getElementById("text_space").innerHTML = text;
}
function br(){
var actualtext = document.getElementById("text_box").value;
var processedtext = actualtext + "<br />";
document.getElementById("text_box").innerHTML = processedtext;
}
</script>
</body>
</html>
When you're updating the text area, instead of:
document.getElementById("text_box").innerHTML = processedtext;
Use:
document.getElementById("text_box").value = processedtext;
Try to add this to your JavaScript code just before changing the text
text = text.replace(/\r?\n/g, '<br>');
Line breaks are \r\n or \n while HTML line break is <br> and that is the problem.
This in case I understood your question correctly.
Here is the code running
I have a form on my site, which has a dropdown box set to display:none; in CSS. I am trying to reveal the dropdown (display: inline;) when a checkbox of another element is checked. What would be possible solution here?
When, #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should be set to CSS as display: inline;
Here is the HTML:
Codepen: http://codepen.io/mizan/pen/yNbqRa
<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
<label>
<input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
<input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
<div id="sc_cf_checkbox_error_1">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
</div>
</div>
<div class="sc-form-group">
<select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
<option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
<option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
<option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
</select>
<ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
<input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
<div id="sc_cf_checkbox_error_2">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
</div>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
<input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
<div id="sc_cf_checkbox_error_3">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
</div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>
I had to clean up your code quite a bit. There were a number of things wrong:
jQuery isn't loaded in your CodePen project
#choose_a_specific_project_from_dropdown was misspelled
You were not instantiating $(document).ready() correctly
You were attempting to listen for .changed() which doesn't exist
Now we're listening for .click() event
You were not showing/hiding the dropdown correctly. You were using .next() but that isn't necessary since you are referencing it by an ID selector.
Working CodePen project: http://codepen.io/anon/pen/bdWxVE
JavaScript code:
$(document).ready(function() {
$('#Give_to_a_specific_Project').click(function( event ){
if ($(this).is(':checked')) {
$('#choose_a_specific_project_from_dropdown').show();
}
else {
$('#choose_a_specific_project_from_dropdown').hide();
}
});
});
Use the onchange event of the checkbox. onchange check if the box is checked and if it is then show the select box.
If I have understood your question correctly, you can achieve this with CSS alone, with no JavaScript or jQuery. Here's a demo. Click on the [+] button to reveal the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Toggle Visibility</title>
<style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}
/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}
/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
</style>
</head>
<body>
<input type="checkbox" id="hide">
<label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>
I currently have a HTML page linked with javascript code which allows me to press a button that shows content in a hidden div. The functionality works fine, however when the button is pressed the hidden div displays above the button. Is there anyway it can drop down below the button as opposed to dropping up. Here is the code I am using:
HTML:
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox"></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
<p>6. Run around in the rain<input type="checkbox" ></p>
<p>7. Fly a kte<input type="checkbox" ></p>
<p>8. Catch a fish with a net<input type="checkbox" ></p>
<p>9. Eat an apple straight from a tree<input type="checkbox" ></p>
<p>10. Play conkers<input type="checkbox" ></p>
</div>
<button id="button1" title="Click to show/hide content" type="button1" onclick="readmore1()">Adventurer ▼</button>
<div id="spoiler1" style="display:none">spoiler text</div>
Javascript:
function readmore1(){
var spoiler1 = document.getElementById('spoiler1');
var btn = document.getElementById('button1');
if(spoiler1.style.display=='none') {
spoiler1.style.display = '';
btn.innerHTML = "Adventurer ▲";
} else {
spoiler1.style.display = 'none';
btn.innerHTML = "Adventurer ▼";
}
}
Any help would be much appreciated.
CSS:
#button1 {
display: inline-block;
font: normal 1.5em optima;
line-height: 10px;
margin-left: -10px;
margin-bottom:20px;
width: 250px;
height:60px;
border-radius:8px;
text-align: center;
vertical-align: central;
color: #fff;
border: none;
position: relative;
top: -5px;
left: 30px;
}
Hey mate I've looked at your code more in detail and here is a code example on here, I updated your Javascript to Jquery because its a more powerful language :)
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
$("#spoiler1").show();
});
$("#button").click(function(){
$("#spoiler1").hide();
});
});
</script>
</head>
<body>
<button id="button1" title="Click to show/hide content" type="button1">Adventurer ▼ </button>
<button id="button" title="Click to show/hide content" type="button">Hide</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree
<input type="checkbox">
</p>
<p>2. Roll down a really big hill
<input type="checkbox">
</p>
<p>3. Camp out in the wild
<input type="checkbox">
</p>
<p>4. Build a den
<input type="checkbox">
</p>
<p>5. Skim a stone
<input type="checkbox">
</p>
<p>6. Run around in the rain
<input type="checkbox">
</p>
<p>7. Fly a kte
<input type="checkbox">
</p>
<p>8. Catch a fish with a net
<input type="checkbox">
</p>
<p>9. Eat an apple straight from a tree
<input type="checkbox">
</p>
<p>10. Play conkers
<input type="checkbox">
</p>
</div>
</body>
</html>
Z-index should sort it in the CSS
an example of how to use it below, I hope this helps :)
Here is a code example, I would use 999999 :p thats just an example of how you would do it
http://www.w3schools.com/cssref/pr_pos_z-index.asp
#YourDiv {
Z-Index: 999999
}
#YourButton {
Z-Index:-999999
}
I usually use CSS for this sort of effects. All you need is "input[type='checkbox']" and label.
test.html
<link rel="stylesheet" type="text/css" href="test.css"/>
<input type="checkobx" id="toggleCheck"/>
<label for="toggleCheck">Label for button</label>
<div class="hiddenContent">
<p>Yours hidden stuff goes here</p>
</div>
test.css
#toggleCheck{ display: none;}
label[for='toggleCheck']{
padding: 5px 10px;
background: green;
border-radius: 4px;
box-shadow: 1px 1px 2px black;
}
.hiddenContent{
display: none;
}
#toggleCheck:checked + label{
/* Styles for button in opened state*/
box-shadow: 0px 0px 2px black;
}
#toggleCheck:checked + label + .hiddenContent{
display: block;
}
With this technique you separate your logic from your views. IMHO, using JS for simple things like that leads to dark side.
I'm am very sorry if this has been asked before but I cannot find it anywhere.
I am fairly new to web development in all aspects, but decided to create a nice little application to access and search a database from anywhere in the office.
I followed several tutorials using WebMatrix on how to set up a simple webpage etc and I have it mostly working, except for dealing with going to the next page in WebGrid. Here is what im talking about (kind of obscure but it cannot be helped)
I found two examples online about trying to use javascript and they gave me these bits of code to use..
In a file called _layout.cshtml
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Start</title>
<script src="#Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<link href="#Href("~/styles/site.css")" rel="stylesheet" />
#RenderSection("script", required: false);
</head>
<body>
#RenderBody();
</body>
</html>
Then a file called _PageStart.cshtml
#{
Layout = "~/_layout.cshtml";
}
Then I started creating my own site and modeling it after a few tutorials I had seen, specifically involved around the WebGrid.
This is my Default.cshtml
#{
string searchStr = Request["searchBox"];
string choice = Request["choice"];
Database db = Database.Open("NameOfDatabase");
if(choice == null)
{
choice = "DefaultColumnName"; // they choose which column they want to search
//via radio buttons
}
var queryStr = "SELECT * FROM databaseTable WHERE "+choice
+" LIKE '"+searchStr+"%'";
var data = db.Query(queryStr);
WebGrid grid = new WebGrid(source: data,
defaultSort: "Name",
rowsPerPage: 20, canPage:true, canSort:true);
if(IsPost)
{//not really doing anything here
}
}
<head>
<title>Database</title>
<style type="text/css"> " //added that because it was goofing up the color scheme..
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 1px; }
.alt { background-color: #E8E8E8; color: #000; }
.style1{ min-width: 300px; max-width:400px; font-weight:bold; white-space:nowrap; overflow:hidden;}
.style2{ min-width: 100px; max-width:150px; overflow:hidden;}
.style3{ min-width: 200px; max-width:250px; overflow:hidden; white-space:nowrap;}
.style4{ min-width:100px; max-width:200px; overflow:hidden; }
.style5{ min-width: 150px; max-width:250px; overflow:hidden; white-space:nowrap;}
.style6{ min-width: 200px; max-width:250px; overflow:hidden;}
</style>
</head>
<body onload="document.form1.searchBox.focus();">
<h1>Database</h1>
<form name="form2" method="post" action="">
<p><input type="submit" name="populate" value="Populate DB" /></p>
</form>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name","Name",
format: #<p title="#item.Name.Trim()">#item.Name</p>,
style:"style1"),
//repeat to create 5 more columns exactly the same essentially
), mode: WebGridPagerModes.All
)
</div>
<form name="form1" method="post" action="Default">
<p><label for="searchBox">Search:</label>
<input type="text" name="searchBox" value="#searchStr" /></p>
<p><input type="radio" name="choice" value="Name" />
<label for="Name">Name</label></p>
<p><input type="radio" name="choice" value="choice1" />
<label for="choice1">choice1</label></p>
<p><input type="radio" name="choice" value="choice2" />
<label for="choice2">choice2</label></p>
<p><input type="radio" name="choice" value="choice3" />
<label for="choice3">choice3</label></p>
<p><input type="radio" name="choice" value="choice4" />
<label for="choice4">choice4</label></p>
<p><input type="radio" name="choice" value="choice5" />
<label for="choice5">choice5</label></p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>
</body>
#section script{
<script type="text/javascript">
$(function () {
$('th a, tfoot a').live('click', function () {
$('form1').attr('action', $(this).attr('href')).submit()
return false;
});
});
</script>
}
That is my website in general.. Well whenever you enter say someones name and a choice and click submit, it queries it fine, but if there are more than 20 names then when i click on the second page it essentially redoes my orginial query to get all the names and i loose what they typed into the text field and which option they choose.
The script I found is supposed to fire whenever they user clicks on the links that the webgrid creates to go to the next page, and put the data from form1 into something so that I can pull it back out when the page is loaded again.
I have looked and looked online for a solution and if I have found one I havent understood how it works.. so if anyone out there understands what I'm talking about and could help me out it would be greatly appreciated.
Thanks!
Take a read of Mikesdotnetting The WebGrid - Efficient Paging and Sorting at
http://mikesdotnetting.com/Article/181/The-WebGrid-Efficient-Paging-And-Sorting-With-SQL-CE-4.0
Should give you some ideas to work with.