我正在尝试将两种不同的表单代码结合使用以满足我的需求
我使用了本教程 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中并使用后者的电子邮件技术。
问题:
ajax表单基于输入数据,但附件表单说我们需要
FORM元素,因为我们需要添加method="post" enctype="multipart/form-data">
我尝试将字段集转换为表单,但后来脚本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 :(得分: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>