View Full Version : jquery on external loaded form

10-21-2008, 08:15 PM
Hi all,

I have tried using both DD's Ajax tabs (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm) and Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) scripts to load external content into a DIV on my page. In that DIV, I have a form I'm trying to POST using jquery / ajax. The jquery works on the external page when I access it directly, but when loaded via script into DIV it doesn't. Outcome was identical using either script from DD.

I have tried including the FORM jquery/ajax code in the calling page and/or the external page or both. Also tried with the external page just being the data (DIV and form) and with it being a complete page (HTML and BODY tags). Access page directly and it will ALERT with the form data being submitted (current setup for testing). Submit from Main page and it will submit the page via get (...main.php?field1=TEXT&field2=TEXT).

### Main page (main.php)####

<script type="text/javascript" src="ajax/ajaxtabs.js">

* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

<script language="javascript" type="text/javascript" src="script/jquery-1.2.6.min.js"></script>

<script type="text/javascript>

$(document).ready(function() {

$(function() {
$("#submit_button").click(function() {
var dataString = $("#myform").serialize();
alert (dataString);return false; // just display form data as Alert for testing.

return false;

Page Text here

<div id="navigation">
<ul id="resulttabs">
<li><a href="test1.php" class="selected" rel="result_box">Link 1</a></li>
<li><a href="test2.php" rel="result_box">Link 2</a></li>

<div id="result_box"></div>

<script type="text/javascript">
var countries=new ddajaxtabs("resulttabs", "result_box")
countries.setselectedClassTarget("link") //"link" or "linkparent"

### Link 1 Page (test1.php) ###

<div id="data">

<form id="myform" name="myform">

<input type="text" name="field1" id="field1" size="20">
<input type="text" name="field2" id="field2" size="20">
<input type="image" id="submit_button" name="submit_button" src="images/spacer.gif" />




Any help is appreciated.


10-21-2008, 08:58 PM
thanks, I'll give those a try.

My actual AJAX Post code I did write. The problem I had was that it wouldn't execute when the form was on an externally loaded page. I'll look over what you sent and see if any of those help.


Mike H.
10-21-2008, 09:19 PM
...the form was on an externally loaded page

Sorry, but I have no idea what that means. A form is a form is a form is a form.

10-21-2008, 09:47 PM
I have a form on Page1. The form works, submits, loads, etc correctly without issue using ajax / jquery. Then I have a second page (Page2) that loads Page1 into a DIV. Now on Page2, when I submit the form contained in Page1 - it does not work.

Mike H.
10-21-2008, 09:50 PM
You can't nest <html> tags, and you can't nest <form> tags.

If you are attempting to insert an entire HTML document inside a DIV on another page, then that's your problem.

10-21-2008, 10:01 PM
Ah, well that may be my problem then. I just thought of another way to handle my issue though, so I'll do that instead. I was using tabs to display different data, and a form to submit additional input per section. I'll still use tabs to display the data, but below that div, I'll hide/show the corresponding form that's needed.

Thanks for your help!

11-06-2009, 04:30 AM
I had the same problem and had to bind the form. Took a while but i got it. let me know if you need the code.