CODEWITHSUNDEEP
phplistdynamicmenuonclick
Ben Stein
Ben Stein

Reputation: 39

onclick not replicated in JavaScript

I have got a couple of issues I need resolved with JavaScript.

The first is a problem with my JavaScript onclick method not being replicated when I duplicate a dynamic menu. This image might below help you better understand my issue:

enter image description here

The first problem is that the method that I've written for the original form in the image above - the first table row - has a working function that executes smoothly when the checkbox is ticked - the replicated dynamic menu doesn't have that function working when its ticked. Basically, there are two checkboxes with different values - "yes" and "no" - when the "no" checkbox is ticked, the "Yes" checkbox becomes disabled and unclickable - and vice versa - however this option is not working for me when I duplicate the form as a dynamic form.

The onclick option doesn't work for any of the checkboxes. The onclick method seems to be working for the "+" button when replicated though for some reason.

Here's the JavaScript code:

       <body>
        <form>

          <div id="container1">
<table border="1" id="education" name="education[]" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top"><label for="name" size="3"> <font size="3">Name of Institution</font></label></td>
<td valign="top"><label for="institution" size="3"><font size="3">Type of Institution </font></label></td>
<td valign="top"><label for="instaddress" size="3"> <font size="3">Address</font></label></td>
<td valign="top"><label><font size="3">From</font></label></td>
<td valign="top"><label><font size="3">To </font> </label></td>
<td valign="top"><label for="graduate" size="3">  Did You <br> Graduate?</label></td>
<td valign="top"><label for="averages" size="3">  Average <br>Grade</label></td>
</tr>
<tr>
<td valign="top"><input type="text" id="name" name="name[]" maxlength="30" size="20"></td>
<td valign="top"><select name="institution[]" id="institution">
<option <?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?>>Institution</option>
<?php
$sql1a = "SELECT * FROM institution ORDER BY institution asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['institution']==$_GET['id3'])
echo("<option selected value=$row1a[institution]>$row1a[institution]</option>");
else
echo("<option value=$row1a[institution]>$row1a[institution]</option>");
}
?>
</select></td>
<td valign="top"><input type="text" id="instaddress" name="instaddress[]"  maxlength="50" size="40"></td>
<td valign="top">

<select name="monthto[]" id="monthto">
<option <?php if(isset($_POST['month'])) { echo $_POST['month']; } ?>>Select Month</option>
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['month']==$_GET['id4'])
echo("<option selected value=$row1a[month]>$row1a[month]</option>");
else
echo("<option value=$row1a[month]>$row1a[month]</option>");
}
?>
</select>

<select name="toyear[]" id="toyear">
<option <?php if(isset($_POST['year'])) { echo $_POST['year']; } ?>>Select Year</option>
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['year']==$_GET['id5'])
echo("<option selected value=$row1a[year]>$row1a[year]</option>");
else
echo("<option value=$row1a[year]>$row1a[year]</option>");
}
?>
</select>

</td>


<td valign="top"> 
<select name="monthto1[]" id="monthto1" onchange="showUser(this.value)">
<option <?php if(isset($_POST['month'])) { echo $_POST['month']; } ?>>Select Month</option>
<?php
$sql1a = "SELECT * FROM month ORDER BY id asc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['month']==$_GET['id6'])
echo("<option selected value=$row1a[month]>$row1a[month]</option>");
else
echo("<option value=$row1a[month]>$row1a[month]</option>");
}
?>
</select>
<select name="toyear1[]" id="toyear1" onchange="showUser(this.value)">
<option <?php if(isset($_POST['year'])) { echo $_POST['year']; } ?>>Select Year</option>
<?php
$sql1a = "SELECT * FROM year ORDER BY id desc";
$smt1a = $dbs->prepare($sql1a);
$smt1a -> execute();
while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['year']==$_GET['id7'])
echo("<option selected value=$row1a[year]>$row1a[year]</option>");
else
echo("<option value=$row1a[year]>$row1a[year]</option>");
}
?>
</select>


