Radi Button Validation

I have two problems with a HTML page that I need to update:

I have added two radio buttons. I need to write a JavaScript that will check that one redio button is checked before the form is submitted. Otherwise it will show a pop-up error message. How can I do that? By default (when the page is loaded) no radio button will be checked.

Also I wrote the HTML page that has "User Name" Label and a Textbox and some text just below the textbox. I wrote all these inside the table and made it center aligned. Is there any way to change the table, so that there will be say a bit more free space on the right side of the table than the space in the left side of the table. i.e. I need to move the table a bit towards the left side of the window.

Any help will be very helpful...
I have attached the entire HTML code below:

------test.html----------------
<HTML><HEAD><TITLE>Test</TITLE><!-- begin: CSS and JavaScript--><LINK
href="Test_files/NN4.css" type=text/css rel=stylesheet>
<STYLE type=text/css media=all>@import url( http://ecdn.com/standards/css/intranet.css );
</STYLE>
<BODY>

<form action=dologin.asp method=post>
 <table align=center class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=505>
   <tr>
    <td width=205>
User&nbsp;Name
    </td>
    <td width=400 align=right>
    <INPUT TYPE="User Name" NAME="USER">
    </td>
   </tr>

   <tr>
    <td width=205>
Applications&nbsp;Directory&nbsp;Password&nbsp;
    </td>
    <td width=400 align=right>
    <INPUT TYPE="password" NAME="PASSWORD">
    </td>
   </tr>

   <tr>
    <td width=205>
&nbsp;
    </td>
    <td width=400 align=right>
<b>Embedded Communication Computing1</b><input type="radio" name="SECTOR" value="ECC1">
    </td>
   </tr>


 <tr style='mso-yfti-irow:1'>
    <td width=212 valign=top style='width:159.0pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal align=right style='margin:0in;margin-bottom:.0001pt;
    text-align:right'><b><span style='font-size:9.0pt;font-family:Arial'>&nbsp;</span></b><span style='font-size:9.0pt;font-family:
    Arial'><o:p></o:p></span></p>
    </td>
    <td width=437 valign=top style='width:302.75pt;padding:0in 0in 0in 0in' align=right>
    <p class=MsoNormal style='margin:0in;margin-bottom:.0001pt'><span
    style='font-size:9.0pt;font-family:Arial'>
<span style='font-size:9.0pt;font-family:Arial'>
<b>
Embedded Communication Computing2
</b><input type="radio" name="SECTOR" value="ECC2"> <br></span>
<o:p></o:p></span></p>
    </td>
   </tr>


   <tr style='mso-yfti-irow:2;mso-yfti-lastrow:yes'>
    <td width=212 valign=top style='width:159.0pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal style='margin:0in;margin-bottom:.0001pt'><span
    style='font-size:9.0pt;font-family:Arial'>&nbsp;<o:p></o:p></span></p>
    </td>
    <td width=437 valign=top style='width:302.75pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal align=right style='margin:0in;margin-bottom:.0001pt;
    text-align:right'><span style='font-size:9.0pt;font-family:Arial'><INPUT TYPE="image" ACTION="dologin.asp" SRC="SmartLoyalty_files/image001.gif" METHOD="post" NAME="imageField"
    ACTION=dologin.asp METHOD=post border=0><o:p></o:p></span></p>
    </td>
   </tr>
  </table>
</form>

</BODY></HTML>
--------END of test.html-------------
tookiAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nabsolCommented:
Hi

<HTML><HEAD><TITLE>Test</TITLE><!-- begin: CSS and JavaScript-->
<script language="JavaScript">
function test()
{
  if(!document.forms[0].SECTOR[0].checked && !document.forms[0].SECTOR[1].checked )
  {
     alert("select option from radio button")
     return false;
  }
}
</script>
<LINK
href="Test_files/NN4.css" type=text/css rel=stylesheet>
<STYLE type=text/css media=all>@import url( http://ecdn.com/standards/css/intranet.css );
</STYLE>
<BODY>

<form action=dologin.asp method=post  onsubmit="return test()">
 <table align=center class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=505>
   <tr>
    <td width=205>
User&nbsp;Name
    </td>
    <td width=400 align=right>
    <INPUT TYPE="User Name" NAME="USER">
    </td>
   </tr>

   <tr>
    <td width=205>
Applications&nbsp;Directory&nbsp;Password&nbsp;
    </td>
    <td width=400 align=right>
    <INPUT TYPE="password" NAME="PASSWORD">
    </td>
   </tr>

   <tr>
    <td width=205>
&nbsp;
    </td>
    <td width=400 align=right>
<b>Embedded Communication Computing1</b><input type="radio" name="SECTOR" value="ECC1">
    </td>
   </tr>


 <tr style='mso-yfti-irow:1'>
    <td width=212 valign=top style='width:159.0pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal align=right style='margin:0in;margin-bottom:.0001pt;
    text-align:right'><b><span style='font-size:9.0pt;font-family:Arial'>&nbsp;</span></b><span style='font-size:9.0pt;font-family:
    Arial'><o:p></o:p></span></p>
    </td>
    <td width=437 valign=top style='width:302.75pt;padding:0in 0in 0in 0in' align=right>
    <p class=MsoNormal style='margin:0in;margin-bottom:.0001pt'><span
    style='font-size:9.0pt;font-family:Arial'>
<span style='font-size:9.0pt;font-family:Arial'>
<b>
Embedded Communication Computing2
</b><input type="radio" name="SECTOR" value="ECC2"> <br></span>
<o:p></o:p></span></p>
    </td>
   </tr>


   <tr style='mso-yfti-irow:2;mso-yfti-lastrow:yes'>
    <td width=212 valign=top style='width:159.0pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal style='margin:0in;margin-bottom:.0001pt'><span
    style='font-size:9.0pt;font-family:Arial'>&nbsp;<o:p></o:p></span></p>
    </td>
    <td width=437 valign=top style='width:302.75pt;padding:0in 0in 0in 0in'>
    <p class=MsoNormal align=right style='margin:0in;margin-bottom:.0001pt;
    text-align:right'><span style='font-size:9.0pt;font-family:Arial'><INPUT TYPE="image" ACTION="dologin.asp" SRC="SmartLoyalty_files/image001.gif" METHOD="post" NAME="imageField"
    ACTION=dologin.asp METHOD=post border=0><o:p></o:p></span></p>
    </td>
   </tr>
  </table>
</form>

</BODY></HTML>


By Nab
RoonaanCommented:
You would first have to change your form to call the validation function onsubmit:

<form action="dologin.asp" method="post" onsubmit="return validateForm(this);">

Then you add this script block inbetween your <head> and </head>. You don't have to remove any of the data you have there at this stage. Just paste the block in front of </head>:

<script type="text/javascript">
  function validateForm(frm) {
     var errors = new Array();
     if(!frm.SECTOR[0].checked && !frm.SECTOR[1].checked) errors.push("You have to select at least one of both radio buttons");

     if(errors.length > 0) {
       alert("The form could not be submitted. Please attend to the following issues:\n- " + errors.join("\n- "));
       return false;
     } else {
       return true;
     }
  }
</script>

As to the placement of the table, you can do multiple things:
- Increase the width of the table in width="505" => width="555" or something.
- add a right-margin to the table, hence pushing it to the left. <table ...what you have already... style="margin-right:100px;" >

Hope this helps;

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.