I have a external page loaded using scripts inside a form of a current page, and tried to call the inputs on the external page to be sent from a form inside the current page. It seems like the data on the external page cannot be sent from the current form. Can somebody please tell me why?
Here are example codes to explain the situation.
PAGE A
<form method="post" action="testing.php">
<a href="#" id="test1" onclick="loadPageIntoDiv('diploma-foundation.php');" class="btn btn-default col-lg-3"><input type="hidden" name="program" value="diploma"/>Diploma/Foundation</a>
<a href="#" id="test2" onclick="loadPageIntoDiv('degree.php');" class="btn btn-default col-lg-3"><input type="hidden" name="program" value="bachelor"/>Bachelor Degree</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function loadPageIntoDiv(url) {
var $div = $("div#imgbox");
$div.load(url, function() {
$div.find("a").on("click", function(evt) {
var $link = $(this);
loadPageIntoDiv($link.id("test"));
evt.preventDefault();
return false;
});
});
}
</script>
<div id="imgbox">
</div>
<input type="submit" name="submit" />
</form>
PAGE B
<div>Input1</div>
<div><input type="text" name="uubsss"</div>
<div>Input2</div>
<div><input type="text" name="uubbsssa"</div>
<div>Input3</div>
<div><input type="text" name="uubbasssab"</div>
the function to load div is in loadPageIntoDiv(), and will call diploma-foundation.php into the first A tag with an id of "test1"
please help me with this. Thank you in advance dear stackoverflow-ers.