creating a table from a dropdown box option values

Hi

I'm trying to show a table based on what choice is made from a drop down box.the table will have two columns and
the selected value of the table will be the number of rows of the table with additional row for heading of tables

Expand|Select|Wrap|Line Numbers

 <select name="dropdown" size="1">

<option selected value="">Please make a selection</option>

<option value="10">Choice 10</option>

<option value="8">Choice 8</option>

<option value="4">Choice 4</option>
 
</select>

i.e. if Choice 4 is selected I'd like to display a new <tr> with the
following:

Expand|Select|Wrap|Line Numbers

 <tr>

<th> Flat No.</th>

<th>  Floor No.</th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

the values of the table will be saved in database after submit.
I want to do this only by using javascript and html and simply but can't achieve what I'm looking for.

Oct 29 '19 #1

Subscribe Post Reply

2660

gits

5,390

Expert Mod 4TB

what have you done so far to implement a solution?

Oct 30 '19 #2

AjayGohil

64KB

You can try below code:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<html lang="en">

<head>

    <title>Document</title>

</head>

<body>

      <select name="dropdown"  id="select1" size="1">

        <option selected value="">Please make a selection</option>

        <option value="10">Choice 10</option>

        <option value="8">Choice 8</option>

        <option value="4">Choice 4</option>
 
        </select>

        <div  id="table"></div>
 
       <input type="button"  id="select" value="submit" onclick="change()"/>

      <script type="text/javascript">
 
      function change() {

        var ans = document.querySelector('#select1');

        var result=ans.value;
 
        document.getElementById("table").innerHTML=get_row(result);
 
      }

      function get_row(result)

      {

          var html='<table border="1" height="200px" width="200px">'+

                    '<tr><th> Flat No.</th>'+

                     '<th>  Floor No.</th>'+

                      '</tr>';

          for (let i = 0; i < result ; i++) {

              html=html+'<tr><td></td><td></td></tr>'

               }

               return html;

      }

      </script>
 
</body>

</html>

Feb 7 '20 #3

gits

5,390

Expert Mod 4TB

since the thread was dug out of last year - in case anyone wants to use that shown code - there are some things to be commented:

1. decide whether and when to use var, let const keywords and not mixing them up somehow randomly - just because something works its not always the case its the right way - you could even leave out the variable declarations in that example at all and it would still work - but that would be even worse code then

2. the 1st option in the select-node should be handled differently since it wouldn't make sense to create a table without any row in it

3. using any layout-related properties in html like border, width, height should always be avoided since that should be done by css

overall: don't copy paste code from somewhere into your application - always use it as an example only, understand what is done there and what might be wrong or right. Know what you are doing instead of being just another 'Scriptkiddie'.

Feb 12 '20 #4

Similar topics

Pad Option Values

by: Steve Bishop | last post by:

Is it possible to use a function to pad option values in a drop down box? I need to pad 5 values in a drop down box 15 characters with balnk spaces then add a "1" on the end. Code example...

Javascript

Learning : Loop to list all dropdown box values on a form

by: Nick Calladine | last post by:

Learning : Loop to list all dropdown box values on a form Can some one point me in the right direction : I have a form which I want to loop through I basically want to get all the selected...

Javascript

Update all fields from a table with the values of a related table

by: Fons Roelandt | last post by:

Heelo, I have to Update all fields from a table with the values of a related table, i've tried some querys i found on the internet, but nothing seems to word, i even tried to lookup the value...

Microsoft Access / VBA

question reagrding dropdown list option values

by: Sean | last post by:

HI There, I would like to find out the syntax for having option values different from the ones displayed on the page? In regular HTML the forms are like <option value=1>New South Wales</option>,...

ASP.NET

Error in Creating table in Sql server 2000

by: --[zainy]-- | last post by:

AA! I am having problems on creating table through Enterprise Manager. It gives me Error 1038 i.e. is as follows Unexpected Error ODBC error: Cannot use empty object or column names. Use...

Microsoft SQL Server

how to add Option Values

by: dominick | last post by:

Hi all, i am new to this forum. Please anyone say how to add the option values which is stored in arrays using javascript.

Javascript

Creating Table using Tkinter

by: Ankit | last post by:

Hi guys i need to make a table to store a certain data using Tkinter..I have searched on the group but i have not been able to find a solution that would work for me..The thing is that i want my...

Python

write option values in drop down menu in php

by: vidurac | last post by:

dear all, I want to dynamicaly write option values in drop down list using php. i use following code to do it. var x = document.getElementById("x_AreaName").value; x.options.text="text to...

PHP

Say i select US from the dropdown option it should automatically show all the states

by: ashok kushwah | last post by:

I have a table in MYSQL database... With Country & it's corresponding States. Say i select US from the dropdown option it should automatically show all the states in US from a database file. ...

PHP

How can insert foreign key from dropdown selected values

by: Mohd Naiem | last post by:

How can insert foreign in database key from dropdown selected values in asp.net

ASP.NET

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice