ben03 0 Posted December 23, 2020 Report Share Posted December 23, 2020 Hi all, I am having trouble with Ajax handling an attachment in a web form. I am quite new to this so have maybe missing something faily obvious to someone else: <form id="completeService" enctype="multipart/form-data" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <button class="button is-link" id="submit1">Send</button> $('#submit1').click(function(e) { e.preventDefault(); var form = $('#completeService')[0]; var data = new FormData(form); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: '../../../_partial/contactForm.php', data: data, processData: false, contentType: false, success: function(response) { var jsonData = JSON.parse(response); if (jsonData.success == "1") { $('.notification').fadeIn(function(){ $(this).addClass("is-success"); $(this).text("Thank you for your interest. We will get back to you soon."); $(this).delay(5000).fadeOut(); }); } else { $('.notification').fadeIn(function(){ $(this).addClass("is-danger"); $(this).text("Something went wrong. Please try again later"); $(this).delay(5000).fadeOut(); }); } } }); }); If I include _partial/contactForm.php in the same page as the form and comment out the ajax it sends the attachment fine. The form also sends through ajax when no attachment is added. So am fairly sure the problem lies in the ajax handling the attachment. Help appreciated! Thanks Quote Link to post Share on other sites
dsonesuk 929 Posted December 24, 2020 Report Share Posted December 24, 2020 As far as i can see, nothing is being sent through formData(), there is no form element with attribute name, for it to retrieve. Quote Link to post Share on other sites
ben03 0 Posted December 24, 2020 Author Report Share Posted December 24, 2020 Thanks dsoneuk, I have rejiggled it slightly, and am printing formData to console. When this prints to the console, I am not sure where I should check as the object has so many levels? $('form').submit(function(e) { e.preventDefault(); var formData = new FormData(this); if($('#fileUpload').prop('files').length > 0) { file =$('#fileUpload').prop('files')[0]; formData.append("attachment", file); } console.log(formData); $.ajax({ type: "POST", url: '/_partial/contactForm.php', data: formData, success: function(response){ var jsonData = JSON.parse(response); if (jsonData.success == "1") { $('.notification').fadeIn(function(){ $(this).addClass("is-success"); $(this).text("Thank you for your interest. We will get back to you soon."); $(this).delay(5000).fadeOut(); }); } else { $('.notification').fadeIn(function(){ $(this).addClass("is-danger"); $(this).text("Something went wrong. Please try again later"); $(this).delay(5000).fadeOut(); }); } }, cache: false, processData: false, contentType: false, }); $(this).trigger("reset"); }); The contactForm.php sends the form data to email. This all arrives apart from the attachment. After a delayed response, this message shows in console: Uncaught SyntaxError: Unexpected token { in JSON at position 13 at JSON.parse (<anonymous>) at Object.success (contact.js:197) at c (jquery-3.5.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2) at l (jquery-3.5.1.min.js:2) at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2) This is caused by this {"success":0}{"success":1} which to me says maybe it is recognising one bit did send and one didn't? Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.