pymnclilliape
New Member
Internet Explorer is givning me big problems with an upload button I have associated with a file input.Below is the function where it handles a normal submit button:\[code\] <script type="text/javascript">$(function() {myClickHandler=function(e) { if (!validation()) return false; if (!confirm("Are you sure you want to Proceed?" + "\n" )) return false; $.ajax({ url: "insertQuestion.php", data: $("#QandA").serialize(), async: false, type: "POST" }); return true; };$('#QandA').submit(myClickHandler);});</script>\[/code\]Below is the submit button and form which is associated with the clickHandler function above:\[code\]<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post"><p><input id="submitBtn" name="submitDetails" type="submit" value="http://stackoverflow.com/questions/14058612/Submit Details" /></p></form>\[/code\]Now the above works fine. But the problem I have is that I have another form where it submits a file input, code for this is below:\[code\]<form action='imageupload.php' method='post' enctype='multipart/form-data' onsubmit='return imageClickHandler(this);' class='imageuploadform' > Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'> <input type='submit' name='submitImageBtn' class='sbtnimage' value='http://stackoverflow.com/questions/14058612/Upload' /></label> </form> \[/code\]Now this form is will be appended into the \[code\]#QandA\[/code\] from (top form) and I believe because of this it is causing the problem of the \[code\]myClickHandler=function(e)\[/code\] being triggered when the "Upload" button is clicked on even though it should not trigger that function at all. Only the "Submit Details" button in the top form should trigger the \[code\]myClickHandler()\[/code\] function.So my question is possibly what do I need to change in order for only the \[code\]Submit Details\[/code\] button to trigger the \[code\]myClickHandler()\[/code\] function?I believe this line of code needs to be changed: \[code\]$('#QandA').submit(myClickHandler);\[/code\]. I tried changing it to \[code\]$('#submitBtn').submit(myClickHandler);\[/code\] but it does not trigger the function when I made this change.UPDATE:Below I am showing how the imageuploadform is appended into a table which is in the \[code\]#QandA\[/code\] form:jquery:\[code\]function insertQuestion(form) { var $image = $("<td class='image'></td>"); var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + "<input type='submit' name='submitImageBtn' class='sbtnimage' value='http://stackoverflow.com/questions/14058612/Upload' /></label></form>"); $image.append($fileImage);$tr.append($image); }\[/code\]HTML (#QandA form):\[code\] <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">//Below is button where when clicked, it will append the image upload form into the table<table id="questionBtn" align="center"><tr><th><input id="addQuestionBtn" name="addQuestion" type="button" value="http://stackoverflow.com/questions/14058612/Add Question" onClick="insertQuestion(this.form)" /></th></tr></table>//image upload form is appended into table below:<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"><thead><tr> <th class="image">Image</th></tr></thead></table><div id="qandatbl_onthefly_container"><table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0"><tbody></tbody></table> <p><input id="submitBtn" name="submitDetails" type="submit" value="http://stackoverflow.com/questions/14058612/Submit Details" /></p> </form>\[/code\]