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,