如何发送不同的表单,并让 php 使用 $.ajax 将其作为一个表单阅读
How to send different forms and let php read it as one form with $.ajax
所以我有一个电子邮件功能,我想用 $.ajax 完成,我正在使用 3 种不同的形式。此外,表单加载了 $.ajax 请求,当用户单击按钮时,表单将消失并出现一个新表单。所以问题是我需要同时将数据形式 3 个表单发送到 PHP 页面,因此它只需要发送一封电子邮件。
Jquery代码:
//load first form
$(".volgende").click(function(){
$("#form-1").slideToggle("slow" , function(){
//first form will dissapear and second form will apear
$.ajax({
url: "include/stap-2.php",
success:function(result){
$(".form>.container").hide().html(result).slideToggle();
}
});
//get form data when button is clicked
var formData1 = {
'strnaam' : $("#strnaam").val(),
'postc' : $("#postc").val(),
'plaats' : $("#plaats").val(),
'woning' : $("#woning").val(),
'leefom' : $("#leefom").val()
};
$(document).ajaxComplete(function() {
$(".stap-1").removeClass("stap-active");
$(".stap-2").addClass("stap-active");
$(".next-step").removeClass("volgende");
$(".next-step").addClass("volgende-2");
});
});
//when the second button is clicked
$(".volgende-2").click(function(){
//second form dissapear and third form apear
$("#form-2").slideToggle("slow", function(){
$.ajax({
url: "include/stap-3.php",
success:function(result){
$(".form>.container").hide().html(result).slideToggle();
}
});
// second form data stored
var formData2 = {
'vraagprijs' : $("#vraagprijs").val(),
'woz' : $("#woz").val(),
'biedingen' : $("#biedingen").val(),
'uiterste' : $("#uiterste").val(),
'interieur' : $("#interieur").val(),
'exterieur' : $("#exterieur").val()
};
$(document).ajaxComplete(function(){
$(".stap-2").removeClass("stap-active");
$(".stap-3").addClass("stap-active");
$(".next-step").removeClass("volgende-2");
$(".next-step").addClass("verzenden");
$(".verzenden", this).text("Verzenden");
$(".verzenden", this).prop("type", "submit");
//alert(JSON.stringify(formData2, null, 4));
});
});
});
//submit function on the third form
$(".verzenden").click(function(event){
//get form data from the third form
var formData = {
'postc' : $('#postc').val(),
'naam' : $('#naam').val(),
'telnr' : $('#telnr').val(),
'email' : $('#email').val(),
};
$.ajax({
type : 'POST',
url :"include/email-verwerk.php",
data :formData, // send info from third form
dataType :"html",
encode : true,
success : function(){
$("form").hide();
$(".verzenden").hide();
$(".form>.container").hide().html("<div class='alert alert-success'><strong>Bedankt,</strong><br><p>Je bericht is succesvol verstuurd we doen ons best om binnen twee dagen te antwoorden.<br>voor dringende vragen kunt u ons bereiken op <span><strong>+31 645 96 22 02</strong></span></p></div>").slideToggle();
},
error: function(){
$("form").hide();
alert("fout");
}
});
event.preventDefault();
});
});
因此,当单击$('.verzenden')时,它只会将第三种形式提交给PHP页面,有没有办法包含来自第一种和第二种形式的数据,以便当PHP页面收到它的数据时,它只会发送一封完整的电子邮件?
尝试这样 只有一个表单和三个div 会一个接一个地显示和隐藏
最后按钮通过ajax发送所有字段值
$("#part1-btn").click(function(){
$("#part2").show();
$("#part1").hide();
});
$("#part2-btn").click(function(){
$("#part2").hide();
$("#part3").show();
});
$("#part3-btn").click(function(){
var part1 = $('#part1-txt').val();
var part2 = $('#part2-txt').val();
var part3 = $('#part3-txt').val();
var all = "part1 value:"+part1+"<br>part2 value:"+part2+"<br>part2 value:"+part3;
$("#allval").html(all);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id ='maimform'>
<div id='part1' >
<label>part 1</label>
<input type='text' id='part1-txt' />
<input type='button' id='part1-btn' value='submit' />
</div>
<div id='part2' style='display:none'>
<label>part 2</label>
<input type='text' id='part2-txt' />
<input type='button' id='part2-btn' value='submit' />
</div>
<div id='part3' style='display:none'>
<label>part 3</label>
<input type='text' id='part3-txt' />
<input type='button' id='part3-btn' value='submit' />
</div>
<div id='allval'>
</div>
</form>
相关文章:
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- jquery mobile上多个页面上的一个表单
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 循环遍历包含另一个表单的表单
- jquery从2个json字符串构建一个复选框表单
- 为网站表单创建一个专业的日历
- 如何在javascript转换编码中将一个动态值从一个表单添加到另一个页面
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 在表单中创建一个黑名单过滤器以避免某些单词
- 从一个iframe到另一个ifame的过帐表单-IE
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 页面上的2个表单带有JS验证-其中一个抛出电子邮件验证错误
- 需要一个用于AJAX的Javascript库,其中包含多部分/表单数据
- 当阻止Enter键提交AJAX表单时,关注下一个输入是't工作
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 在另一个可观察量完成后触发第二个表单提交单击
- 两个表单 - 一个提交按钮
- 多表单一个ajax函数