PDA

View Full Version : ajax tabs content form submit



inferno_23ca
10-02-2006, 12:59 AM
1) Script Title:
ajaxtabscontent

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:
ok, i have this calling up a page with a simple form on it. how can i make it so when i hit the submit button that it loads in the same tab?

i have tried all sort of stuff but cant think of what would work. anyone know?

<form name="messageForm" method="post" action="_message.php">
Subject: <input type="text" name="Subject" maxlength="50" size="40" value=""></td>
Text: <textarea name="Text" cols="65" rows="4"></textarea>
<input type="submit" name="Submit" value="Send Message" class="button">
</form>

so when i hit submit, the post results are shown in the same tab? i have tried this and it dont work

onsubmit"javascript:linkjax('_message.php', 'ajaxcontentarea', 2, 'tabit');"

ddadmin
10-02-2006, 02:41 AM
There is no easy way, as basically you'd have to edit the form submission script itself (message.php) to not redirect to a new page upon submission, but echo the result back to the browser for the Ajax script to pick up. In other words, you'd have to be proficient with PHP.

An easier way is to define an iframe containing message.php as one of the contents for the Ajax Tab Content script to load. That way, when the form gets submitted, the result stays in the iframe, which in turn is contained within the tab content.

inferno_23ca
10-02-2006, 05:17 AM
well its not hard to echo back the result, but how do you keep it within the content tab? thats what i am asking.

anderz
12-19-2006, 06:35 PM
1) Script Title:
ajaxtabscontent

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:
ok, i have this calling up a page with a simple form on it. how can i make it so when i hit the submit button that it loads in the same tab?

i have tried all sort of stuff but cant think of what would work. anyone know?

<form name="messageForm" method="post" action="_message.php">
Subject: <input type="text" name="Subject" maxlength="50" size="40" value=""></td>
Text: <textarea name="Text" cols="65" rows="4"></textarea>
<input type="submit" name="Submit" value="Send Message" class="button">
</form>

so when i hit submit, the post results are shown in the same tab? i have tried this and it dont work

onsubmit"javascript:linkjax('_message.php', 'ajaxcontentarea', 2, 'tabit');"

Here ya go :cool:

POSTFORM.PHP


<script type="text/javascript" src="ajaxform.js" language="javascript"></script>

<div id='form_reactie' style="display:block;">
<form action="javascript:get(document.getElementById('FormReactie'));" name="FormReactie" id="FormReactie">
<input name="type" id="type" type="hidden"/>
<!-- POST THE VARS -->
<input name="post1" id="post1" type="hidden" value="<?= $post1; ?>" />
<input name="post2" id="post2" type="hidden" value="<?= $post2; ?>" />
<input name="post3" id="post3" type="hidden" value="<?= $post3; ?>" />
<!-- SUBMIT -->
<input type="submit" name="button" value="Submit" onclick="javascript:get(this.parentNode);" />
</form>
</div>
<span name="post_reactie" id="post_reactie"></span>

AJAXPOST.JS


<script type="text/javascript" language="javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = ShowContent;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function ShowContent() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);

result = http_request.responseText;
<!-- RESULT DIV -->
document.getElementById('post_reactie').innerHTML = result;

} else {
alert('Error while showing results');
}
}
}

function get(obj) {

var poststr = "post1=" + encodeURI( document.getElementById("post1").value ) +
"&post2=" + encodeURI( document.getElementById("post2").value ) +
"&post3=" + encodeURI( document.getElementById("post3").value );

<!-- REQUEST POST FILE -->
makePOSTRequest('post.php', poststr);
<!-- HIDE FORM DIV -->
document.getElementById('form_reactie').style.display = 'none';
}
</script>

POST.PHP


<? $post1 = $_POST['post1'];
$post2 = $_POST['post2'];
$post3 = $_POST['post3'];
$sql=("INSERT INTO post (post1, post2, post3)
VALUES ('NULL', '$_POST[post1]', '$_POST[post2]', '$_POST[post3]')");
mysql_query($sql) or die(mysql_error());

?>
<div align="center">
Klik <a href="javascript:linkjax('agenda/<?= $post1; ?>.php?ID=<?= $post2; ?>', 'ajaxcontentarea', 1)">hier</a> om te verversen</td>
</div>

halfpint
05-21-2007, 01:56 PM
There is no easy way, as basically you'd have to edit the form submission script itself (message.php) to not redirect to a new page upon submission, but echo the result back to the browser for the Ajax script to pick up. In other words, you'd have to be proficient with PHP.

An easier way is to define an iframe containing message.php as one of the contents for the Ajax Tab Content script to load. That way, when the form gets submitted, the result stays in the iframe, which in turn is contained within the tab content.

I am using ColdFusion scripting and this might be exactly what I am looking for!