We Keep Coding

How do I make radio button hidden until a option is selected in dropdown?

When a option is selected in drop down it shows data from mysql and I need it to be selectable. So I made a radio button but I need it to appear after option is selected but instead it is always there.

Let your radiobuttons div have the id of "radio_div" and your select - "select_options", then:
document.getElementById('select_options').addEventListener('change', function () {
document.getElementById('radio_div').style.display = 'block';
});

Not sure if I understand, but something like this?
http://jsfiddle.net/zysrcndx/
HTML:
<select id="show">
<option value="no" selected="selected">not showing</option>
<option value="yes">showing</option>
</select>
<div id="radio" style="display: none;">
<input type="radio" name="radio" value="something">Something<br>
<input type="radio" name="radio" value="somethingelse">Something Else
</div>
JavaScript:
var dd = document.getElementById('show');
var r = document.getElementById('radio');
dd.addEventListener('change', function () {
if(dd.options[dd.selectedIndex].value == 'no') {
r.style.display = 'none';
} else {
r.style.display = 'block';
}
});

Enable dropdown after typing all the values in textbox

In my HTML form, there are 2 textbox and one dropdown.
While loading the page, dropdown should not be editable(ie: disabled)
After filling all the textbox,the dropdown should be editable.
Please give an idea to solve this in javascript.

Try like this
HTML
<input type="text" id="text1" onblur="myFunction()">
<input type="text" id="text2" onblur="myFunction()">
<select id="select1" disabled>
<option>value</option>
</select>
Javascript
function myFunction() {
if (document.getElementById("text1").value.length > 0 && document.getElementById("text2").value.length > 0) {
document.getElementById("select1").disabled = false;
} else {
document.getElementById("select1").disabled = true;
}
}

Check both input elements value whenever keyup event is fired. If both the input elements have no inputs then disable the select element. Else enable it. Try this way,
javaScript :
function SetControlState(){
for(var i = 0; i < inputs.length; i++){
if(inputs[i].value.length == 0){
selectddl.disabled = true;
break;
} else{
selectddl.disabled = false;
}
}
}
var selectddl = document.getElementById("dropdl");
var inputs = document.getElementsByTagName('input');
var isEnabled = false;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].id == 'first' || inputs[i].id == 'second'){
inputs[i].onkeyup = function(){
SetControlState();
};
}
}
HTML :
<select name="ddl" id="dropdl" disabled="true">
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" id="first"/>
<input type="text" id="second"/>
jsFiddle

Javascript causing form to break in IE

Objective: Understand a Javascript related IE compatibility problem.
Question: Why does my Javascript break in IE and nowhere else (besides "IE sucks," haha) and is there an easy fix.
Details: I have a payment system that allows the user to select between 3 payment methods (via html radio buttons) and uses Javascript to display the appropriate form to complete payment. In chorme and firefox it works perfectly.
In IE however, once the initial radio button is clicked and the Javascript displays the appropriate div the cursor jumps to the lower middle of the page and the user cannot click on any of the input boxes in the form.
The boxes can be reached if the user right clicks on them, but not easily. There are a variety of ways I can get around this, but I'm trying to understand what causes the problem in IE. Especially if it's poor coding on my part. Also, if there is an easy fix to the existing code I'd be interested in hearing it.
index.phtml
<form name="payo" action="/paymentAction/" method="post" >
<div id="tabs">
<div id="nav">
<input type="radio" name="tab" class="div1" value="Inv" /> Invoice <input type="radio" name="tab" class="div2" value="CC" /> Credit Card <input type="radio" name="tab" class="div3" value="Cpn"/> Coupon
</div>
<div id="div1" class="tab">
<!-- INVOICE TEXT -->
</div>
<div id="div2" class="tab">
<!-- CREDIT CARD FORM -->
Credit Card Number: <input type=text name="CardNo" placeHolder="Credit Card Number" value="" maxlength="16">
Expiration Month / Year: <font color="red">* </font>
<select name="ExpMonth">
<option value=""selected>mm</option>
<option >01</option>
<option >02</option>
<option >03</option>
</select>
<select name ="ExpYear">
<option value=""selected>yy</option>
<option >12</option>
<option >13</option>
<option >14</option>
</select>
Street Address Associated With Card: <input type=text name="Address" placeHolder="Address" value="">
</div>
<div id="div3" class="tab">
<!-- COUPON FORM -->
Coupon Code:
<input type="text" name="cpA" size=4 maxlength=4 > -
<input type="text" name="cpnB" size=6 maxlength=6> -
<input type="text" name="cpnC" size=5 maxlength=5>
<br />
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
function hideTabs(){
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
}
function showTab(tab){
document.getElementById(tab).className = 'tab';
}
hideTabs();
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
}
})();
</script>
<div id="formdiv">
<center><input type=submit name="submit" class="ButtonMain" value=" Authorize Payment "></center>
<br />
</div>
</form>
</div>

