Hi,

ik heb een (bootstrap) modal box waar een formulier voor een file upload in geladen wordt mbv jquery.
Inladen lukt, maar submit geeft een pagina reload waarbij niks verder gebeurd. Hetzelfde script op een pagina
zonder modal boxes werkt wel.

Help?

// dit wordt in de modal box ingeladen

Code:

<form id="uploadpdf" method="post"  enctype="multipart/form-data" >
<input name="FileInput" id="FileInput" type="file" /><br><br>
<input type="text" name="klantnr" value="<?=$_GET['klantnr'];?>"><br>
<input type="submit"  id="submit-btnpdf" name="submit-btnpdf" value="Upload" />
</form>

// jquery script

Code:

<script>
      $(function () {
        $("#uploadpdf").submit(function() {
         event.preventDefault();
        
         var formData = new FormData($(this)[0]); 
    
         $.ajax({ 
              url: "processupload.php",
              type: "POST", 
                data: formData,
             async: false,
             cache: false,
             contentType: false,
             enctype: 'multipart/form-data',
             processData: false,
              success:function(response){
                      alert(response); 
                      },
                      error:function() { 
                      alert('fout');
                     }
                     
             });
        return false;
        });
    });
    </script>

Probeer dit eens toe te voegen :)

$('#submit-btnpdf').click(function(){
$('#uploadpdf').submit();
});

Gebruik de andere vorm van event binding in jquery; Na het laden van het form door de model heeft deze nog geen events;

Code:

$("#uploadpdf").submit(function() {

-- naar --

$(document).on('submit', "#uploadpdf", function(event) {