Question

Internet Explorer is giving 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:

<script type="text/javascript">                 
   $(function() {
      myClickHandler=function(e){
        if (!validation())
            return false;    
        if (!confirm("Are you sure you want to Proceed?" + "\n" ))
            return false;    
        return true;
    };  
    $('#QandA').submit(myClickHandler);
});

</script>

Below I am showing how the imageuploadform is appended into a table which is in the #QandA form:

jquery:

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='Upload' /></label></form>");
    $image.append($fileImage);
    $tr.append($image);  
}

HTML (#QandA form):

   <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="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="Submit Details" /></p>

    </form>

As mentioned the image upload form is appended into the #QandA from and I believe because of this it is causing the problem of the myClickHandler=function(e) 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 myClickHandler() function.

So my question is possibly what do I need to change in order for only the Submit Details button to trigger the myClickHandler() function?

UPDATE:

var $video = $("<td class='video'></td>"); 
var $fileVideo = $("<form action='videoupload.php' method='post' 
                enctype='multipart/form-data' target='upload_target_video'
                onsubmit='return videoClickHandler(this);' 
                class='videouploadform' >" +
                "Video File: <input name='fileVideo' type='file' 
                class='fileVideo' /></label><br/><br/><label class='videolbl'>" +
                "<input type='submit' name='submitVideoBtn' 
                class='sbtnvideo' value='Upload' /></label></form>");
$video.append($fileVideo);
$tr.append($video);  


        var $audio = $("<td class='audio'></td>"); 
var $fileAudio = $("<form action='audioupload.php' method='post' 
                enctype='multipart/form-data' target='upload_target_audio'
                onsubmit='return audioClickHandler(this);' 
                class='audiouploadform' >" +
                "Audio File: <input name='fileAudio' type='file' 
                class='fileAudio' /></label><br/><br/><label class='audiolbl'>" +
                "<input type='submit' name='submitAudioBtn' 
                class='sbtnaudio' value='Upload' /></label></form>");
$audio.append($fileAudio);
$tr.append($audio);  

Answer 1

Maybe try click():

$('#addQuestionBtn').click(function() { 
    insertQuestion(); 
    return false; 
});

To disable any other button, simply use:

$('.sbtnvideo, .any, .other, #element').click(function() {
    return false;
});

You can also try great jQuery Form Plugin.