how to add text field if we select option from selection dropdown

Question

sofie_mukri 0 Newbie Poster

12 Years Ago

hello, i am sofie. here is my code.

<tr><td><label for="Cname"> No of Partipants:</label></td><td>
 <select style="width:160px;" id="text" name="participants" required="required" > 
            <option id="" value="" name="">-Select participant-</option>  
                        <option id="1" value="0" name="" >1</option>
                        <option id="" value="1" name="" >2</option>
                        <option id="" value="2" name="">3</option>
                        <option id="" value="3" name="">4</option>
                        <option id="" value="4" name="">5</option>
                        <option id="" value="6" name="">6</option>
                        <option id="" value="7" name="">7</option>
                        <option id="" value="8" name="">8</option>
                        <option id="" value="9" name="">9</option>
                        <option id="" value="10" name="">10</option>
                        <option id="" value="11" name="">11</option>
                        <option id="" value="12" name="">12</option>
                        <option id="" value="13" name="">13</option>
                        <option id="" value="14" name="">14</option>
                        <option id="" value="15" name="">15</option>
                        <option id="" value="16" name="">16</option>
                        <option id="" value="17" name="">17</option>
                        <option id="" value="18" name="">18</option>
                        <option id="" value="19" name="">19</option>
                        <option id="" value="20" name="">20</option>
                        <option id="" value="21" name="">21</option>
                        <option id="" value="22" name="">22</option>
                        <option id="" value="23" name="">23</option>
                        <option id="" value="24" name="">24</option>
                        <option id="" value="25" name="">25</option>
                        <option id="" value="26" name="">26</option>
                        <option id="" value="27" name="">27</option>
                        <option id="" value="28" name="">28</option>
                        <option id="" value="29" name="">29</option>
                        <option id="" value="30" name="">30</option>
                        <option id="" value="31" name="">More</option>
</select>
</td></tr>

so here is what i want to ask. if a user select 1 then one text area will be displayed. if 2, then two text will be displayed. i have tried some coding but ity takes a lot work to do. so i hope you can help me. thank you.

javascript

4 Contributors
9 Replies
243 Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by sofie_mukri

adam.adamski.96155 43 Junior Poster

12 Years Ago

Hey, I liked the challenge, so I tried it out.

//in the head section: This function makes the text input elements depending on the number selected in the options.

<script type="text/javascript">
function makeInputs(amt){
    var str="";
    for(i=0;i<amt;i++){
        str += 
        "<input type=\"text\" name=\"text_" + 
        (i+1) + "\"" + 
        " id=\"text_" + i + "\"" +
        " value=\"\" />\n";
    }
    document.getElementById('inputs').innerHTML = str;
}
</script>

//in the body, this makes the select area on the page, also there is a div in which to show the text inputs when they are made.

<select style="width:160px;" id="text" name="participants" required="required">
<option id="" value="" name="">-Select participant-</option> 
<script type="text/javascript">
for(i=0;i<30;i++){
    document.write(
    "<option id=\"opt_" + i + 
    "\" value=\"" + i + 
    "\" name=\"opt_" + (i+1) + 
    "\" onclick=\"makeInputs(" + (i+1) + ")\">" + (i+1) + 
    "</option>\n");
}
</script>
</select>
<div id="inputs">
</div>

Hope this helps, any more questions let us know.

Bachu 45 Newbie Poster

