PHP + Javascript dynamic div for dynamically adding inputs in form

Question

dynamically adds more dropdownlist that is populated with data from MySQL to div on button click.

<div id="dynamicDiv"><p>
        sqlconn();
        $sql="SELECT column_name FROM table";
        $result = mysql_query($sql);
        $num_rows = mysql_num_rows($result);
        echo "<select type=\"column_name\">";       
        for($i=0;$i<$num_rows;$i++){
            $table = mysql_fetch_array($result);
            echo "<option value='" . $table['column_name'] . "'>" . $table['column_name'] . "</option>";
        }
        echo "</select>";
        mysql_close($con);
</div>

<input type="button" value="+ Data" onClick="addInput('dynamicDiv');">

the only method i know is by writing a script but i can't do any php scripting on the script (or i can?). need to query to populate added drop down list.

var counter = 1;
var limit = 15;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "whatever needs to be dynamically input on div";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

is there a workaround to populate the dropdownlist in the script? much appreciated!

what are you actually asking - here's my attempt at an: use ajax request data from server traverse returned data appending to dom as required would you like me to be more explicit? if so please ask an actual question — T I
– T I, Commented Feb 6, 2012 at 16:19
using jquery's .ajax() you can implement the logic to update elements a bit like this within the success function, else if using your own implementation of ajax you can handle it in onreadystatechange — T I
– T I, Commented Feb 6, 2012 at 16:57
thank you for your help! but how do i go to the database and get the data in ajax? im unable to do so in my script because there's php sqlconnection, query and array to pass to the script. — vinz
– vinz, Commented Feb 6, 2012 at 19:13

Eugen Rieck · Accepted Answer · 2012-02-06 16:18:29Z

0

You basically have 2 options

Create the HTML for the dropdown list when creating the page and do something like

as in

<script type=...>
var selecthtml='<?php echo $selecthtml; ?>'
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = selecthtml;
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

Or look at AJAX to populate your select.

The former is easier, the latter is cleaner.

answered Feb 6, 2012 at 16:18

Eugen Rieck

65.5k10 gold badges75 silver badges97 bronze badges

don't mind telling me how do i go about doing on AJAX? i'm googling as well.

vinz
– vinz

02/06/2012 16:32:39
Commented Feb 6, 2012 at 16:32
Its not so hard after all: You'd have to create a PHP method, that gives back eitehr the options only (in JSON Form) or the HTML directly. Use a framework (Dojo? jQuery?) for the AJAX call itself. If you get the HTML just do ....innerHTML=whatever_you_got. IF you got the options, create a select in DOM and then create option objects and add them to the select's options collection.

Eugen Rieck
– Eugen Rieck

02/06/2012 17:23:40
Commented Feb 6, 2012 at 17:23

Add a comment |

Sam Arul Raj T · Accepted Answer · 2012-02-06 18:28:50Z

**This is the actual way the test goes and Change according to your table and use it . It will work as you expected**

"; echo 'countStud ='.count($arrayData).';'; echo 'stud = '.json_encode($arrayData).';'; echo ""; ?>

<!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>Untitled Document</title>
<script type="text/javascript">
    divCount =0;   
    function createDiv()
    {  

        var divTag  = document.createElement("div");
        var studList ="";
         studList += '<select id="BOX_'+divCount+'" name="BOX_'+divCount+'">';
         studList += '<option value="">--- Select ---</option>';
                     for(i=0;i<countStud;i++){
                        studList += '<option value="'+stud[i].stud_id+'">'+stud[i].stud_name+'</option>';
                     }
         studList += '</select>';
         divTag.innerHTML  = studList;
        document.getElementById('dynamicElements').appendChild(divTag);
        divCount++;

    }

 </script>
</head>

<body>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<div id="dynamicElements"></div>
 <input type="submit" value="Submit" />
 </form>
 <input type="button" onClick="createDiv()" value="Add"/>
</body>
</html>

Collectives™ on Stack Overflow

PHP + Javascript dynamic div for dynamically adding inputs in form

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related