Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Radi Button Validation

Posted on 2006-04-14
2
Medium Priority
?
213 Views
Last Modified: 2012-06-27
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
Comment
Question by:tooki
2 Comments
 
LVL 6

Assisted Solution

by:nabsol
nabsol earned 160 total points
ID: 16456730
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
 
LVL 49

Accepted Solution

by:
Roonaan earned 140 total points
ID: 16456759
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question