1.11M Members

html+javascript

 
0
 
<script type="text/javascript">
    function check()
    {
    var select1 = document.getElementById("from");
    var selected1=[];
    for(var i=0;i< select1.length; i++) {
    if (select1.options[i].selected)
        selected1.push(select1.options[i].value);
    }
    for (var j=0;j<select1.length;j++)
    {
        document.write(selected2[j]);

    }
    }
    </script>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>

 <table width="70%" height="30%"  align="center"border="1" style="border-collapse:collapse;">
  <tr height="300">
    <td height="256"><p><center>YOUR SCHOOL IS FROM </center> 
      </p>

         <center> 
           <label>  FROM
          <select name="from"  id="from" multiple="multiple" size="3" onchange="check()">
         <option value="0">NURSURY</option>
          <option value="1" selected>I</option>
          <option value="2">II</option>
          <option value="3">III</option>
          <option value="4">IV</option>
          <option value="5">V</option>
          <option value="6">VI</option>
         </select>
          </label>    
         </center>
      <hr>
    <p><center>ADD SECTION TO YOUR CLASSES<br>
    </center></p>
    <script type="text/css">
    check()
    </script>
    <table width="70%" height="30%" align="center"border="1" style="border-collapse:collapse;" >
    <tr>
    <td width="196">CLASS I  </td>
    <td width="94"><input name="A" type="checkbox" value="A">A    </td>
    <td width="96"><input name="B" type="checkbox" value="B">B    </td>
    <td width="95"><input name="C" type="checkbox" value="C">C    </td>
    <td width="95"><input name="D" type="checkbox" value="D">D    </td>
    </tr>
    <td>CLASS II </td>
    <td><input name="A" type="checkbox" value="A">A   </td>
    <td><input name="B" type="checkbox" value="B">B   </td>
    <td><input name="C" type="checkbox" value="C">C   </td>
    <td><input name="D" type="checkbox" value="D">D   </td>
    <tr>
    <td>CLASS III    </td>
    <td><input name="A" type="checkbox" value="A">A   </td>
    <td><input name="B" type="checkbox" value="B">B   </td>
    <td><input name="C" type="checkbox" value="C">C   </td>
    <td><input name="D" type="checkbox" value="D">D   </td>
    </tr>
    <tr>
    <td>CLASS IV </td>
    <td><input name="A" type="checkbox" value="A">A   </td>
    <td><input name="B" type="checkbox" value="B">B   </td>
    <td><input name="C" type="checkbox" value="C">C   </td>
    <td><input name="D" type="checkbox" value="D">D   </td>
    </tr>
    <tr>
    <td>CLASS IV </td>
    <td><input name="A" type="checkbox" value="A">A   </td>
    <td><input name="B" type="checkbox" value="B">B   </td>
    <td><input name="C" type="checkbox" value="C">C   </td>
    <td><input name="D" type="checkbox" value="D">D   </td>
    </tr>
    <tr>
    <td height="73" colspan="5">                                                                                                                                                  



      <a href="confirmpop.html" rel="shadowbox"><input type="submit" name="Submit3" value="CONFIRM"></td>
      </tr>
    </table>   


      <a href="confirmpop.html" rel="shadowbox"><input type="submit" name="Submit3" value="CONFIRM"></td>
      </tr>
    </table>

  </body>
</html>

i want the values of the selected option from drop down but its not working and onthe selection of the values i want to create a table as shown in code ..i am new to javascrit and need help
 
-5
 

Consider using jquery.

 
-2
 

solve it

 
0
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sat, 17 Aug 2013 07:56:58 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<html>
<body>
<script type="text/javascript">
function section() 
{
var select1,length,a,b,tableElem,rowElem,colElem,inc;

     select1 = document.myForm.myOption;
    var selected1=[];
    for(var i=0;i< select1.length; i++)
    {
    if (select1.options[i].selected)
        selected1.push(select1.options[i].value);
    }
    document.write(selected1.length);
    document.write("hello");
    document.write(selected1[0]);
    length=selected1.length;
    a=selected1[0];
    b=selected1[length-1];
    document.write(a);
    document.write(b);

    inc=1;
    tableElem = document.createElement('table');
    tableElem.style.border="1px solid black";
    for (var k=a;k<=b; k++) {
          rowElem = document.createElement('tr');

           for (var j = 0; j < 4; j++) 
           {
             colElem = document.createElement('td');
             colElem.style.border="1px solid black";
             colElem.appendChild(document.createTextNode(inc)); //to print cell number
             rowElem.appendChild(colElem);
             check = document.createElement('input');
             check.type = "checkbox";
             check.name = "chkSection";
            //check.value = "chk"+inc;

             check.value = inc;
             check.id = "chk"+inc;
            //alert(check.value);


             colElem.appendChild(check);
             inc++;
           //colElem.appendChild(lab);
}
           tableElem.appendChild(rowElem);
}
}
</script>
<form name="myForm">
<select name="myOption" id="myoption" multiple="multiple" size="3" >

