Develop Reference

Show and hide form no working propery with IE

I have a simple js script shows and hide 2 forms variants.
function show_form (item_form_id, item_desc_id, radio_item_id) {
/* hide all active */
var i=0;
for (; i < document.getElementsByClassName('active').length; i++ ) {
active_item=document.getElementsByClassName('active')[i].style.display='none';
}
/* show all unactive */
var a=0;
for (; a < document.getElementsByClassName('unactive').length; a++ ) {
unactive_item=document.getElementsByClassName('unactive')[a].style.display='block';
}
form_id=document.getElementById(item_form_id);
form_id.style.display='block';
desc_id=document.getElementById(item_desc_id);
desc_id.style.display='none';
radio_id=document.getElementById(radio_item_id);
radio_id.checked=true;
}
.active {
display:none;
}
<table border="0" cellspacing="2" cellpadding="2">
<tr onClick="show_form('form_1','form_1_unactive','radio_item_1');">
<td><div class="active" id="form_1"><input type="text" id="name" name="name" value="text 1"></div><div class="unactive" id="form_1_unactive">form_1</div></td>
<td><input type="radio" name="address_id" value="radio_1" id="radio_item_1"></td>
</tr>
<tr onClick="show_form('form_2','form_2_unactive','radio_item_2');">
<td><div class="active" id="form_2"><input type="text" id="name" name="name" value="text 2"></div><div class="unactive" id="form_2_unactive">form_2</div></td>
<td><input type="radio" name="address_id" value="radio_2" id="radio_item_2"></td>
</tr></table>
It works properly with FF, Chrome, Opera but doesn't work properly in IE.
After select one form I can't put characters - cursor disapears.
I've tryed with css visibility and is the same - no cursor.
How to fix it or make in different way - show and hide forms ?

Multiple submit buttons in Chrome Extension Popup Form

I'm developing an extension that saves to storage, If the form has more than one button with the same id (not name so much, id is the identifier for chrome extensions), my check doesn't work.
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Submit" value="Edit" id="action" name="action" style="width: 100%" /></td>
</tr>
Won't trigger my js (below), but this will
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
JS
function manageItem() {
if (action.value=='Add') {
...
}
}
My intent was to use it like
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
If I only have one button with the id action, this works. If I have more than one button, this doesn't work at all.
For instance, when a browser submits to server side script, only the clicked submit button has its value sent, so this situation would work with that (just as an example).
I've tried testing each row in its own form, but I still get conflict when two elements have the same ID. What can I do?
Edit: I thought I had included in my question that I do know that id's cannot repeat, but I didn't explicitly say that. I know that in well-formed html, IDs cannot repeat, but I don't know how I can achieve this.

