2014-03-26 2 views
0

Я пытаюсь объединить два различных кода формы, чтобы использовать в своей лучшей потребностиPhp/Ajax - загрузить прилагаемую форму MAIL

Я использовал этот учебник http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form/comment-page-1 создать контактную форму

Теперь мне нужно Форма заявки на стажировку, которая включает в себя возможность присоединения резюме.

Мне очень нравится функциональность ajax в используемой вами форме, но она не показывает, как добавлять закачки в электронную почту.

В этом учебнике показано, что .. http://designbyelle.com.au/journal/2008/04/23/php-mailer-form-with-file-attachment/

Я стараюсь изо всех сил, чтобы объединить их. Мне нужно включить позже в php бывшего и использовать технику электронной почты более поздней версии.

ПРОБЛЕМА:

Аякса форма была основана на входных данных, но форма привязанности говорит нам нужен элемент FORM, так как нам нужно добавить method="post" enctype="multipart/form-data">

Я попытался поворота Fieldset с образованием, но тогда скрипт сценария ajax не показывает. Как решить эту проблему без изменения набора полей для формирования

Проще говоря, как я могу установить method="post" enctype="multipart/form-data"> в виде набора полей.

СЦЕНАРИЙ ДЛЯ AJAX ФОРМЕ

<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> 

это начало HTML

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

Я надеюсь кто-то может мне помочь. Мне понадобится дополнительная помощь, поскольку я тестирую эти два, чтобы объединить их. Но пока это мой вопрос. Как использовать поле multipart на поле

+0

я нашел это было бы эту работу, если я целевой Fieldset? '$ (" form # upload-form ") .attr (" enctype "," multipart/form-data ") .attr (" encoding "," multipart/form-data ") ;' if i replace form с fieldset # idofthefieldset –

ответ

0

Я бы, наверное, держался подальше от попытки наложить на enctype на полевой набор. Просто оберните то, что у вас есть, в теге . Кроме того, это правильный способ сделать это в любом случае.

Вот как я создал 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> 
Смежные вопросы