<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
<option value="6">VI</option>
<option value="7">VII</option>
<option value="8">VIII</option>
</select>
<BR><BR>
<input type=submit value="ok" onClick="section()">




  </body>
</html>

i tried this also but still table is not generated????why??
 
-1
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
  </head>
  <body>
<html>
<body>
<script type="text/javascript">
function section() 
{
var select1,length,a,b,tableElem,rowElem,colElem,inc;

     select1 = document.myForm.myOption;
    var selected1=[];
    for(var i=0;i< select1.length; i++)
    {
    if (select1.options[i].selected)
        selected1.push(select1.options[i].value);
    }
    /*document.write(selected1.length);
    document.write("hello");
    document.write(selected1[0]);
    length=selected1.length;
    a=selected1[0];
    b=selected1[length-1];
    document.write(a);
    document.write(b);
    */
    inc=1;

    tableElem = document.createElement('table');
    tableElem.style.border="1px solid black";
    for (var k=a;k<=b; k++) 
    {
          rowElem = document.createElement('tr');

           for (var j=0; j<4;j++) 
           {
             colElem = document.createElement('td');
             colElem.style.border="1px solid black";
             colElem.appendChild(document.createTextNode(inc)); //to print cell number
             rowElem.appendChild(colElem);
             check = document.createElement('input');
             check.type = "checkbox";
             check.name = "chkSection";
            //check.value = "chk"+inc;

             check.value = inc;
             check.id = "chk"+inc;
            //alert(check.value);


             colElem.appendChild(check);
             inc++;
           //colElem.appendChild(lab);
}
           tableElem.appendChild(rowElem);
}
        document.getElementById("clicksection").appendChild(tableElem);
        document.getElementById("ch").hidden =0;

}
</script>
 <center><table border="1" width="40%" height="30%">
<form name="myForm">
<select name="myOption" id="myoption" multiple="multiple" size="3" >

<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
<option value="6">VI</option>
<option value="7">VII</option>
<option value="8">VIII</option>
</select>
<BR><BR>
<input type=submit value="ok" onClick="section()">
</form>
</table></center>

 <table id="setionallotment" cellpadding="10" width="50%" height="40%">

                   <tr>

                       <td id="clicksection">




                       </td>

                   </tr>




                    <tr>

                       <td id="ch1">


                           <input type="submit" value="Submit" id="ch" name="ch" hidden="1">


                       </td>

                   </tr>



  </table>



  </body>
</html>

please tell me what is wrong in this code ,it is not working

 
0
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Fri, 16 Aug 2013 06:00:26 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    </head>

<html>
<body>
<script type="text/javascript">
function section() 
{
var select1,length,a,b,tableElem,rowElem,colElem,inc;

     select1 = document.myForm.myOption;
    var selected1=[];
    for(var i=0;i< select1.length; i++)
    {
    if (select1.options[i].selected)
        selected1.push(select1.options[i].value);
    }
    /*document.write(selected1.length);
    document.write("hello");
    document.write(selected1[0]);*/
    length=selected1.length;
    a=selected1[0];
    b=selected1[length-1];
    /*document.write(a);
    document.write(b);
    */
    inc=1;

    tableElem = document.createElement('table');
    tableElem.style.border="1px solid black";
    for (var k=a;k<=b; k++) 
    {        

          rowElem = document.createElement('tr');

           for (var j=0; j<4;j++) 
           {
             colElem = document.createElement('td');
             colElem.style.border="1px solid black";
             colElem.appendChild(document.createTextNode(inc)); //to print cell number
             rowElem.appendChild(colElem);
             check = document.createElement('input');
             check.type = "checkbox";
             check.name = "chkSection";
            //check.value = "chk"+inc;

             check.value = inc;
             check.id = "chk"+inc;
            //alert(check.value);


             colElem.appendChild(check);
             inc++;
           //colElem.appendChild(lab);
}
           tableElem.appendChild(rowElem);
}
        document.getElementById("clicksection").appendChild(tableElem);
        document.getElementById("ch").hidden =0;

}
</script>
<table border="0" width="90%" height="70%">
<tr>
<td>

 <table border="1" width="40%" height="30%">
 <tr>
 <td>
<form name="myForm">
<select name="myOption" id="myoption" multiple="multiple" size="3" >

<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
<option value="6">VI</option>
<option value="7">VII</option>
<option value="8">VIII</option>
</select>
<BR><BR>

<input type="submit" value="ok" onClick="section()">
</form>
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
   <form action="" method="post" name="f1" onsubmit="">
 <table id="sectionallotment" cellpadding="10" width="50%" height="40%">

                   <tr>

                       <td id="clicksection">




                       </td>

                   </tr>




                    <tr>

                       <td id="ch1">


                           <input type="submit" value="Submit" id="ch" name="ch" hidden="1">


                       </td>

                   </tr>



  </table>
  </form>
  </td>
  </tr>

</table>

  </body>
</html>

this code is working fine but on click ok the table are shown then they vanish but they should hold there

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: