Jump to content

Ajax Not Handling Webform File


ben03
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...