Hi,
I have a form which adds a new textarea when the textarea has been filled. This was working fine until I added the form tags. Now when I complete filling in the textarea and hit enter, the form submits instead of adding a new textarea. I only want the form to submit when the submit button is pressed.
Any help with this would be very much appreciated,
Thanks,
Shane
Here is the HTML and the JavaScript.
<!DOCTYPE html>
<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/func.inc.php';
include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/helpers.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.cuislegibney.com/cuislegibney/images/favicon.ico"/>
<header>
<h1>Results archive</h1>
</header>
<div class="input">
<form action="?<?php htmlout($action);?>" method="post">
<input type="hidden" name="action" value="hauptFormular" />
<input type="submit" value="<?php htmlout($button); ?>" />
<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):
echo "<option value='$key'>$option</option>";
endforeach; ?>
</select></td>
<td>Year:</td><td name="yearid" id="yearid" 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="first" value=""></td>
<td class="left">Last name:</td><td><input id="add" type="textarea" name="last" value=""></td>
<td class="left">Result:</td><td id="result" class="left"></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</form>
</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('yearid').innerHTML = "";
var strOption = "";
yearArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
selectYearOption = "<select name='annual' style='background-color: #FFDDF4'>" + strOption + "</select>";
console.log(selectYearOption);
document.getElementById('yearid').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).on("keypress", 'form', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});*/
document.getElementById('exam').onchange = callFunctions;
document.getElementsByTagName("input")[1].onchange = classAdder;
</script>
</body>
</html>
I suspect that this may need to prevent default behaviour or have something to do with bubbling or propagation. If so i will need to read up on these.
