So I have perused the similar questions in this vein but they all have syntax errors. I have checked my codes with the available answers but it doesn't seem to be a syntax error; but I keep getting the same "getElementById() is not a function" error. The following is the snippets of code in question. The alert is working so ik the function is being called appropriately on the dropdown menu element option.
$('.dropdown-menu a').on("click", "#1", function(e){
alert("hi");
getElementById("#caseReport").style.display = 'block';
});
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
EDIT: Including the drop down div for ref
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
</ul>
</div>
You need to refer any DOM location before instructing it to get any element by its ID, you can simply use the whole document in this case:
document.getElementById('caseReport');
Please note the # is not required in this case
Since you are using jQuery then do:-
$("#caseReport").css({'display':'block'});
//or $("#caseReport").css('display','block');
//or $("#caseReport").show();
If you decided to use javascript anyhow,then do:-
document.getElementById("caseReport").style.display = 'block';
Working example:-
$(document).ready(function() {
$('.dropdown-menu a#1').click(function(e) {
e.preventDefault();
alert("hi");
$("#caseReport").css({'display':'block'});
//or $("#caseReport").css('display','block');
//or $("#caseReport").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
</ul>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
Note:-
I personally said that don't mix java-script syntax with jQuery syntax. Use either-one purely.
Please check comments carefully.
Since you're already using jQuery you might as well use
$(function() {
$('.dropdown-menu a#1').click(function(e) {
e.preventDefault();
alert("hi");
$("#caseReport").css("display","block");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu">
<a id="1" href="#">Click Me</a>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
To access an HTML element, JavaScript can use the document.getElementById(id) method.
In the HTML DOM (Document Object Model), everything is a node:
The document itself is a document node
All HTML elements are element nodes
All HTML attributes are attribute nodes
Text inside HTML elements are text nodes
Comments are comment nodes
did you try using document.getElementById()?
document.getElementById("caseReport").style.display = 'block';
Related
I'm trying to toggle between 2 divs and I can't even get through the first challenge... to catch the radiobutton click event with jQuery selector.
$("input[name='radio_btn_options']").on("click", function(){
debugger;
alert("1234");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" style="margin:15px" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="radio_btn_options" id="diagramRB" autocomplete="off" checked> Diagram
</label>
<label class="btn btn-secondary">
<input type="radio" name="radio_btn_options" id="listRB" autocomplete="off"> List View
</label>
</div>
I don't get no error message no nothing. Nothing just happens have i done something wrong??
I am attempting to make a similar page to this.
The problem is that I can't use the external JS file in ASP.net (as far as I know) so I am defining the functions and trying to use them in the HTML page.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="authenticate.aspx.cs" Inherits="authenticate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Flitter Authentication</title>
<link href="AuthenticationStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active" onclick="SwitchTab(e)">Sign Up</li>
<li class="tab" onclick="SwitchTab(e)">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" />Log In
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script>
function SwitchTab(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
</script>
</body>
</html>
Some things I noticed:
in on the onclick events I am using SwitchTab(e) I am sure that e is nothing in that context but I am not sure what I should be using. The script (defined at the bottom) should switch the views on the tab group.
First of all, the snippet you linked on codepen doesn't seem to work at all.
I manage to make it work by changing those lines below :
<li class="tab active"><a onclick="ShowTab(this, event)" href="#signup">Sign Up</a></li>
<li class="tab"><a onclick="ShowTab(this, event)" href="#login">Log In</a></li>
And the javascript function showTab() as :
function ShowTab(that, event) {
event.preventDefault();
$(that).addClass('active');
$(that).siblings().removeClass('active');
target = $(that).attr('href').toString();
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
A bit a an explaination now. "e" means nothing to the javascript engine as it's not been defined in the global scope. Whereas "this" refers to the element you just clicked on and "event" to the event (the click) that just occured. I also put the ShowTab() function in the link instead of it's parent, just because it's a lot simpler that way.
I hope it helped.
Oh well, I forgot to tell about "that". As the "this" keyword already exists in the function ShowTab() and is different to the HTML element we need to change the name to something NOT used in the closure.
Can do this very simply using jQuery and removing the inline code. The code within the following click handler is identical to that in your function
$('.tab-group a').click(function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
var target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
If you are going to use jQuery should avoid mixing inline code and unobtrusive jQuery code
I am trying to change the content by selecting the different radio button. My codes seem not working. Any problem with it? Here is the FIDDLE:
HTML
<div id="category-table" style="display: block;">
<div class="btn-group" data-toggle="buttons" style="float:right;">
<label class="btn btn-show-category active">
<input type="radio" name="options" id="option1" autocomplete="off" value="A-categories" checked=""> A Categories
</label>
<label class="btn btn-show-category">
<input type="radio" name="options" id="option2" autocomplete="off" value="B-categories"> B Categories
</label>
</div>
<br><br>
<div class="all-categories">
<div class="content-header">Category A</span></div>
</div>
<div class="used-categories" style="display:none;">
<div class="content-header">Category B</span></div>
</div>
</div>
JS
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "A-categories") {
$(".used-categories").hide();
$(".all-categories").show();
}
if ($(this).attr("value") == "B-categories") {
$(".all-categories").hide();
$(".used-categories").show();
}
});
});
Any Suggestion?
Just check fiddle. It looks like you did not include jquery js file.
make the click event to change event in radio button.
I have update the fiddle check it out
Here is the updated fiddle
What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.
I have a list (style taken from bootstrap) of elements, to which I want to add some more elements using text input. Here is my code-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
I can get the code to work with a simpler list, but not with this one. Can anyone spot why not?
Your li's are not closed:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Should be:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Always funny to spot such issues once you placed the code into the code highlighting here on SO.
In order for your javascript to work, you might use the following: http://jsfiddle.net/jX2K3/21/
try following code..
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
jsFiddle