</td>
<td valign="top">Yes<input type="checkbox" id="graduate" name="graduate[]" onclick="cleardata2()" value="yes"> No
<input type="checkbox" id="graduate1" name="graduate[]" onclick="cleardata3()" value="no"> </td>
<td valign="top"><input type="text" id="averages" name="averages[]"  maxlength="100" size="3"></td>
<td valign="top"><a href="#" id="Add" name="Add" onclick="addFields1()">+</a>
<a href="#" type="hidden" id="Remove" name="Remove" onclick="rFields1(this)"></a>
</td>


</table>

</div>
</form>
</body>

Here's the JavaScript code:

<script type="text/javascript">
function cleardata2()
{
if (document.getElementById('graduate').checked == true)
  {

  document.getElementById('graduate1').setAttribute('disabled','disabled');
  }
  else {
//  document.getElementById("cleaning").onclick = null;

  document.getElementById('graduate1').removeAttribute('disabled');
  }
}

function cleardata3()
{
if (document.getElementById('graduate1').checked == true)
  {

  document.getElementById('graduate').setAttribute('disabled','disabled');
  }
  else {
//  document.getElementById("cleaning").onclick = null;

  document.getElementById('graduate').removeAttribute('disabled');
  }
}


</script>

 <script type="text/javascript">
        function rFields1(elm){
        var tr = elm.parentNode.parentNode;
        tr.remove();

        }
        function addFields1(){

            var container = document.getElementById("container1");
            var table = document.createElement("table");

            table.border=1; 
            table.cellspacing=0;     
            table.id ="education";
            table.name = "education[]";     
            container.appendChild(document.createTextNode(""));
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.valign = "top";

            var name = document.createElement("input");
            name.type = "text";
            name.id = "name";
            name.name = "name[]";
            name.size = 20;
            name.maxlenth = 30;
            container.appendChild(name);
            td.appendChild(name);
            tr.appendChild(td);

            var td1 = document.createElement("td");
            td1.valign = "top";

var slct = document.createElement("select"); //? how do I fix this up
  slct.id = "institution";
  slct.name = "institution[]";
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM institution ORDER BY institution asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[institution]';\r\n");
        echo("opt.text ='$row1a[institution]';\r\n");
        echo("slct.appendChild(opt);");
    }
?>

slct.value='<?php echo $_GET['id2']; ?>';                       //container.add(option);
container.appendChild(slct);//? how do I fix this up
        //      select1.appendChild(option);
td1.appendChild(slct);
tr.appendChild(td1);

var td2 = document.createElement("td");
td2.valign = "top";
var input = document.createElement("input");
input.type = "text";
input.id = "instaddress";
input.name = "instaddress[]";
input.value = '<?php echo $_GET['id3']; ?>';
input.size = 40;
input.maxlenth = 50;
container.appendChild(input);

container.appendChild(input);//? how do I fix this up
        //      select1.appendChild(option);
td2.appendChild(input);
    tr.appendChild(td2);



var td3 = document.createElement("td");
td3.valign = "top";

var slct1 = document.createElement("select"); //? how do I fix this up
 slct1.id = "monthto";
slct1.name = "monthto[]"; 
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM month ORDER BY id asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[month]';\r\n");
        echo("opt.text ='$row1a[month]';\r\n");
        echo("slct1.appendChild(opt);");
    }
?>

slct1.value='<?php echo $_GET['id4']; ?>';                       //container.add(option);
container.appendChild(slct1);//? how do I fix this up
td3.appendChild(slct1);
tr.appendChild(td3);

var td4 = document.createElement("td");
td4.valign = "top";

var slct2 = document.createElement("select"); //? how do I fix this up
slct2.id = "toyear";
slct2.name = "toyear[]"; 
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM year ORDER BY id desc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[year]';\r\n");
        echo("opt.text ='$row1a[year]';\r\n");
        echo("slct2.appendChild(opt);");
    }
?>

slct2.value='<?php echo $_GET['id5']; ?>';                       //container.add(option);
container.appendChild(slct2);//? how do I fix this up
td4.appendChild(slct2);
tr.appendChild(td4);

