html+javascript

Question

Shikha_1 -4 Light Poster

11 Years Ago

<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

html-css javascript

Edited 11 Years Ago by pritaeas because: Moved to Javascript.

3 Contributors
5 Replies
245 Views
4 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by Shikha_1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

iamthwee · Answer 1 · 2013-08-17T07:53:56+00:00

iamthwee

11 Years Ago

Consider using jquery.

stbuchok commented: jquery is not 42, it is not the answer to the answer to life the universe and everything. It also doesn't help the person solve their problem. -2

pp0007 -2 Newbie Poster · Answer 2 · 2013-08-17T07:57:58+00:00

pp0007 -2 Newbie Poster

11 Years Ago

solve it

stbuchok commented: Not exactly helpful -2

Shikha_1 -4 Light Poster · Answer 3 · 2013-08-17T10:46:57+00:00

<!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??

Shikha_1 -4 Light Poster · Answer 4 · 2013-08-17T10:47:40+00:00

<!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

Shikha_1 -4 Light Poster · Answer 5 · 2013-08-17T11:40:00+00:00

<!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