You should use class="action" instead of id="action", ids can't repeat.
Also, a typo: replace if (action.value='Edit') { with if (action.value=='Edit') {
In your current html, you don't really need neither ids or classes (but name is still needed) - you can remove these attributes, nor
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
To distinguish between your buttons, you can just use the following:
document.getElementsByName("action")[0].onclick=function(){
//first button clicked
}
document.getElementsByName("action")[1].onclick=function(){
//second button clicked
}

Checking that at least one textarea is filled

I need help with adding a controll that checks that atleast one on the textareas is filled so that people wouldnt save blank forms. so it should controll that at least on element is checked and filled, otherwise it should give an error and wouldnt save. If anyone would have an idea how to do so, I would greatly appreciate it. The code that Im working with is down below (actually have more textareas but they are the same only with another names).
<tr>
<td valign="top" style='width: 300px;'>Family members help</td>
<%
elemText = xml.getElementFromXPath("//nursing_care/family_help/tekst");
%>
<td valign="top"><input <%=(elemText==null?"checked=\"checked\"":"") %> value="0" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio" checked="checked">Valimata
<input <%=(elemText!=null?"checked=\"checked\"":"") %> value="1" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio">Määratud</td>
<td>
<textarea style='width: 350px' style="display:<%=(elemText==null?"none":"block") %>" id="//nursing_care/family_help/tekst" name="//nursing_care/family_help/tekst"><%=(elemText!=null?elemText.getText():"") %></textarea>
</td>
<td><input style="display:<%=(elemText==null?"none":"block") %>" type="text" class="txt_left" id="//nursing_care/family_help/date" name="//nursing_care/family_help/date" value="<%=xml.getText("//nursing_care/family_help/date")%>" maxlength="10" size="10"
onchange="gnlDateValid(this,event); if(event.returnValue != false);" onfocus="gnlGotFocus(getCurrentDate(),this); inputChanged(this);" onkeydown="gnlKeyDown('00.00.0000',this,event);" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" class="button_save button" value="Salvesta" />
<input type="button" class="button" value="Sulge" onclick="window.close()" /></td>
</tr>
</tfoot>
And here is the function that shows/hides the textareas (just in case)
function showText(obj){
var elements = document.getElementsByName(obj.name);
var element = getNode(obj.name + "/tekst");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
var element = getNode(obj.name + "/date");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
}

Something like this should work.
Extend the submit button like this.
<input type="submit" class="button_save button" value="Salvesta" onclick="return submitCheck()"/>
and implement this function in your javascript file.
function submitCheck(){
var form = document.forms[0];
var textareas = form.getElementsByTagName("textarea");
for(var textarea in textareas){
if(textarea.value !== ""){
return true;
}
}
return false;
}
BTW i would recommend you to use jQuery when working with the HTML DOM ;-)

How do I validate radiobuttons using a javascript function?

I have a computing assignment to do.
I've done most I'm just stuck on this task:
"Add a set of radio buttons to the form to accept a level of entry such as
GCSE, AS or A2. Write a function that displays the level of entry to the user
in an alert box so that the level can be confirmed or rejected."
I have done the Radio Buttons I just don't know how to do the second part with the Alertbox and function.
So far my code looks like this:
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color = "red";
result = false;
}
if (msg=="") {
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<! Main HTML content begins >
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr></tr>
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examinationno">Examination Number</td>
<td><input type="text" name="examno" maxlength="4" /></td>
</tr>
<tr>
<td><input type="radio" name="Level" value="GCSE">GCSE</td>
</tr>
<tr>
<td><input type="radio" name="Level" value="AS">AS</td>
</tr>
<tr>
<td><input type="radio" name="Level" value="A2">A2</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

All you have to do is add the value of the radio button to the message like this:
msg += "Level of Entry: "+document.ExamEntry.Level.value;
Here is a fiddle demo you can try
EDIT #1: Though it has been said to use an alert box, that wouldn't actually allow the user to confirm or reject, for that, you could use confirm instead:
if (confirm("Click OK to confirm your Level of Entry or Cancel if you would like to correct it"))
return true;
else
return false;
In my example, I added it only in case the rest of the form validation was successful: http://jsfiddle.net/Qd8sk/2/
EDIT #2: Following our conversation, I updated the jsfiddle you created. It is much more simple than what you provided.
Here is yours: http://jsfiddle.net/Kjxmn/
Here is mine: http://jsfiddle.net/Kjxmn/2/
Several things I changed:
-1. Added return in front of the function name in onchange - looks like otherwise it would still submit even on return false.
-2. Corrected the form name that you called radioform this time, not Exam Entry.
-3. Got rid of the slightly cumbersome check of the selected value using if (document.radioform.level.value == '') instead.
-4. Added the confirm check.
EDIT #3: Looks like firefox doesn't like the usage of document.ExamEntry.Level.value for radio buttons, so instead I created a quick workaround that would loop through the elements of document.ExamEntry.Level and find the one that is 'selected' ('checked' actually - even though it's a radio button, the js code is still called 'checked').
Have a look at the updated fiddle: http://jsfiddle.net/Qd8sk/3/

function confirm () {
var alerttxt = "Are you sure you want to choose",
value = document.ExamEntry.name.value;
alerttxt += value;
alert(alerttxt);
}
The value variable holds the value the user chose in the radio button, you just want to append that to a message you make up and display that whole txt in an alert

2 Arrays Working as 1

I have two separate radio button arrays that should behave as if they are one. Currently, I have it only working one way. I have a YouTube video showing my problem.
I have two mutually exclusive arrays that I want them working together as one array to the user. E.g., If one radio button is checked" in one array, I do not want the other array's radio button checked, but unchecked. JavaScript should deselect the radio button in the other array, making the functionality to look like the user is working with one set of radio buttons. The two separate radio arrays have different name=pair values.
YouTube Video Showing Problem
https://www.youtube.com/watch?v=nlvzgu3pJ8A
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{font-family:sans-serif, arial;}
th{text-align:left;}
h3,h4{margin-top:.15em; padding:0;}
</style>
<script>
function monthlyPlan(){
for(var i=0; i<document.deliveryForm.monthly.length;++i)
{
if(document.deliveryForm.monthly[i].checked== true )
document.deliveryForm.weekly.checked = false;
}
}
function weeklyPlan(){
for(var i=0; i<document.deliveryForm.weekly.length;++i)
{
if(document.deliveryForm.weekly[i].checked == true)
document.deliveryForm.monthly.checked = false;
}
}
</script>
</head>
<body>
<form name="deliveryForm" action="FormProcessor.html" method="get">
<h3>Delivery Rates</h3>
<h4>Allow users to select their desired delivery option.</h4>
<ul>
<li>Bill weekly or monthly</li>
<li>Devlivered Mon-Sat or Everyday</li>
</ul>
<p>
<strong>Billed continuously $3.50 by the Month?</strong>
<input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" /> Yes
</p>
<strong>Billed by a Weekly Plan?</strong>
<table border=1 cellpadding=6>
<tr>
<th></th>
<th>4 weeks</th>
<th>13 weeks</th>
<th>26 weeks</th>
<th>52 weeks</th>
</tr>
<tr>
<th>Devlivered Mon-Sat</th>
<td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
<td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
<td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
<td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
</tr>
<th>Devlivered Everyday</th>
<td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
<td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
<td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
<td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
</tr>
</table>
</form>
</body>
</html>

Try this:
function monthlyPlan() {
for (var i = 0; i < document.deliveryForm.weekly.length; ++i) {
document.deliveryForm.weekly[i].checked = false;
}
}
function weeklyPlan() {
document.deliveryForm.monthly.checked = false;
}
Demo: http://jsfiddle.net/DpbMB/
You don't need to test whether the radio that was just clicked is checked, because for radio buttons you know they will be checked when the click event occurs (there's no way to uncheck them by clicking except by clicking on another in the group, and then it is the other that gets the event).
When the monthly radio button is clicked, loop over all of the weekly radio buttons and set them to not be checked. When any weekly radio is clicked simply uncheck the monthly one.
The array-style access is only applicable when there is more than one element with the same name, so to access the monthly button don't use [i].
It seems to me though that it would be easier to just make the monthly button part of the same group, and give it an appropriate value that you can test server-side.

Try the following for your monthlyPlan() function:
function monthlyPlan(){
/*for(var i=0; i<document.deliveryForm.monthly.length;++i)
{
if(document.deliveryForm.monthly.checked== true )
document.deliveryForm.weekly.checked = false;
}
*/
alert(document.deliveryForm.monthly.length); // will say undefined
if (document.deliveryForm.monthly.checked)
{
for (var k = 0; k < document.deliveryForm.weekly.length; ++k)
{
document.deliveryForm.weekly[k].checked = false;
}
}
}
It appears that when you only have one radio button in the group, the DOM doesn't treat it as an array.
EDIT: Actually, nnnnnn's answer is better. No point keeping the redundant if statements.