Onchange form to create new onchange form

Hi,
I have an input form of type ‘textarea’. ‘onchange’ a new row is created which contains a new input form also of type ‘textarea’. I am trying to get it to behave the same way as the first input, so that when it experiences an ‘.onchange’ it will also create a new row and this will repeat itself.
Here is my code so far,

<!DOCTYPE html>
<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/func.inc.php'; 
    include $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/arraybuilder.inc.php'; ?>
<html lang="en">
  <head>
    <link type="text/css" rel="stylesheet" href="/cuislegibney/css/stylesheet.css"/>
    <meta charset="utf-8">
    <title>Results Input</title>
  </head>
  <body>
  <link rel="icon" type="image/x-icon" href="http://www.artgibney.com/artgibney/images/favicon.ico"/>
  <header>
      <h1>Results archive</h1>
  </header>
            <div class="input">
                    <table>
                        <tr>
                            <td>
                                <fieldset>
                                     <legend>By class</legend>
                                     <table class="inner" id="tableByclass">
                                         <tr class="topRow">
                                             <td>Exam type:</td>
                                             <td class="left">                         
                                                <select name="exam" id="exam" style="background-color: #FFDDF4">
                                                    <option></option>
                                                     <?php foreach($exams as $key=>$option):
                                                           $selected = ($exam == $key) ? 'selected' : '';
                                                           echo "<option value='$key' $selected>$option</option>";
                                                      endforeach; ?>
                                                </select>
                                             </td>
                                             <td>Year:</td><td id="year" class="left"></td>
                                         
                                             <td>Subject:</td><td id="subject" class="left"><td>
                                             
                                         </tr>
                                         <tr>
                                             <td class="left">First name:</td><td><input type="textarea" name="action" value=""></td>
                                             <td class="left">Last name:</td><td><input id="add" type="textarea" name="action" value=""></td>
                                             <td class="left">Result:</td><td id="result" class="left"></td>
                                         </tr>
                                     </table>
                                 </fieldset>
                             </td>
                        </tr>
                     </table>
              </div>
              <script>
                    function examHandler() {
                        var subjectArray = [];
                        var a = true;
                        document.getElementById('subject').innerHTML = "";
                        if(exam.value=="AS"){
                            subjectArray = <?php echo json_encode($ASsubjects, JSON_PRETTY_PRINT); ?>;        
                        }else if(exam.value=="A2"){
                            subjectArray = <?php echo json_encode($A2subjects, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="AP"){
                            subjectArray = <?php echo json_encode($APsubjects, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="KET"||exam.value=="PET"||exam.value=="FCE"||exam.value=="IELTS"){
                            document.getElementById('subject').innerHTML = "English";
                            a = false;
                        }
                            if(a){
                                var strOption = "";
                                subjectArray.forEach(function(item){
                                    strOption += "<option value='test'>" + item + "</option>";
                                    });
                                selectOption = "<select style='background-color: #FFDDF4'>" + strOption + "</select>";
                                document.getElementById('subject').innerHTML = selectOption;
                            }
                        };
                        
                        function resultHandler() {
                        var resultArray = [];
                        if(exam.value=="AS"|| exam.value=="A2"){
                            resultArray = <?php echo json_encode($GCEresults, JSON_PRETTY_PRINT); ?>;        
                        }else if(exam.value=="AP"){
                            resultArray = <?php echo json_encode($APresults, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="KET"||exam.value=="PET"){
                            resultArray = <?php echo json_encode($KETPETresults, JSON_PRETTY_PRINT); ?>;/*KET and PET results are same*/
                        }else if(exam.value=="FCE"){
                            resultArray = <?php echo json_encode($FCEresults, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="IELTS"){
                            resultArray = <?php echo json_encode($IELTSresults, JSON_PRETTY_PRINT); ?>;
                        }
                            document.getElementById('result').innerHTML = "";
                            var strOption = "";
                            resultArray.forEach(function(item){    
                                strOption += "<option value='result'>" + item + "</option>";
                                });
                            selectResultOption = "<select style='background-color: #FFDDF4'>" + strOption + "</select>";
                            document.getElementById('result').innerHTML = selectResultOption;
                        };
                        
                        function yearHandler() {
                            var yearArray = [];
                            yearArray = <?php echo json_encode($years, JSON_PRETTY_PRINT); ?>;        
                            document.getElementById('year').innerHTML = "";
                            var strOption = "";
                            yearArray.forEach(function(item){
                                strOption += "<option value='year'>" + item + "</option>";
                                });
                            selectYearOption = "<select style='background-color: #FFDDF4'>" + strOption + "/<select>";
                            document.getElementById('year').innerHTML = selectYearOption;
                        };
                        
                        function classAdder(){
                            var table = document.getElementById("tableByclass");
                            var row = document.createElement("tr");    
                            
                            var cell = document.createElement("td");
                            var empty = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var detail = document.createElement("input");
                            detail.type = "text";
                            detail.name = "firstname";
                            cell.appendChild(detail);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var last = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var detail = document.createElement("input");
                            detail.type = "text";
                            detail.name = "lastname";
                            cell.setAttribute("id", "add");
                            cell.appendChild(detail);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            console.log(selectResultOption);
                            var empty = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            cell.setAttribute("class", "left");
                            cell.innerHTML = selectResultOption;
                            row.appendChild(cell);
                            
                            table.appendChild(row); 
                        }
                        
                        function callFunctions(){
                            examHandler();
                            resultHandler();
                            yearHandler();
                        };
                        
                    document.getElementById('exam').onchange = callFunctions;
                    document.getElementById('add').onchange = classAdder;
                </script>
          </body>
</html>

Thanks,
Shane

PS Someone did ask a similar question before, but there is no reply,

I think i know what might be the problem. i am using the same id=“add”, but id’s should be unique. So I need to use a different id and figure out how to call it. I wonder can I call an element by class name. maybe that’s what getElementsByname is or whatever it is.
I will play with this and respond here.
Thanks,

document.getElementsByClassName("classHere");

You need to be careful though because that actually returns a nodelist. So e.g. selecting the first element with that class would be…

document.getElementsByClassName("classHere")[0];
1 Like

Works using

document.getElementsByTagName("input")[i].onchange = classAdder;
<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/func.inc.php'; include $_ SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/arraybuilder.inc.php'; ?>
<html lang="en">
  <head>
    <link type="text/css" rel="stylesheet" href="/cuislegibney/css/stylesheet.css"/>
    <meta charset="utf-8">
    <title>Results Input</title>
  </head>
  <body>
  <link rel="icon" type="image/x-icon" href="http://www.artgibney.com/artgibney/images/favicon.ico"/>
  <header>
      <h1>Results archive</h1>
  </header>
            <div class="input">
                    <table>
                        <tr>
                            <td>
                                <fieldset>
                                     <legend>By class</legend>
                                     <table class="inner" id="tableByclass">
                                         <tr class="topRow">
                                             <td>Exam type:</td>
                                             <td class="left">                         
                                                <select name="exam" id="exam" style="background-color: #FFDDF4">
                                                    <option></option>
                                                     <?php foreach($exams as $key=>$option):
                                                           $selected = ($exam == $key) ? 'selected' : '';
                                                           echo "<option value='$key' $selected>$option</option>";
                                                      endforeach; ?>
                                                </select>
                                             </td>
                                             <td>Year:</td><td id="year" class="left"></td>
                                         
                                             <td>Subject:</td><td id="subject" class="left"><td>
                                             
                                         </tr>
                                         <tr>
                                             <td class="left">First name:</td><td><input type="textarea" name="action" value=""></td>
                                             <td class="left">Last name:</td><td><input id="add" type="textarea" name="action" value=""></td>
                                             <td class="left">Result:</td><td id="result" class="left"></td>
                                         </tr>
                                     </table>
                                 </fieldset>
                             </td>
                        </tr>
                     </table>
              </div>
              <script>
                    function examHandler() {
                        var subjectArray = [];
                        var a = true;
                        document.getElementById('subject').innerHTML = "";
                        if(exam.value=="AS"){
                            subjectArray = <?php echo json_encode($ASsubjects, JSON_PRETTY_PRINT); ?>;        
                        }else if(exam.value=="A2"){
                            subjectArray = <?php echo json_encode($A2subjects, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="AP"){
                            subjectArray = <?php echo json_encode($APsubjects, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="KET"||exam.value=="PET"||exam.value=="FCE"||exam.value=="IELTS"){
                            document.getElementById('subject').innerHTML = "English";
                            a = false;
                        }
                            if(a){
                                var strOption = "";
                                subjectArray.forEach(function(item){
                                    strOption += "<option value='test'>" + item + "</option>";
                                    });
                                selectOption = "<select style='background-color: #FFDDF4'>" + strOption + "</select>";
                                document.getElementById('subject').innerHTML = selectOption;
                            }
                        };
                        
                        function resultHandler() {
                        var resultArray = [];
                        if(exam.value=="AS"|| exam.value=="A2"){
                            resultArray = <?php echo json_encode($GCEresults, JSON_PRETTY_PRINT); ?>;        
                        }else if(exam.value=="AP"){
                            resultArray = <?php echo json_encode($APresults, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="KET"||exam.value=="PET"){
                            resultArray = <?php echo json_encode($KETPETresults, JSON_PRETTY_PRINT); ?>;/*KET and PET results are same*/
                        }else if(exam.value=="FCE"){
                            resultArray = <?php echo json_encode($FCEresults, JSON_PRETTY_PRINT); ?>;
                        }else if(exam.value=="IELTS"){
                            resultArray = <?php echo json_encode($IELTSresults, JSON_PRETTY_PRINT); ?>;
                        }
                            document.getElementById('result').innerHTML = "";
                            var strOption = "";
                            resultArray.forEach(function(item){    
                                strOption += "<option value='result'>" + item + "</option>";
                                });
                            selectResultOption = "<select style='background-color: #FFDDF4'>" + strOption + "</select>";
                            document.getElementById('result').innerHTML = selectResultOption;
                        };
                        
                        function yearHandler() {
                            var yearArray = [];
                            yearArray = <?php echo json_encode($years, JSON_PRETTY_PRINT); ?>;        
                            document.getElementById('year').innerHTML = "";
                            var strOption = "";
                            yearArray.forEach(function(item){
                                strOption += "<option value='year'>" + item + "</option>";
                                });
                            selectYearOption = "<select style='background-color: #FFDDF4'>" + strOption + "/<select>";
                            document.getElementById('year').innerHTML = selectYearOption;
                        };
                        var i = 1;
                        function classAdder(){
                            var table = document.getElementById("tableByclass");
                            var row = document.createElement("tr");    
                            
                            var cell = document.createElement("td");
                            var empty = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var detail = document.createElement("input");
                            detail.type = "text";
                            detail.name = "firstname";
                            cell.appendChild(detail);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var last = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            var detail = document.createElement("input");
                            /*var detail = document.getElementsByTagName("input")[1];*/
                            detail.type = "text";
                            detail.name = "lastname";
                            cell.setAttribute("id", "idNumber");
                            cell.appendChild(detail);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            console.log(selectResultOption);
                            var empty = document.createTextNode("");
                            cell.appendChild(empty);
                            row.appendChild(cell);
                            
                            cell = document.createElement("td");
                            cell.setAttribute("class", "left");
                            cell.innerHTML = selectResultOption;
                            row.appendChild(cell);
                            
                            table.appendChild(row); 
                            i+=2;
                            document.getElementsByTagName("input")[i].onchange = classAdder;
                        }

                        function callFunctions(){
                            examHandler();
                            resultHandler();
                            yearHandler();
                        };
                        
                    document.getElementById('exam').onchange = callFunctions;
                    document.getElementsByTagName("input")[1].onchange = classAdder;
                </script>
          </body>
</html>

Thanks,
Shane

A better solution would be to attach a single change event listener to the form element and have that perform the change processing for all the fields in the form. This is called event delegation.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.