• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

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-------------
0
tooki
Asked:
tooki
2 Solutions
 
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
0
 
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;
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now