Question

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, audiouploadform and video uploadform 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);  

        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);  

}

HTML (#QandA form):

   <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">

//image, video and audio 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>
    <th class="video">Video</th>
    <th class="audio">Audio</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>

Now what is happening is that the image, video and audio upload submit buttons are triggering the myClickHandler() function which it shouldn’t,only the #submitBtn should trigger this function. How can I stop the image, audio and video upload buttons from triggering the myClickHandler() function.

UPDATE:

<script type="text/javascript">                 
   $(function() {

    $('#submitBtn').click(myClickHandler(e)) 
});

      function myClickHandler(e){
        if (!validation())
            return false;    
        if (!confirm("Are you sure you want to Proceed?" + "\n" ))
            return false;    
        return true;
    }; 

</script>

Answer 1

The issue is that you have the myClickHandler() attached to all submit buttons which includes the video, audio, and image submit buttons.

Attach it to only the #submitBtn