PDA

View Full Version : Attempting to reload dynamic ajax page with form submit



schwim
04-11-2007, 05:31 PM
1) Script Title: Dynamic Ajax Content

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

3) Describe problem:

Hi there everyone,

I'm attempting to do the following:

I have a page with a form on it. altering the form changes the way another page looks. I'd like to load the page to be changed into a dynamic frame, that when I click a button to test the settings(not submit), the page to be changed refreshes to show the submitter the changes made.

Is the script I'm looking at able to do something like this?

thanks,
json

kerth
05-09-2009, 04:54 AM
There are two ways wo do it with that script!

1- Use hidden iframe.
Basicly, your form will contain a hidden input for the page you want to show after form submitted. Action target will be the hidden iframe. When form submitted, it will take action in the hidden iframe. And iframe will call another js function onload which calls the ajaxpage function (you cannot use ajaxpage function for a div in the parent frame from an iframe) ...

Form File :



<script type="text/javascript">
<!--
function ajaxcaller(adress,division){
ajaxpage(adress,division);
}
// -->
</script>

<form action="takeaction.php" method="post" target="hiddenframe">
<input type="hidden" name="thenextpage" value="next.php" />
<input type="hidden" name="thediv" value="mydivid" />
</form>

<iframe style="display:none;visibility:hidden;" name="hiddenframe" id="hiddenframe"></iframe>




Action File Will Contain



<body onload="javascript:window.parent.ajaxcaller('<?php echo $_REQUEST['thenextpage']; ?>','<?php echo $_REQUEST['mydivid'];?> ');">



Tried it, works...


2- If you have only a few form inputs this may be a little bit handy.



<form onsubmit="javascript: var adres='targetPage.php?input='+document.getElementById('myOnlyInput').value; ajaxpage(adres,'TheTargetDivId');">
<input type=text id="myOnlyInput"/>
<input type="submit" value="submit"/>
</form>