var td5 = document.createElement("td");
td5.valign = "top";

var slct3 = document.createElement("select"); //? how do I fix this up
 slct3.id = "monthto1";
slct3.name = "monthto1[]"; 
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM month ORDER BY id asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[month]';\r\n");
        echo("opt.text ='$row1a[month]';\r\n");
        echo("slct3.appendChild(opt);");
    }
?>

slct3.value='<?php echo $_GET['id6']; ?>';                       //container.add(option);
container.appendChild(slct3);//? how do I fix this up
td5.appendChild(slct3);
tr.appendChild(td5);

var td6 = document.createElement("td");
td6.valign = "top";

var slct4 = document.createElement("select"); //? how do I fix this up
slct4.id = "toyear1";
slct4.name = "toyear1[]"; 

//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM year ORDER BY id desc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[year]';\r\n");
        echo("opt.text ='$row1a[year]';\r\n");
        echo("slct4.appendChild(opt);");
    }
?>

slct4.value='<?php echo $_GET['id7']; ?>';                       //container.add(option);
container.appendChild(slct4);//? how do I fix this up
td6.appendChild(slct4);
tr.appendChild(td6);

var td7 = document.createElement("td");
td7.valign = "top";
                        td7.appendChild(document.createTextNode(" Yes"));        // checkbox buttons whether someone graduated or not          



                        var grad = document.createElement("input");
                        grad.type = "checkbox";
                        grad.id = "graduate";
                        grad.name = "graduate[]";
                        grad.value = "yes"; //yes value for checkbox button





                        var grad1 = document.createElement("input");
                        grad1.type = "checkbox";
                        grad1.id = "graduate";
                        grad.name = "graduate[]";
                        grad.value = "no"; //no value for checkbox button

                        container.appendChild(grad);
                        td7.appendChild(grad);
                        td7.appendChild(document.createTextNode(" No "));


                        container.appendChild(grad1);
                        td7.appendChild(grad1);
                        tr.appendChild(td7);

                        var td8 = document.createElement("td");
                        td8.valign = "top";

                        var averages = document.createElement("input");
                        averages.type = "text";
                        averages.id = "averages";
                        averages.name = "averages[]";
                        averages.size = 3;
                        averages.maxlenth = 100;
                        container.appendChild(averages);

                        td8.appendChild(averages);

                        tr.appendChild(td8);


                //        var addInstitution = document.getElementById("Add");
                 //       var removeInstitution = document.getElementById("Remove");
                 //  container.removeChild(addInstitution);
            var td12 = document.createElement("td");
            td12.valign = "top";

            var add1 = document.getElementById("Add");

            //create and insert input/text

            //create and insert button
            add1 = document.createElement("a");
            add1.id="Add"
            add1.name="Add"
            add1.href="#";
            add1.text="+";
            add1.onclick=function(){addFields1();};
            td12.appendChild(add1);

            tr.appendChild(td12);    
            var td13 = document.createElement("td");
            td13.valign = "top";        
            var remove1 = document.getElementById("Remove");        
            remove1 = document.createElement("a");
            remove1.id="Remove";
            remove1.name="Remove";
            remove1.href="#";
            remove1.text="-";
            remove1.onclick=function(){
            rFields1(this);};
            td13.appendChild(remove1);

            tr.appendChild(td13);  

            container.appendChild(document.createElement("br"));


            table.appendChild(tr);  
            container.appendChild(table);   


        }

    </script>

The other problem is also similar. It's for the same form as well but rather a different task.

As you can see, the original form (not the replicated one which was dynamically created) has a dropdown list - but the drop down list starts with the header "Institution" - on the other hand - the dynamically created/replicated form doesn't allow me to have a proper header for the drop down list which I retrieved from the server.

The code that I used - to retrieve and display the data as can be seen in the dynamically replicated form is the following (based in PHP but within a snippet of JavaScript code):

   var slct = document.createElement("select"); //? how do I fix this up
  slct.id = "institution";
  slct.name = "institution[]";
