Php / Ajax - 上传包含MAIL表格

Question

I am trying to combine two different form codes to use at my best need

I used this tutorial http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form/comment-page-1 to create a contact form

Now i need a Internship application form that includes an option to attach resume.

I really like the functionality of the ajax on the form I used but it doesn't show how to add uploads to the email.

This tutorial shows that.. http://designbyelle.com.au/journal/2008/04/23/php-mailer-form-with-file-attachment/

I am trying my best to combine them. I have to incorporate the later into the former's php and use the later's email technique.

PROBLEM :

The ajax form was based on input data, but the attachment form says we need the FORM element since we need to add method="post" enctype="multipart/form-data">

I tried turning the fieldset to form but then the script ajax script doesnt show. How can I solve this problem without changing the fieldset to form

In simple terms how do I attact the method="post" enctype="multipart/form-data"> in a fieldset form.

SCRIPT FOR THE AJAX FORM

    <script type="text/javascript">
    $(document).ready(function() {
        $("#send_btn").click(function() { 
            //collect input field values
            var intern_name       = $('input[name=name]').val();
            var intern_city       = $('input[name=city]').val();
            var intern_program    = $('input[name=program]').val();   
            var intern_portfolio  = $('input[name=portfolio]').val(); 
            var intern_experience = $('input[name=experience]').val(); 
            var intern_filename   = $('input[name=filename]').val(); 
            var intern_email      = $('input[name=email]').val();
            var intern_phone      = $('input[name=phone]').val();

            //simple validation at client's end
            //we simply change border color to red if empty field using .css()
            var proceed = true;
            if(intern_name==""){ 
                $('input[name=name]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_city==""){ 
                $('input[name=city]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_program==""){ 
                $('input[name=program]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_portfolio==""){ 
                $('input[name=portfolio]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_filename==""){ 
                $('input[name=filename]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_email==""){ 
                $('input[name=email]').css('border-color','red'); 
                proceed = false;
            }
            if(intern_phone=="") {    
                $('input[name=phone]').css('border-color','red'); 
                proceed = false;
            }


            //everything looks good! proceed...
            if(proceed) 
            {
                //data to be sent to server
                post_data = {'internName':intern_name, 'internCity':intern_city,   'internProgram':intern_program,  'internPortfolio':intern_portfolio,  'internEexperience':intern_experience,  'internFilename':intern_filename, 'internEmail':intern_email, 'internPhone':intern_phone};

                //Ajax post data to server
                $.post('intern_me.php', post_data, function(data){  

                    //load success massage in #internresult div element, with slide effect.       
                    $("#internresult").hide().html('<div class="success">'+data+'</div>').slideDown();

                    //reset values in all input fields
                    $('#intern_form input').val(''); 
                    $('#intern_form textarea').val(''); 

                }).fail(function(err) {  //load any error data
                    $("#internresult").hide().html('<div class="error">'+err.statusText+'</div>').slideDown();
                });
            }

        });

        //reset previously set border colors and hide all message on .keyup()
        $("#intern_form input, #intern_form textarea").keyup(function() { 
            $("#intern_form input, #intern_form textarea").css('border-color',''); 
            $("#internresult").slideUp();
        });

    });
    </script>

this is the start of the html

    <fieldset id="intern_form">
                  <label for="name"><span>Name</span>
                    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
                  </label>

I am hoping someone can help me. I will need more help as I test these two to combine them together. But for now this is my question. How can I use the multipart on fieldset

Answer 1

I'd probably stay away from trying to tack on enctype onto the field set. Just wrap what you have now within a tag. Plus, that is the proper way to do it anyways.

Here's how I'd set up the HTML

<form id="intern_form" method="POST" action"path/to/php/" enctype="multipart/form-data">
 <fieldset>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" placeholder="Enter Your Name" />
 </fieldset>
</form>