Here's my code.
Form
CODE
<form method="post" class="addapostform" name="createpost" action="add-topic.html">
<div class="form-subject">
Subject
</div>
<div class="form-subject-input">
<input type="text" name="title" id="thesubject" />
</div>
<div class="clear"> </div>
<textarea id="thepost" name="thepost">hello</textarea>
<input type="button" OnClick="updatePreview();" value="Preview" class="addapostbutton" />
<input type="submit" value="Add Topic" name="posttopic" class="addapostbutton" />
</form>
<div id="previewWindow" style="display: none;" ondblclick="Effect.BlindUp(\'previewWindow\', {duration: 2});">
</div>
<div class="form-subject">
Subject
</div>
<div class="form-subject-input">
<input type="text" name="title" id="thesubject" />
</div>
<div class="clear"> </div>
<textarea id="thepost" name="thepost">hello</textarea>
<input type="button" OnClick="updatePreview();" value="Preview" class="addapostbutton" />
<input type="submit" value="Add Topic" name="posttopic" class="addapostbutton" />
</form>
<div id="previewWindow" style="display: none;" ondblclick="Effect.BlindUp(\'previewWindow\', {duration: 2});">
</div>
As you can see I've got updatePreview(); on a button onclick, and a previewWindow div.
Ajax
CODE
function makeObject(){
var x;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
x = new ActiveXObject("Microsoft.XMLHTTP");
}else{
x = new XMLHttpRequest();
}
return x;
}
var request = makeObject();
function updatePreview(){
var str = document.createpost.thepost.value;
Effect.Appear('previewWindow');
Effect.Appear('previewInfo');
Effect.Fade('previewInfo', { delay: 5 });
request.onreadystatechange = parseInfo;
request.open('POST', 'http://www.domain.org/board/test.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send('str=' + str);
}
function parseInfo(){
if(request.readyState == 1){
document.getElementById('previewWindow').innerHTML = '<img src="http://www.domain.org/board/images/loader.gif" alt="loading..." />';
}
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('previewWindow').innerHTML = answer;
}
}
var x;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
x = new ActiveXObject("Microsoft.XMLHTTP");
}else{
x = new XMLHttpRequest();
}
return x;
}
var request = makeObject();
function updatePreview(){
var str = document.createpost.thepost.value;
Effect.Appear('previewWindow');
Effect.Appear('previewInfo');
Effect.Fade('previewInfo', { delay: 5 });
request.onreadystatechange = parseInfo;
request.open('POST', 'http://www.domain.org/board/test.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send('str=' + str);
}
function parseInfo(){
if(request.readyState == 1){
document.getElementById('previewWindow').innerHTML = '<img src="http://www.domain.org/board/images/loader.gif" alt="loading..." />';
}
if(request.readyState == 4){
var answer = request.responseText;
document.getElementById('previewWindow').innerHTML = answer;
}
}
This works fine, except that the POST str won't go through, and I've got the variable str as document.createpost.thepost.value;
test.php
CODE
<? print BBCode2HTML( $_POST['str'] ); ?>
I've also just tested this without the function, so just as print $_POST['str'] - while also doesn't work, so the problem has to be in the ajax file, something to do with the variable, but I don't see a problem.
Any help would be greatly appreciated.