我在尝试通过 php 通过电子邮件发送div 的某些内容时遇到问题。我有一个多步骤表单，分阶段采用各种输入类型来个性化一件珠宝。多步骤形式的这些步骤之一在珠宝作品上提供雕刻服务。我希望客户单击一系列字符、符号，并将这些图像添加到创建其消息的另一个div 中。我似乎无法将div 内容发送到 PHP 页面。我还希望能够通过电子邮件发送这些数据，以便我们的珠宝商可以阅读。
这是我的标记：
<form action="contact.php" method="post" class="ajax">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="row">
<div style="text-align: center;" class="col-md-12 header">
<img src="images/layoutoptions.jpg" alt="kryptos layout options in diagrams">
<br>
<h3>Click to add a character and build your message. Up to 70 characters.</h3>
<p>Layout options include: Full message– (we use a symbol to signify the start and end), Split message – (symbols can separate sections), Split message – rotate to read (each element is separated by symbols) or Short message (can be started and finished with a symbol).</p>
</div>
</div>
<div class="row">
<div id="characters" class="col-md-6">
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/A-acorn.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/B-butterfly.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/C-cross.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/D-diamonds.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/E-eternal.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/F-feet.jpg">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/G-flower.jpg">
</span>
</div>
<div id="FrontFace" name="frontface" class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12">
<input class="button" type="BUTTON" id="btn2" value="Undo">
<input class="button" type="BUTTON" id="btn3" value="Clear">
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2 id="textarea_feedback"> 70 characters remaining</h2>
</div>
<div id="errors" class="col-md-6"></div>
</div>
</div>
</div>
</div>
<button type="submit" data-type="submit" class="btn btn-primary msf-nav-button">Submit</button>
这是Jquery：
$(function (){
var text_max = 70;
var source = null;
var iCnt = 0;
var text_remaining = 70;
//Click Image to add to div Frontface
$('img').click(function(){
if (iCnt <= 70) {
source = $(this).attr("src");
iCnt = iCnt + 1;
$("#errors").empty();
$("#FrontFace").append('<span class="input" id=tb' + iCnt + ' ><img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" /></span>');
text_remaining = text_max - iCnt;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}
else {
$("#errors").append('<label>Reached the limit</label><br>');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btn2').click(function() {
if (iCnt != 0) {
$('#tb' + iCnt).remove();
iCnt = iCnt - 1;
text_remaining = text_max - iCnt;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}
if (iCnt == 0) {
$("#errors").append('<label>Please add characters.</label><br>');
}
});
$("#btn3").click(function(){
$("#FrontFace").empty();
$("#errors").empty();
if (iCnt != 0) {
iCnt = 0;
text_remaining = 70;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}
});
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data ={};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
return false;
});
});
任何帮助将不胜感激，jquery 需要优化，因为我已经在线抓取了一个多步骤表单的演示并放下了所有内容。
p
您
没有提交任何数据，因为您的循环正在查找name属性，该属性仅存在于#FrontFace元素上。因此，您只需在索引处向数据数组添加undefined值(span 没有值undefined。您应该按如下方式编辑 HTML(请注意 <img> 标记(
<form action="contact.php" method="post" class="ajax">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="row">
<div style="text-align: center;" class="col-md-12 header">
<img src="images/layoutoptions.jpg" alt="kryptos layout options in diagrams">
<br>
<h3>Click to add a character and build your message. Up to 70 characters.</h3>
<p>Layout options include: Full message– (we use a symbol to signify the start and end), Split message – (symbols can separate sections), Split message – rotate to read (each element is separated by symbols) or Short message (can be started and finished with a symbol).</p>
</div>
</div>
<div class="row">
<div id="characters" class="col-md-6">
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/A-acorn.jpg" data-type="A-acorn">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/B-butterfly.jpg" data-type="B-butterfly">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/C-cross.jpg" data-type="C-cross">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/D-diamonds.jpg" data-type="D-diamonds">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/E-eternal.jpg" data-type="E-eternal">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/F-feet.jpg" data-type="F-feet">
</span>
<span>
<img width="30" src="http://www.madebyfaller.co.uk/wp-content/uploads/2018/04/G-flower.jpg" data-type="G-flower">
</span>
</div>
<div id="FrontFace" name="frontface" class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12">
<input class="button" type="BUTTON" id="btn2" value="Undo">
<input class="button" type="BUTTON" id="btn3" value="Clear">
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2 id="textarea_feedback"> 70 characters remaining</h2>
</div>
<div id="errors" class="col-md-6"></div>
</div>
</div>
</div>
</div>
<button type="submit" data-type="submit" class="btn btn-primary msf-nav-button">Submit</button>
以及相应的jQuery。我不知道你想得到什么value和什么name所以我只是将项目推送到一个数组中。代码有效，但您应该根据需要对其进行编辑。
$(function() {
var text_max = 70;
//var source = null; this should not be global
var iCnt = 0;
var text_remaining = 70;
//Click Image to add to div Frontface
$('img').click(function() {
if (iCnt <= 70) {
var source = $(this).attr("src");
var type = $(this).data('type');
iCnt = iCnt + 1;
$("#errors").empty();
$("#FrontFace").append('<span class="input" id="tb' + iCnt + '" data-type="' + type + '" ><img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" /></span>');
text_remaining = text_max - iCnt;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
} else {
$("#errors").append('<label>Reached the limit</label><br>');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btn2').click(function() {
if (iCnt != 0) {
$('#tb' + iCnt).remove();
iCnt = iCnt - 1;
text_remaining = text_max - iCnt;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}
if (iCnt == 0) {
$("#errors").append('<label>Please add characters.</label><br>');
}
});
$("#btn3").click(function() {
$("#FrontFace").empty();
$("#errors").empty();
if (iCnt != 0) {
iCnt = 0;
text_remaining = 70;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
}
});
$('form.ajax').on('submit', function(e) {
e.preventDefault();
var url = $(this).attr('action'),
method = $(this).attr('method'),
data = [];
$(this).find('span.input').each(function(index, value) {
var type = $(this).data('type')
data.push(type);
});
console.log(data);
return false;
});
});
检查这个小提琴
另一种无需循环访问元素来收集数据的方法是添加一个隐藏的<input>字段，该字段将与表单提交一起发送。
这将导致$_POST['character']数组与以下形式一起发送
$('img').click(function() {
if (iCnt <= 70) {
var source = $(this).attr("src");
var type = $(this).data('type');
iCnt = iCnt + 1;
$("#errors").empty();
$("#FrontFace").append('<span class="input" id="tb' + iCnt + '">'
+'<img alt="faller-kryptos-engraving" width="26" height="auto" src="' + source + '" />'
+'<input type="hidden" name="characters[]" value="' + type + '"/>'
+'</span>');
text_remaining = text_max - iCnt;
$('#textarea_feedback').html(text_remaining + ' characters remaining');
} else {
$("#errors").append('<label>Reached the limit</label><br>');
}
});
这将导致一个$_POST['character']数组与表单一起发送，您可以使用
foreach($_POST['character'] AS $index=>$char){
....
}