0

I have a div with form fields in it including multiple attachments in my HTML. However, I am not sure how to recode the following to allow for zero to many attachments, and not sure about the PHPMailer part. Here is the Ajax part I've got so far. Is this part at least correct? What about sendContactFormEmail.php? Do I have to use the FormData interface?

    <!-- validate and submit form input -->
    <script type="text/javascript">

  $(document).ready(function() {

    matchFormFields = "#contactForm input[required], #contactForm textarea[required]";

    matchContactSubmitResult = "#contactSubmitResult";

    errorColor = 'red';

    $("#form_send").click(function() { 

      var formIsValid = true;

      // loop through each field and change border color to red for invalid fields       

      $(matchFormFields).each(function() {

        $(this).css('border-color', '');

        // check whether field is empty

        if(!$.trim($(this).val())) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }

        // check whether email is valid

        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

        if($(this).attr("type") == "email" && !email_reg.test($.trim($(this).val()))) {

          $(this).css('border-color', errorColor);

          formIsValid = false;

        }   

      });

      // submit data to server if form field contents are valid

      if (formIsValid) {

        // retrieve input field values to be sent to server

        post_data = {
          'form_firstname'  : $('input[name=form_firstname]').val(), 
          'form_lastname'   : $('input[name=form_lastname]').val(), 
          'form_address'    : $('input[name=form_address]').val(), 
          'form_city'       : $('input[name=form_city]').val(), 
          'form_email'      : $('input[name=form_email]').val(), 
          'form_phone'      : $('input[name=form_phone]').val(), 
          'form_attachment' : $('input[name=form_attachment]').val(), 
          'form_message'    : $('textarea[name=form_message]').val(), 
        };

        // Ajax post data to server

        $.post('mail/sendContactFormEmail.php', post_data, function(response) {  

          if (response.type == 'error') { // load json data from server and output message

            output = '<div class="error">' + response.text + '</div>';

          } else {

            output = '<div class="success">' + response.text + '</div>';

            // reset values in all form fields

            $(matchFormFields).val('');

          }

          // display an animation with the form submission results

          $(matchContactSubmitResult).hide().html(output).slideDown();

        }, 'json');

      }

    });

    // reset border on entering characters in form fields

    $(matchFormFields).keyup(function() {

      $(this).css('border-color', '');

      $(matchContactSubmitResult).slideUp();

    });

  });

    </script>
Community
  • 1
  • 1
John Sonderson
  • 3,238
  • 6
  • 31
  • 45
  • Base your PHPMailer code on [this example](https://github.com/PHPMailer/PHPMailer/blob/master/examples/send_file_upload.phps). – Synchro Sep 18 '15 at 11:55
  • But I'm looking for an example that uses jQuery and possibly also multiple file attachments. – John Sonderson Sep 18 '15 at 15:49
  • You're talking about two entirely separate problems. jQuery has nothing to do with email, PHPMailer has nothing to do with JS and forms. You can write code that joins the two together, but you need to solve one thing at a time. If you get uploads working, and you get PHPMailer sending attachments ok (like in the example I gave), the code in the middle will be pretty simple - we're here to help you learn, not to write it for you. – Synchro Sep 18 '15 at 20:14
  • I've [modified the code](http://stackoverflow.com/questions/32659894/php-jquery-ajax-send-html-input-fields-with-attachment-field-code-not-working) but still cannot figure out how to debug it because the FormData object fields are hard to inspect. Any ideas on how to proceed? – John Sonderson Sep 18 '15 at 20:24

0 Answers0