Jump to content

Ajax Not Handling Webform File


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...