In my application I am trying to get value of radio button but some how not able to get it.
my html is
<div style="border-bottom: 5px Solid #800080;">
<input type="radio" value="0 " name="routeSelect" checked="checked">Route 1</div>
<br>
<div style="border-bottom: 5px Solid #000080;">
<input type="radio" value="1 " name="routeSelect">Route 2</div>
<br>
<input type="button" onclick="alert(getRadioValue());" value="Which?" />
my js is
function getRadioValue() {
var group = document.getElementsByName("routeSelect");
for (var i = 0; i < group.length; i++) {
if (group[i].checked) {
return group[i].value;
}
}
return '';
}
Here Is link : http://jsfiddle.net/aX89G/
can any one tell me what is wrong I am doing
Your code is fine but the getRadioValue function isn't found, it's currently wrapped in a function which is called on load, you must choose No wrap - in <head> in the menu at the left of jsfiddle's window.
This is equivalent to putting the code in a script element in the head of your page.
Demonstration
Alternatively, you could separate your javascript from your HTML this way :
<input id=butt type="button" value="Which?" />
<script>
document.getElementById('butt').onclick=function(){
alert(getRadioValue());
});
</script>
This is usually considered cleaner and easier to maintain.
Related
First of all I am new to JavaScript. I am using the aloha editor. I want to create text areas dynamically using div tags by assigning id's for each div. Using that id I have to call a method, which is the aloha method. Everything goes fine but the aloha method is not getting the id. On the browser I am getting an empty space rather than an aloha box.
Here is my code..
javascript
var screen=document.getElementById('addScreens');
num_q=document.getElementById('numquest').value;
for(i=0;i<num_q;i++) {
div1=document.createElement("div");
div1.id="multicolumn";
screen.appendChild(div1);
}
//aloha
$(document).ready(function() {
$('#multicolumn').aloha(); //multicolumn is not defined
});
**HTML**
<html>
<body>
<br><input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
<div id="addScreens"> <br> </div>
</body>
</html>
<style type="text/css">
#multicolumn {
-webkit-column-width:300px;
-webkit-column-gap:30px;
-moz-column-width:300px;
-moz-column-gap:30px;
column-width:100px;
column-gap:30px;
width:550px;
height: 150px;
margin: 0 auto;
overflow-x: auto;
overflow-y: auto;
}
</style>
So, how do I have the id of the dynamically created div's accessible everywhere??
Thanks in advance for any ideas.
You can create the div inside $document ready and then call aloha on it. See the below code for dynamic id generation
//aloha
$(document).ready(function() {
var screen=document.getElementById('addScreens');
var num_q=document.getElementById('numquest').value;
for(i=0;i<num_q;i++)
{
var div1=document.createElement("div");
div1.id = "multicolumn_" + i;
screen.appendChild(div1);
$('#' + div1.id).aloha();
}
//multicolumn is not defined
});
From the code you have shared no multicolumn div will be created at all because the value of your input field is never set to a numeric value. Considering this line in your code
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
and calling this line in JS
num_q=document.getElementById('numquest').value;
will result in num_q evaluated to an empty string. Hence your loop won't have any effect. You could try to give a default value for your input and access its value a bit differntly with something like this :
<input type="text" name = "numquest" id ="numquest" value="1" size="5" style="" disabled>
//JS
num_q= parseInt(document.getElementById('numquest').value, 10);
On Top of that I must agree with Saravana it will be a better approach to put everything in the $(document).ready function.
I seem to be having a hard time displaying a div when a checkbox is clicked, the issue is pretty straight forward, but i cant seem to find the right jquery solution to resolve this, though i feel like i am very close.
$html=
'<form action="contacted.php" method="POST">
<input type = "hidden" name = "contact" class = "hidden" value = "'.$ip.'">
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>
<div class="hide" style="
display:none;
border:3px
solid black;
background-color:grey;
color:white;
width:200px;
position:absolute;
left:40%;
top:20%;
-moz-border-radius: 15px;
border-radius: 15px;
padding:4px;
z-index:1000;
Width:500px;
">
<textarea name = "notes" style = "" > Let\'s get some notes about that...</textarea>
<input type="submit" value="YES"/>
<input type="button" value="NO" onclick="hide()">
</div>
</form>';
this is in a for loop and $ip is an identifier. but its pretty straight forward.
jquery that i have tried
function show(){
$(this).parent().find('.hide').css("display","block")
}
im trying to display the div hide when the checkbox is clicked (this happens multiple times on the same page) and i cant piece together the right combination from the jquery documentation. Any ideas? im sure this will be simple, I am more than willing to except javascript suggestions :)
add class to input like this and try it please
<input type="checkbox" id="contact'.$ip.'" class="contact_click" value="'.$ip.'" onclick="show()"/>
$('.contact_click').on('click',function(){
$(this).closest('div').css('css','block');
});
Try this
Change
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show()"/>
to
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>
and script as
function show()
{
this.parent().find('.hide').css("display","block");
}
Pass the clicked element into your function like this
<input type="checkbox" id="contact'.$ip.'" value = "'.$ip.'" onclick="show(this)"/>
and
function show(element){
$(element).parent().find('.hide').css("display","block");
}
you dont even need the class the checkbox is a direct child of the div.
$(this).parent().show(0);
just make sure you bind the click handler to the check box and that will definitely work.
and just to make sure you are binding the event right try this when you click the check box
function test(){
var test = $(this).parent().attr('class');
alert(test);
}
and you should get hide. so if you get hide it is binded correctly
This question already has answers here:
How to disable all div content
(29 answers)
Closed 9 years ago.
I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple
<div disabled="true">
was working for me before, but for some reason it no longer works. I don't understand why.
In IE10: the text "Click Me" is not greyed out and click handler still works.
I actually need this working for IE10. Below is my code.
<html>
<script>
function disableTest(){
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
}
</script>
<body onload="disableTest();">
<div id="test">
<div onclick="alert('hello');">
Click Me
</div>
</div>
</body>
</html>
The following css statement disables click events
pointer-events:none;
Try this!
$("#test *").attr("disabled", "disabled").off('click');
I don't see you using jquery above, but you have it listed as a tag.
pure javascript no jQuery
function sah() {
$("#div2").attr("disabled", "disabled").off('click');
var x1=$("#div2").hasClass("disabledDiv");
(x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
sah1(document.getElementById("div1"));
}
function sah1(el) {
try {
el.disabled = el.disabled ? false : true;
} catch (E) {}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
sah1(el.childNodes[x]);
}
}
}
#div2{
padding:5px 10px;
background-color:#777;
width:150px;
margin-bottom:20px;
}
.disabledDiv {
pointer-events: none;
opacity: 0.4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
<div id="div2" onclick="alert('Hello')">Click me</div>
<input type="text" value="SAH Computer" />
<br />
<input type="button" value="SAH Computer" />
<br />
<input type="radio" name="sex" value="Male" />Male
<Br />
<input type="radio" name="sex" value="Female" />Female
<Br />
</div>
<Br />
<Br />
<input type="button" value="Click" onclick="sah()" />
I think inline scripts are hard to stop instead you can try with this:
<div id="test">
<div>Click Me</div>
</div>
and script:
$(function () {
$('#test').children().click(function(){
alert('hello');
});
$('#test').children().off('click');
});
CHEKOUT FIDDLE AND SEE IT HELPS
Read More about .off()
You can't use "disable" to disable a click event. I don't know how or if it worked in IE6-9, but it didn't work on Chrome, and it shouldn't work on IE10 like that.
You can disable the onclick event, too, by attaching an event that cancels:
;(function () {
function cancel () { return false; };
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
nodes[i].onclick = cancel;
}
}());
Furthermore, setting "disabled" on a node directly doesn't necessarily add the attribute- using setAttribute does.
http://jsfiddle.net/2fPZu/
I need to show a form using a button, and hide it when the user presses another button, because the other button shows another form. I did a similar thing with a select box, but I can't figure out how to do this.
Use the following code fragment to hide the form on button click.
document.getElementById("your form id").style.display="none";
And the following code to display it:
document.getElementById("your form id").style.display="block";
Or you can use the same function for both purposes:
function asd(a)
{
if(a==1)
document.getElementById("asd").style.display="none";
else
document.getElementById("asd").style.display="block";
}
And the HTML:
<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>
There's something I bet you already heard about this! It's called jQuery.
$("#button1").click(function() {
$("#form1").show();
};
It's really easy and you can use CSS-like selectors and you can add animations. It's really easy to learn.
If you have a container and two sub containers, you can do like this
jQuery
$("#previousbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide(); })
$("#nextbutton").click(function() {
$("#form_container").find(":hidden").show().next();
$("#form_sub_container1").hide();
})
HTML
<div id="form_container">
<div id="form_sub_container1" style="display: block;">
</div>
<div id="form_sub_container2" style="display: none;">
</div>
</div>
There's the global attribute called hidden. But I'm green to all this and maybe there was a reason it wasn't mentioned yet?
var someCondition = true;
if (someCondition == true){
document.getElementById('hidden div').hidden = false;
}
<div id="hidden div" hidden>
stuff hidden by default
</div>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
Would you want the same form with different parts, showing each part accordingly with a button?
Here an example with three steps, that is, three form parts, but it is expandable to any number of form parts. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.
shows_form_part(1)
/* this function shows form part [n] and hides the remaining form parts */
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
/* this is called at the last step using info filled during the previous steps*/
function calc_sum() {
var sum =
parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("The sum is: " + sum);
}
<div id="form_part1">
Part 1<br>
<input type="number" value="1" id="num1"><br>
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="calc_sum()">Sum</button>
</div>
I need a simple list (3 lines of text) surrounded by a gray box. I know I need to implement on blur instead of a "close" button.
Here's what I have so far...
I can't sen to get text values to transfer.
Help!
<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..."
onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#CCC; vertical-align:top;">
<input type="text" value="Canvas" onclick="$('media').value='Canvas';"/><br/>
<input type="button" value="Done" onclick="$('keypad').style.display='none'"/>
</div>
You're mimicking the Prototype framework but could be getting much more out of it. Firstly, if you'd set your click/blur events up as abstracted events the code would be clearer and more cross-browser compatible.
If you're showing/hiding an element use
$('elementID').show();
$('elementID').hide();
If you're getting a form value use:
$F('elementID');
or setting a form value:
$F('elementID') = 'newValue';
I can't really understand what you're trying to do - your question re: '3 lines of text' doesn't really reflect the code you've posted...
<script> function $(id) { return document.getElementById(id); } </script>
<input name="media" id="media" type="text" />
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" onmouseout="$('keypad').style.display='none'" style="display:none; background:#CCC; vertical-align:top;border:1px solid grey;">
<input type="text" value="Canvas" onclick="$('media').value = $('mediain').value;" id="mediain" onblur="$('keypad').style.display='none'"/><br/>
</div>
border: 1px solid black;
I'm not quite sure what you mean about getting text values to transfer, but a box with a single gray border should just be
<div style="border: 1px solid #AAAAAA;">
<!-- your list here -->
</div>
I spent too long typing, I'll just refer you to adam's answer for the logic part of your question.