You fetch all inputs including the form inputs (card number et al.):
var nav = tabs.getElementsByTagName('input');
Then you assign an onclick to each the first act of which is to hide the tabs then reshow them, so whenever any input is clicked focus is lost immediately.
Chrome will not do anything noticeable & restores the elements focus, IE will reset it so the element effectively becomes uncapturable.
You need to only manage changing tabs when the radio button is clicked;
var radios = document.getElementsByName('tab');
for(var i=0;i<radios.length;i++){
radios[i].onclick = function(){

The issue looks like the line:
var nav = tabs.getElementsByTagName('input');
nav includes not just the radio buttons, but also the text input boxes as well, so when you attach the onclick function to all elements of the nav array it's causing the problem you see with the cursor jumping around. Quickest and easiest solution would be to limit it only to the radio buttons within the div id="nav" element:
var nav = document.getElementById('nav').getElementsByTagName('input');
Not required to fix the problem, but you can also simplify the javascript a little, since radios is not necessary anymore. Inside the onclick function, this will refer to the radio button clicked, so you can simplify:
nav[i].onclick = function(){
hideTabs();
var radios = document.getElementsByName('tab');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var here = i;
}
}
if (radios[here].value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(radios[here].value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(radios[here].value == "Cpn") {
document.getElementById('div3').style.display = "block";
} else {
}
}
to:
nav[i].onclick = function(){
hideTabs();
if (this.value == "Inv") {
document.getElementById('div1').style.display = "block";
} else if(this.value == "CC") {
document.getElementById('div2').style.display = "block";
} else if(this.value == "Cpn") {
document.getElementById('div3').style.display = "block";
}
};

Multiple Radio Buttons that change Submit onclick location.href...possible syntax error

I'm using http://www.somacon.com/p143.php javascript for radio buttons to change the submit onclick location.href depending on which radio button is selected. But I think I may have an issue with my syntax as the button isn't working properly (I don't think it is pulling the value from the radio buttons properly). Thanks in advanced!
Here is the code:
<head>
<script type="text/javascript">
<!--
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
//-->
</script>
</head>
<body>
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p><label for="number0"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label>
<label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label>
<label for="number2"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label>
<label for="number3"><input type="radio" value="http://www.amazon.com" name="number" id="number3"> Three</label>
<label for="number4"><input type="radio" value="http://www.usatoday.com" name="number" id="number4"> Four</label>
<p>
<input type="button" onclick="location.href='+getCheckedValue(document.forms['radioExampleForm'].elements['number']);" value="Show Checked Value">
ORIGNAL SUBMIT CODE THAT MADE AN ALERT BOX RATHER THAN location.href = <input type="button" onclick="alert('Checked value is: '+getCheckedValue(document.forms['radioExampleForm'].elements['number']));" value="Show Checked Value">
</form>
</body>

It's just a syntax error.
Change it to:
onclick="window.location.href = (getCheckedValue(document.forms['radioExampleForm'].elements['number']));"

How to confirm a radio button selection with an alert box

So i have this code:
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function showConfirmationDialog() {
var textbox = document.getElementById('textbox');
var location = document.getElementById('location');
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n');
}
function formfocus() {
document.getElementById('textbox').focus();
}
window.onload = formfocus;
var option;
</script>
</head>
<body>
Your name:
<input type="text" name="FirstName" id="textbox" <br><br/>
Your Address:
<input type="text" name="address" id="location" <br></br><br></br>
Choose your location:
<form name="Radio" id="destination" action="">
Bristol:
<input type="radio" name="selection" value="bristol" onClick="option=0">
London:
<input type="radio" name="selection" value="london" onClick="option=1">
Birmingham:
<input type="radio" name="selection" value="birmingham" onClick="option=2" />
</form>
<br></br> Click:
<input type="button" value="Submit" onclick="showConfirmationDialog();" /><br></br>
</body>
</html>
... This code basically represents a form for a user to fill in and at the end select one of three option provided via the radio buttons. What I wanted to find out was that how do I get the selection from one radio button which the user will need to select, displayed within the alert box after they press submit.

Something like this...
function getSelRadioValue()
for(i = 0; i< document.forms['Radio'].elements['selection'].length ; i++){
if(document.forms['Radio'].elements['selection'][i].checked == true)
return document.forms['Radio'].elements['selection'][i].value;
}
return null;
}
var selectedRadioValue = getSelRadioValue(); //use this variable in your alert.
if(selectedRadioValue == null)
alert("please select a destination");
else if(confirm("You have selected " + selectedRadioValue))
//deal with success

You need to loop through the selection radios to get the checked value:
var selection = document.Radio.selection;
var selectionResult = "";
for(var i = 0; i < selection.length; i++) {
if(selection[i].checked) {
selectionResult = selection[i].value;
}
}
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n' + 'Location: '+selectionResult);