Sycren
03-11-2009, 02:35 PM
Hi, im trying to get this code to duplicate the fields when having clicked the link (add another Question), but the link is not showing.. :s and its not working..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Quiz Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="forms.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#da').append('<p><a href="add" id="add_da">add another Question</a></p>');
$('#add_da').click(function() {
this.i++
$('#da1').parent().append("<div><hr />" + $('#da1').html().replace(/value="[^"]+"/g, 'value=""').replace(/_1/g, '_' + this.i) + '<a href="remove" class="remove_da">remove this question</a></div>');
$('.remove_da').click(function() { $(this).parent().remove(); return false; });
return false;
})[0].i = 1;
});
</script>
</head>
<body id="thedocument">
<h1>Quiz Generator</h1>
<div class="opener section">
<p>Generates Quiz code for GeoHop</p>
</div>
<div class="section">
<h2>Boo</h2>
<fieldset title="Introduction">
<legend>Generator</legend>
<p>
<form action="" method="get">
<div class="intro" id="da">
<p>Please enter the Question</p>
</div>
<div id="da1">
<p>
<label for="question_1">Question</label>
<input name="question_1" id="question_1" type="text" tabindex="1" />
</p>
<p>
<label for="answer1_1">Answer 1</label>
<input name="answer1_1" id="answer1_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer2_1">Answer 2</label>
<input name="answer2_1" id="answer2_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer3_1">Answer 3</label>
<input name="answer3_1" id="answer3_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer3_1">Answer 4</label>
<input name="answer3_1" id="answer3_1" type="text" tabindex="2" />
</p>
</hr>
<p>
Answer 1: <input type="radio" name="correctAnswer" />
Answer 2: <input type="radio" name="correctAnswer" />
Answer 3: <input type="radio" name="correctAnswer" />
Answer 4: <input type="radio" name="correctAnswer" />
</p>
</div>
</fieldset>
</div>
</form>
</p>
<p>
</p>
</fieldset>
</div>
<div class="section">
<fieldset>
<legend></legend>
</fieldset>
</div>
</body>
</html>
I realise that there is no submit for the form or any action, this is intentional at the moment..
Thanx for any help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Quiz Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="forms.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#da').append('<p><a href="add" id="add_da">add another Question</a></p>');
$('#add_da').click(function() {
this.i++
$('#da1').parent().append("<div><hr />" + $('#da1').html().replace(/value="[^"]+"/g, 'value=""').replace(/_1/g, '_' + this.i) + '<a href="remove" class="remove_da">remove this question</a></div>');
$('.remove_da').click(function() { $(this).parent().remove(); return false; });
return false;
})[0].i = 1;
});
</script>
</head>
<body id="thedocument">
<h1>Quiz Generator</h1>
<div class="opener section">
<p>Generates Quiz code for GeoHop</p>
</div>
<div class="section">
<h2>Boo</h2>
<fieldset title="Introduction">
<legend>Generator</legend>
<p>
<form action="" method="get">
<div class="intro" id="da">
<p>Please enter the Question</p>
</div>
<div id="da1">
<p>
<label for="question_1">Question</label>
<input name="question_1" id="question_1" type="text" tabindex="1" />
</p>
<p>
<label for="answer1_1">Answer 1</label>
<input name="answer1_1" id="answer1_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer2_1">Answer 2</label>
<input name="answer2_1" id="answer2_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer3_1">Answer 3</label>
<input name="answer3_1" id="answer3_1" type="text" tabindex="2" />
</p>
<p>
<label for="answer3_1">Answer 4</label>
<input name="answer3_1" id="answer3_1" type="text" tabindex="2" />
</p>
</hr>
<p>
Answer 1: <input type="radio" name="correctAnswer" />
Answer 2: <input type="radio" name="correctAnswer" />
Answer 3: <input type="radio" name="correctAnswer" />
Answer 4: <input type="radio" name="correctAnswer" />
</p>
</div>
</fieldset>
</div>
</form>
</p>
<p>
</p>
</fieldset>
</div>
<div class="section">
<fieldset>
<legend></legend>
</fieldset>
</div>
</body>
</html>
I realise that there is no submit for the form or any action, this is intentional at the moment..
Thanx for any help