//some php code that is generating js code
<?php
    $sql1a = "SELECT * FROM institution ORDER BY institution asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[institution]';\r\n");
        echo("opt.text ='$row1a[institution]';\r\n");
        echo("slct.appendChild(opt);");
    }
?>

slct.value='<?php echo $_GET['id2']; ?>';                       //container.add(option);
container.appendChild(slct);//? how do I fix this up
        //      select1.appendChild(option);
td1.appendChild(slct);
tr.appendChild(td1);

I tried too many ways to fix this issue up, but I couldn't get the top header in the drop down list to say "Institution" or any other label/heading instead of directly printing the first type of institution retrieved from the database (in this case "college") before the user clicks on the arrow pointed down to retrieve his/her options in the form to submit data.

What should I have to write in PHP to solve the main header issue in the drop down menu?

Upvotes: 0

Views: 121

Answers (2)

Nishanth Matha
Nishanth Matha

Reputation: 6081

ok finally I guess I found your mistake, You have a typo while creating a dynamic graduate input type.

             var grad = document.createElement("input");
                        grad.type = "checkbox";
                        grad.id = "graduate";
                        grad.name = "graduate[]";
                        grad.value = "yes"; //yes value for checkbox button

            var grad1 = document.createElement("input");
                grad1.type = "checkbox";
                grad1.id = "graduate1"; //in your code you have graduate
                grad1.name = "graduate[]";
                grad1.value = "no"; //no value for checkbox button

if it still doesn't work try adding onclick property to your dynamic JS:

     var grad = document.createElement("input");
                grad.type = "checkbox";
                grad.id = "graduate";
                grad.name = "graduate[]";
                grad.value = "yes"; //yes value for checkbox button
                grad.onclick = cleardata3;

     var grad1 = document.createElement("input");
         grad1.type = "checkbox";
         grad1.id = "graduate1"; //in your code you have graduate
         grad1.name = "graduate[]";
         grad1.value = "no"; //no value for checkbox button
         grad1.onclick = cleardata3;

For the second part of the question try:

<?php
    $sql1a = "SELECT * FROM institution ORDER BY institution asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();

    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {

        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[institution]';\r\n");
        echo("opt.text ='$row1a[institution]';\r\n");
        if($row1a['institution']==$_GET['id3']){
            echo("opt.setAttribute(\"selected\", true);\r\n");
        }
        echo("slct.appendChild(opt);");
    }
?>

Upvotes: 0

Barmar
Barmar

Reputation: 781741

You're giving all your checkboxes the same ID. That won't work, because IDs have to be unique. getElementById('graduate') will just return the first checkbox, not the checkbox on the same row as the one you're clicking on. You need to rewrite cleardata2 and cleardata3 so they take the current checkbox as a parameter, and find the corresponding checkbox of the other type:

function cleardata2(self) {
    var other_cb = self.nextSibling.nextSibling; // Skip over "yes" text node to next checkbox
    disable_other(self, other_cb);
}
function cleardata3(self) {
    var other_cb = self.previousSibling.previousSibling; // Skip over "no" text node to previous checkbox
    disable_other(self, other_cb);
}
function disable_other(self, other) {
    if (self.checked) {
        other.setAttribute("disabled", "disabled");
    } else {
        other.removeAttribute("disabled");
    }
}

Change your HTML to:

<td valign="top">Yes<input type="checkbox" id="graduate" name="graduate[]" onclick="cleardata2(this)" value="yes"> No

And change the code that creates the new checkboxes to:

var grad = document.createElement("input");
grad.type = "checkbox";
grad.name = "graduate[]";
grad.value = "yes"; //yes value for checkbox button
grad.addEventListener("click", function() { cleardata2(this); });

var grad1 = document.createElement("input");
grad1.type = "checkbox";
grad1.name = "graduate[]";
grad1.value = "no"; //no value for checkbox button
grad1.addEventListener("click", function() { cleardata3(this); });

Upvotes: 1

Related Questions