2 replies to this topic

[dotSilver]

Hey, I'm currently working on a project, and I would like users to be able to preview stuff they've put into a textarea, I've got all the ajax connections done and the script works fine how it should, but the text they put into the textarea won't show up in the preview.

Here's my code.

Form

<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>

As you can see I've got updatePreview(); on a button onclick, and a previewWindow div.

Ajax

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;
	}
}

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

<? 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.

[rc69]

The tricky thing about dealing with forms/ajax is making sure that the form doesn't submit. If it does, then the browser window will refresh and make it appear as though nothing is working.

Try changing the update button to:

<input type="button" OnClick="updatePreview(); return false;" value="Preview" class="addapostbutton" />

If that doesn't work, there is a couple of other things we can try.

[dotSilver]

It still doesn't work. The page doesn't refresh or anything so the form doesn't get submitted.

Edit:

I've got it working now, but thanks for help.

Edited by dotSilver, 09 August 2009 - 12:44 PM.