Browser loading php script after submitting form using jQuery Form plugin -
i'm trying implement form using jquery form plugin. form has 3 text fields , file input , validating form in beforesend callback. problem is, whether validation passes or not, php script handles file upload gets loaded in browser, which, not want happen - need stay on form's page.
you can take @ form , it's dependent files @ http://www.eventidewebdesign.com/public/testupload/. indexing on directory, can take @ of related files. form on testupload.php.
i'd appreciate if take @ code , me figure out what's going on here.
please write following script instead of your, work.
<script> $(document).ready( function() { // initialize , populate datepicker $('#sermondate').datepicker(); var currentdate = new date(); $("#sermondate").datepicker('setdate',currentdate); $("#sermondate").datepicker('option',{ dateformat: 'mm/dd/yy' }); /* * upload */ // reset validation , progress elements var formvalid = true, percentval = '0%'; $('#uploadedfile, #sermontitle, #speakername, #sermondate').removeclass('error'); $('#status, #required').empty().removeclass(); $('.statusbar').width(percentval) $('.percent').html(percentval); $('#frmsermonupload').ajaxform({ beforesend: function() { if (!validateuploadform()) { formvalid = false; console.log('validateuploadform returned false'); } else { console.log('validateuploadform returned true'); formvalid = true; } console.log('in beforesend. formvalid: ' + formvalid); if (!formvalid) { $('#uploadedfile').val(''); return false; } }, uploadprogress: function(event, position, total, percentcomplete) { console.log('in uploadprogress function. formvalid: ' + formvalid); if (formvalid) { var percentval = percentcomplete + '%'; $('.statusbar').width(percentval) $('.percent').html(percentval); } }, complete: function(xhr) { console.log('in complete function. formvalid: ' + formvalid); if (formvalid) { console.log('xhr.responsetext: ' + xhr.responsetext); console.log('formvalid: ' + formvalid); if (xhr.responsetext === 'success') { $('.statusbar').width('100%'); $('.percent').html('100%'); $('#status').html('successfully uploaded sermon.').addclass('successupload'); // clear form clearform(); } else if (xhr.responsetext === 'fail') { $('#status').html('there problem uploading file. try again.<br>if problem persists, contact system administrator.').addclass('errorupload'); } } } }); // end upload status bar }); function validateuploadform() { // reset errors , clear message $('#uploadedfile, #sermontitle, #speakername, #sermondate').removeclass('error'); $('#required').empty(); var result = true; title = $('#sermontitle').val(), speaker = $('#speakername').val(), date = $('#sermondate').val(), filename = $('#uploadedfile').val(); extension = $('#uploadedfile').val().split('.').pop().tolowercase(); //if (filename !== '' && extension !== 'mp3') { if ((filename === '') || (extension !== 'mp3')) { $('#uploadedfile').addclass('error'); $('#required').html('only mp3 files allowed!'); return false; } else if (filename === '') { result = false; } else if (title === '') { $('#sermontitle').addclass('error'); result = false; } else if (speaker === '') { $('#speakername').addclass('error'); result = false; } else if (date === '') { $('#sermondate').addclass('error'); result = false; } console.log('returning ' + result + ' validateuploadform function'); if (!result) { $('#required').html('all fields required.'); } return result; } function clearform() { $('#uploadedfile, #sermontitle, #sermondate, #speakername').val('').removeclass(); } </script>