12 Years Ago

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table-Text-Area Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<table id="myTable" width="200px" cellpadding="0px" cellspacing="0px">
  <tr><td><label for="Cname"> No of Partipants:</label></td><td>
 <select style="width:160px;" id="text" name="participants" required="required" > 
            <option id="" value="0" name="">-Select participant-</option>  
                        <option id="1" value="1" name="" >1</option>
                        <option id="" value="2" name="" >2</option>
                        <option id="" value="3" name="">3</option>
                        <option id="" value="4" name="">4</option>
                        <option id="" value="5" name="">5</option>
                        <option id="" value="6" name="">6</option>
                        <option id="" value="7" name="">7</option>
                        <option id="" value="8" name="">8</option>
                        <option id="" value="9" name="">9</option>
                        <option id="" value="10" name="">10</option>
                        <option id="" value="11" name="">11</option>
                        <option id="" value="12" name="">12</option>
                        <option id="" value="13" name="">13</option>
                        <option id="" value="14" name="">14</option>
                        <option id="" value="15" name="">15</option>
                        <option id="" value="16" name="">16</option>
                        <option id="" value="17" name="">17</option>
                        <option id="" value="18" name="">18</option>
                        <option id="" value="19" name="">19</option>
                        <option id="" value="20" name="">20</option>
                        <option id="" value="21" name="">21</option>
                        <option id="" value="22" name="">22</option>
                        <option id="" value="23" name="">23</option>
                        <option id="" value="24" name="">24</option>
                        <option id="" value="25" name="">25</option>
                        <option id="" value="26" name="">26</option>
                        <option id="" value="27" name="">27</option>
                        <option id="" value="28" name="">28</option>
                        <option id="" value="29" name="">29</option>
                        <option id="" value="30" name="">30</option>
                        <option id="" value="31" name="">More</option>
</select>
</td></tr>
</table>

<table id="myFilterTable" width="200px" cellpadding="0px" cellspacing="0px">

</table>

<script type="text/javascript">
$(function(){
    $('#text').change(function(){
        $('#myFilterTable').html('');
        var sltdValue = $(this).val();
        var i;
        for(i=0;i<sltdValue;i++) {
            $('#myFilterTable').append('<tr><td>Participant</td><td><textarea name="txtarea[]"></textarea></td></tr>'); 
        }
    });
});
</script>

</body>
</html>

adam.adamski.96155 43 Junior Poster

12 Years Ago

That's great!
Are we solved then... are we, are we?
:D

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.

sofie_mukri 0 Newbie Poster · Answer 1 · 2012-10-19T02:00:18+00:00

thank you guys for your help. it works perfectly as what i want! :D

eburlea 23 Junior Poster · Answer 2 · 2012-10-19T15:43:37+00:00

I'm wondering just if it is possible to make the same in php without being necessary to press a button.

sofie_mukri 0 Newbie Poster · Answer 3 · 2012-10-22T09:56:28+00:00

hello adam, i just tried but unfortunately i could not find the rest particioants info in the databse table. :( how ?

That's great!
Are we solved then... are we, are we?
:D

adam.adamski.96155 43 Junior Poster · Answer 4 · 2012-10-22T10:30:32+00:00

Hey :)
There are no database calls that I can see in your code, can you repost your whole code and re-tell exactly what you want to acheive?

sofie_mukri 0 Newbie Poster · Answer 5 · 2012-10-23T06:17:27+00:00

this is my php code to connect with database

<?php


    //Connect to mysql server
    $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
    if(!$link) {
        die('Failed to connect to server: ' . mysql_error());
    }

    //Select database
    $db = mysql_select_db(DB_NAME);
    if(!$db) {
        die("Unable to select database");
    }



    $user =& JFactory::getUser();
    $ID = $user->id;

    $null = null;

    $Title = mysql_real_escape_string($_POST['Title']);
    $participants = mysql_real_escape_string($_POST['participants']);
    $Email= mysql_real_escape_string($_POST['Email']);
    $Name= mysql_real_escape_string($_POST['Name']);
    $Position= mysql_real_escape_string($_POST['Position']);
    $Company = mysql_real_escape_string($_POST['Company']);
    $Website = mysql_real_escape_string($_POST['Website']);
    $Phone = mysql_real_escape_string($_POST['Phone']);
    $fax = mysql_real_escape_string($_POST['fax']);
    $Address = mysql_real_escape_string($_POST['Address']);
    $P= mysql_real_escape_string($_POST['Box']);
    $City = mysql_real_escape_string($_POST['City']);
    $Postal = mysql_real_escape_string($_POST['Code']);
    $country= mysql_real_escape_string($_POST['country']);
    $request = mysql_real_escape_string($_POST['request']);
    $Payment = mysql_real_escape_string($_POST['Payment']);


    $view = '0';
    $post = '0';
    $minus = '1';


$dbc = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or
die('Unable to connect to MySql: '.mysql_error());

mysql_select_db(DB_NAME, $dbc) or
die('Unable to connect to MySql: '.mysql_error());

