69 users online (0 members and 69 guests)  


  Results 1 to 4 of 4

Related

  1. Javascript event inside echo statement    Forum: PHP Forum
    Replies: 2
  2. href + javascript onlick event    Forum: HTML Forum
    Replies: 4
  3. How to Decode the data from Database using database handler?    Forum: Search Engine Optimization - SEO - Forum
    Replies: 1
  4. returning value from an onclick event    Forum: Javascript Forum
    Replies: 3
  5. javascript onclick event to refresh iframe.    Forum: Javascript Forum
    Replies: 5
  1. #1
    js2006's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Location
    New york,America
    Posts
    4

    Exclamation Javascript onclick Event Handler:

    hello Guys,
    iam anew one to javascript ,thinking to do something with javascript i thought of building a webpage.

    iam a bit struggling to Develop a web page using JavaScript. so need your a little help guys.


    TO DO:

    heading:
    “Select three different colors”
    • Declare three html forms each containing three radio buttons with Red Green Blue.
    as shown in the figure given at the end. (User has to select one color from each form)
    • Associate an event onClick() with each radio button to check whether the user
    selected three different colors or not.
    • If user selects three different colors then give him a message alert:
    “This is the right selection”
    • If user selects repeated colors then give him a message alert:
    “Select three different colors”
    • Following figures elaborates the whole scenario.


    http://xs303.xs.to/xs303/06281/output_01.jpg
    http://xs303.xs.to/xs303/06281/output_02.jpg
    http://xs303.xs.to/xs303/06281/output_03.jpg

    Please reply back the code as simple HTML so i can understand it correctly.
    Last edited by HTML; 03-20-2007 at 01:54 PM.

  2. #2
    js2006's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2006
    Location
    New york,America
    Posts
    4

    Re: my code:

    MY PIECE OF CODE:

    something what i have done so far :

    <html>

    <head>

    <title>JavaScript - Event Handling</title>
    </head>

    <body>

    <h1>Select three different colors</h1>

    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" width="453" height="187">

    <tr>

    <td width="348" height="187">

    <form method="POST" action="">

    <input type="radio" value="V1" name="R1">Red</p>
    <input type="radio" value="V2" name="R2">Green</p>
    <p><input type="radio" name="R3" value="V3">Blue</p>

    </form>


    </td>

    <td width="482" height="187"><form method="POST" action="">

    <input type="radio" value="V4" name="R4">Red</p>
    <input type="radio" value="V5" name="R5">Green</p>
    <p><input type="radio" name="R6" value="V6">Blue</p>

    </form>

    </td>



    <td width="477" height="187"><form method="POST" action="">

    <input type="radio" value="V7" name="R7">Red</p>
    <input type="radio" value="V8" name="R8">Green</p>
    <p><input type="radio" name="R9" value="V9">Blue</p>
    </form>

    </td>

    </tr>

    </table>


    </body>

    </html>

  3. #3
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: my code:

    I've not really played with javascript, but in theory what you need to do is:
    set up "onclick" for each radio button
    Call a function to validate the input ...
    1. Check if all three buttons are selected - if not, return
    2. Check if all three buttons are different - if so, display "correct" message & return.
    3. Display "incorrect" message & return.

    Alternatives might be to save the validation for the "Submit" button's "onclick" event, or simply to display the message on the following page, with a redirect back to the form if the submission is invalid. These methods have the additional benefit of being able to prevent the form being submitted if only two colours are selected.

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Javascript onclick Event Handler:

    Hi there js2006,

    have a look at this example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0;
     }
    #container {
        width:450px;
        margin:20px auto;
     }
    h1 {
        font-family:sans-serif;
        font-size:18px;
        text-align:center;
    }
    fieldset {
        width:100px;
        border:3px double #000;
        float:left;
        margin:10px;
        padding:0 0 10px 10px;
        font-family:sans-serif;
        font-size:16px;
        font-weight:bold;
     }
    legend {
        border: 1px solid #999;
        background-color:#eee;
        color:#666;
        margin:10px 0;
        padding:3px;
        font-size:12px;
     }
    label {
        display:block;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var temp0=null;
      var temp1=null
      var temp2=null;
    
      var df=document.forms;
    
      var rad=document.getElementsByTagName('input');
    
    window.onload=function() {
    
    for(c=0;c<rad.length;c++) {
    
    if(rad[c].name=='one') {
       rad[c].onclick=function() {
       temp0=this.value;checkColor();
      }
     }
    
    if(rad[c].name=='two') {
       rad[c].onclick=function() {
       temp1=this.value;
       checkColor();
      }
     }
    
    if(rad[c].name=='three') {
       rad[c].onclick=function() {
       temp2=this.value;
       checkColor();
        }
       }
      }
     }
    
    function checkColor() {
    
    if((temp0==null)||(temp1==null)||(temp2==null)) {
       return;
     }
    
    if((temp0==temp1)||(temp0==temp2)||(temp1==temp2)) {
       alert('select three different colours');
       temp0=null;
       temp1=null;
       temp2=null;
       df[0].reset();
       df[1].reset();
       df[2].reset();
     }
    
    else {
       alert('this is the right selection');
      }
     }
    
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <h1>Select three different colours</h1>
    
    <form action="#">
    <fieldset>
    <legend>one</legend>
    <label><input name="one" value="red" type="radio"/> red</label>
    <label><input name="one" value="green" type="radio"/> green</label>
    <label><input name="one" value="blue" type="radio"/> blue</label>
    </fieldset>
    </form>
    
    <form action="#">
    <fieldset>
    <legend>two</legend>
    <label><input name="two" value="red" type="radio"/> red</label>
    <label><input name="two" value="green" type="radio"/> green</label>
    <label><input name="two" value="blue" type="radio"/> blue</label>
    </fieldset>
    </form>
    
    <form action="#">
    <fieldset>
    <legend>three</legend>
    <label><input name="three" value="red" type="radio"/> red</label>
    <label><input name="three" value="green" type="radio"/> green</label>
    <label><input name="three" value="blue" type="radio"/> blue</label>
    </fieldset>
    </form>
    
    </div>
    
    </body>
    </html>



Tags for this Thread