PHP form won't submit after loading through Ajax - php

Question

I have a first page of a form, and then I use jQuery to load the second part of the form. However, after I click submit on the form, nothing happens, the page is just stuck here. Any ideas?
jQuery:
$.ajax({
type: "POST",
url: "join_submit.php",
data: data,
success: function () {
$("#regform").load("submitTranscript.php");
}
});
submitTranscript.php:
<div id="regform>
<form id="uploadTranscript" action="uploadPDF.php" enctype="multipart/form-data" method="post">
<div class="separation">
<h3>Upload Transcripts</h3>
<div class = "row">
<div class="large-6 offset-2 columns">
<label for = "studid">Enter your student ID:</lable>
<input type="text" name="studid" id="studid"
</div>
<p>Please label your transcript with your user id (i.e. 123456.pdf).</p>
<div class="row">
<div class="large-6 offset-2 columns">
<input type="file" name="transcript" id="transcript">
</div>
</div>
<div class="buttonRow">
<div class="button" id="submit">Submit</div>
</div>
</div>
</form>
</div>
uploadPDF.php:
<?php
require_once("included.php"); //server info
$allowedExtensions = array("pdf");
$max_filesize = 20000;
$upload_path = "docs/transcripts/";
$filename = $_FILES["transcript"]["name"];
$filesize = $_FILES["transcript"]["size"];
$extension = $_FILES["transcript"]["type"];
if ($_FILES["transcript"]["error"] > 0) {
echo "Error: " . $_FILES["transcript"]["error"] . "<br />";
}
else if((in_array($extension, $allowedExtensions)) && ($filesize < $max_filesize)) {
move_uploaded_file($_FILES["transcript"]["tmp_name"], $upload_path . $filename);
}
else if($filesize > $max_filesize){
$fileSizeFail = true;
}
else {
$fileTypeFail = true;
}
?>

Answer 1

If I look into submitTranscript.php, You have coded following for submitting your form:
<div class="buttonRow">
<div class="button" id="submit">Submit</div>
</div>
But, you haven't inserted any submit button to submit the form. Div element cannot post or submit any form. So, I would suggest to put an input type submit button then try to submit your form via that button.
So the code will be:
<div class="buttonRow">
<div class="button" id="submit">
<input type="submit" name="form_submit" value="Submit" />
</div>
</div>

Answer 2

You are not giving any information about join_submit.php file. You have to check in firebug console present in Firefox browser what is the return value of your join_submit.php file. Whether it is going to success function or not. Then only you can track why it is not loading the second form. In chrome browser you can trace the ajax request by clicking F12 and then Network.
Hope it helps