$reg = "INSERT INTO jkhlc_registrationT values      
('$null','".$Title."','".$participants."','".$Email."','".$Name."','".$Position."','
".$Company."','".$Website."','".$Phone."','".$fax."','".$Address."','".$P."','".$City."','
".$Postal."','".$country."','".$request."','".$Payment."')";//insert into table


                    $regRes = mysql_query($reg) or die (mysql_error());


echo "<script language='JavaScript'>alert('Successfully Submit.');window.location ='/index.php/registration'</script>";



if(!mysql_query($regRes,$dbc))
{
    die('Error:' .mysql_error());

}



mysql_close($dbc);


?>

sofie_mukri 0 Newbie Poster · Answer 6 · 2012-10-23T06:20:14+00:00

and this is my form.

    {source}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" title="text/css">
    body 
    { 

    margin: 0;
    padding: 0; 
    font-family: Verdana, Tahoma, Arial, sans-serif;
    border: 1px solid gray;
    }

    fieldset.main 
    { 
    margin: 3em 0 0 3em; 
    padding: 0 0 1.5em 1.5em;
    width: 650px;
    border: 1px solid gray;
    font-size: 1em; 
    margin-left: 1em;
    }

    fieldset.main legend
    { 
    margin-left: 1em; 
    color: #000080; 
    border: 1px solid gray; 
    font-weight: bold; 
    }

    fieldset.main ol 
    { 
    padding: 1em 1em 0 1em; 
    list-style: none;
    }

    fieldset.main li 
    { 
    padding-bottom: .5em;
    }

    fieldset.main ol li label 
    { 
    float: left;
    width: 10em; 
    margin-right: 1em;
    }

    /* ----------------------------------------- */

    fieldset.nested 
    { 
    margin: 1.5em 0 1em 1em; 
    padding: 0;
    width: 93%;
    font-size: 1em;
    border: 1px solid gray;
    background: #B0C4DE; 

    }

    fieldset.nested legend
    { 
    margin-left: 1em; 
    font-weight: normal;
    font-size: 1em; 
    color: black;
    background-color: white;
    padding: 0 1em 0 1em;
    border: 1px solid black;
    }

    fieldset.nested ol 
    { 
    padding: 0 1em 0 1em; 
    list-style: none;
    }

    fieldset.nested li 
    { 
    /* Control leading between rows. */
    padding-bottom: .7em;
    }

    fieldset.nested ol li label 
    { 
    float: left;
    width: 10em; 
    margin-right: 1em;
    }

    /* ----------------------------------------- */

    input.button
    { 
    /* border-style: none; */
    width: 6em;
    height: 2.5em;
    }

    div.buttonsContainer
    {
    float: right;
    margin: 1em 1em 1em 0;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <form action="index.php?option=com_registrationT" method="post">
    <fieldset class="main">
    <legend>Registration</legend>

    <fieldset class="nested">
    <legend>Contact Information</legend> 

    <table id="myTable" width="300px" cellpadding="0px" cellspacing="0px">
    <tr><td><label for="spec"> Program Title:   </label></td><td> 
    <select name="Title" style="width: 160px;" required>
    <option value="" class="opt-indent" selected>-Choose a Program-</option>
    <option value="Administration And Secretarial" class="opt-indent">Administration And Secretarial</option>
    <option value="Communication and Writing Skills" class="opt-indent">Communication and Writing Skills</option>
    <option value="Contracts Management" class="opt-indent">Contracts Management</option>
    <option value="Customer Service" class="opt-indent">Customer Service</option>
    <option value="Human Resources Management" class="opt-indent">Human Resources Management</option>
    <option value="Interpersonal Skills and Self Dev" class="opt-indent">Interpersonal Skills and Self Dev</option>
    <option value="Leadership and Management" class="opt-indent">Leadership and Management</option>
    <option value="Maintenance Planning and Mgmt" class="opt-indent">Maintenance Planning and Mgmt</option>
    <option value="Marketing and Sales" class="opt-indent">Marketing and Sales</option>
    <option value="Planning and Strategy" class="opt-indent">Planning and Strategy</option>
    <option value="Project Management" class="opt-indent">Project Management</option>
    <option value="Public Relations" class="opt-indent">Public Relations</option>
    <option value="Quality and Productivity" class="opt-indent">Quality and Productivity</option>
    <option value="Public Relations" class="opt-indent">Public Relations</option>
    <option value="Safety Management" class="opt-indent">Safety Management</option>
    <option value="Training and Development" class="opt-indent">Training and Development</option>
    </select>
    </td></tr>

    <tr><td><label for="Cname"> No of Partipants:   </label></td><td>
    <select style="width:160px;" id="text" name="participants" required="required" > 
    <option id="" value="0" name="">-Select participant-</option> 
    <option id="1" value="1" name="" >1</option>
    <option id="" value="2" name="" >2</option>
    <option id="" value="3" name="">3</option>
    <option id="" value="4" name="">4</option>
    <option id="" value="5" name="">5</option>
    <option id="" value="6" name="">6</option>
    <option id="" value="7" name="">7</option>
    <option id="" value="8" name="">8</option>
    <option id="" value="9" name="">9</option>
    <option id="" value="10" name="">10</option>
    <option id="" value="11" name="">11</option>
    <option id="" value="12" name="">12</option>
    <option id="" value="13" name="">13</option>
    <option id="" value="14" name="">14</option>
    <option id="" value="15" name="">15</option>
    <option id="" value="16" name="">16</option>
    <option id="" value="17" name="">17</option>
    <option id="" value="18" name="">18</option>
    <option id="" value="19" name="">19</option>
    <option id="" value="20" name="">20</option>
    <option id="" value="21" name="">21</option>
    <option id="" value="22" name="">22</option>
    <option id="" value="23" name="">23</option>
    <option id="" value="24" name="">24</option>
    <option id="" value="25" name="">25</option>
    <option id="" value="26" name="">26</option>
    <option id="" value="27" name="">27</option>
    <option id="" value="28" name="">28</option>
    <option id="" value="29" name="">29</option>
    <option id="" value="30" name="">30</option>
    <option id="" value="31" name="">More</option>
    </select>
    </td></tr>
    </table>
    <table id="myFilterTable" width="200px" cellpadding="0px" cellspacing="5px">
    <script type="text/javascript">

    $(function(){
    $('#text').change(function(){
    $('#myFilterTable').html('');
    var sltdValue = $(this).val();
    var i;
    for(i=0;i<sltdValue;i++) {
    $('#myFilterTable').append('<tr><td><label for="Name"> Name: </label></td><td><input type="text" name="Name" maxlength="40" size="20" required="required"></td><td><label for="Job"> Job</td><td> Title: </label></td><td><input type="text" name="Job" maxlength="40" size="20" required="required"></td> <td><label for="Email"> Email: </label></td><td><input type="text" name="Email" maxlength="40" size="20" required="required"></td></tr>'); 
    }
    });
    });
    </script>
    </table>
    </fieldset> 



    <fieldset class="nested">
    <table align="left"> 
    <legend>Nominator Information</legend> 
    <tr><td><label for="Email"> Email:     </label></td><td><input type="text" name="Email" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="Name"> Name:     </label></td><td><input type="text" name="Name" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="Position"> Position:     </label></td><td><input type="text" name="Position" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="Company"> Company:     </label></td><td><input type="text" name="Company" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="Website"> Website:      </label></td><td><input type="text" name="Website" maxlength="40" size="20"></td></tr>
    <tr><td><label for="Phone"> Phone:      </label></td><td><input type="text" name="Phone" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="Fax"> Fax:       </label></td><td><input type="text" name="Fax" maxlength="40" size="20"></td></tr>
    <tr><td><label for="Address"> Address:      </label></td><td><input type="text" name="Address" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="P.O. Box"> P.O. Box::      </label></td><td><input type="text" name="Box" maxlength="40" size="20"></td></tr>
    <tr><td><label for="City & Code"> City & Code:      </label></td><td><input type="text" name="City" maxlength="40" size="20" required="required"></td></tr>
    <tr><td><label for="City Postal Code"> City Postal Code:      </label></td><td><input type="text" name="Code" maxlength="40" size="20"></td></tr>

    <fieldset class="nested">
    <table align="left">
    <legend>Other Information</legend> 

    <tr><td><label for="part"> Special Request:</label></td><td><textarea name="request" cols="5" rows="8" align="left" >