我正在处理的网站的一部分涉及使用jquery添加<input>，因此用户可以根据需要插入更多详细信息。当这些值插入到通过jquery生成的输入框中时，我对如何保存值感到困惑。
这是jsfiddle：https://jsfiddle.net/57xrg040/
<form id="multiphase" method="POST" enctype="multipart/form-data">
<div id="step1"> .. </div>
<div id="step2"> .. </div>
<div id="step3"> ..
<div class="shape" id="plan4_shape">
<span class="bakkant">
<input class="measures" id="plan4_width" placeholder="mm" name="p4_width"/>
<span class="times"> ×</span>
<input class="measures" id="plan4_width" placeholder="mm" name="p4_length"/>
</span>
<script id="template" type="text/template">
<span class="bakkant" id="bakkant">
<input class="measures" id="plan4_width" placeholder="mm" name="p4_width"/>
<span class="times"> ×</span>
<input class="measures" id="plan4_width" placeholder="mm" name="p4_length"/>
<button class="close" id="close">×</button>
</span>
</script>
<button type="button" name="add_row" class="addrow" id="addrow4" onClick="addrow()">Add row</button> <textarea name="more_info" id="profiles" placeholder="Beskriv fritt, vilka kanter du vill få profilerade."></textarea>
</div>
<button type="button" class="nasta" onClick="processStep3()">Nasta</button>
</div>
<div id="step4"> .. </div>
<div id="step5"> ..
<button type="button" class="nasta" onClick="processStep3()">Nasta</button></div>
</form>
用于添加更多行的Jquery
$(function() {
var i = 0;
$('#addrow4').click(function() {
var $clone = $($('#template').html());
$clone.attr('id', "bakkant" + ++i);
$('.bakkant').prepend($clone);
});
$('.shape').on('click', '.close', function() {
$(this).closest('.bakkant').remove();
});
});
jquery用于处理找到输入的步骤
function processStep3() {
var hasValue = false;
/*plan 1 */
plan1width = $("input[name='plan1_width']").val();
plan1length = $("input[name='plan1_length']").val();
/* plan 2 */
plan2_1 = $("input[name='plan2_1']").val();
plan2_2 = $("input[name='plan2_2']").val();
plan2_3 = $("input[name='plan2_3']").val();
plan2_4 = $("input[name='plan2_4']").val();
/* plan 3 */
plan3_1 = $("input[name='plan3_1']").val();
plan3_2 = $("input[name='plan3_2']").val();
plan3_3 = $("input[name='plan3_3']").val();
plan3_4 = $("input[name='plan3_4']").val();
plan3_5 = $("input[name='plan3_5']").val();
plan3_6 = $("input[name='plan3_5']").val();
$('.measures').each(function (index, elem){
if ($(elem).val()!=""){
hasValue=true;
}
})
if (hasValue) {
_("step4").style.display = "block";
$("#phase3").removeClass("phase");
$("#phase4").removeClass("main_list");
$("#phase3").addClass("main_list");
$("#phase4").addClass("phase");
$("#alert3").hide();
} else {
$("#alert3").show();
}
}
最后我想要类似于： 1 - 宽度1，lenght1 2 - width2，length2 取决于＆＃34;行的数量＆＃34;添加。然后通过电子邮件发送值，因此我想将它们保存为php varialbes，或者在文本框中保存，然后发送。这是多阶段形式的一部分，涉及5个步骤。
此代码将以电子邮件形式处理 -
if ($_POST) {
$name = $_POST['firstlastname'];
$guest_email = $_POST['email'];
$empty = false;
function IsInjected($str) {
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if (preg_match($inject, $str)) {
return true;
} else {
return false;
}
}
if (IsInjected($guest_email)) {
echo "";
} else {
$email_from = $name; //<== update the email address
$email_subject = "You have a new message from $name";
// message
$message = "<html><body style='font-family: Arial, Helvetica, sans-serif;'>".
"<table border='0' cellpadding='0' cellspacing='0'
"</table>".
"</table>".
"</body></html>";
$to = ""; //<== enter personal email here
// headers
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $guest_email \r\n";
$headers .= "BCC: $guest_email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8 \r\n";
//Send the email!
mail($to, $email_subject, $message, $headers);
echo $message;
if(mail($to, $email_subject, $message, $headers)){ echo "Sent"; }else{ echo "Not sent";}
//done. redirect to thank-you page.
// header('Location: back to form');
}
}
?>
答案 0 :(得分：1)
$('#somebutton').click(function (e) {
e.preventDefault();
var data = {};
$('#someparentdiv input').each(function () {
var id = this.id; // or $(this).attr('id');
var val = this.value; // or $(this).val();
// note radio buttons and check boxes behave differently but you're not using them
data[id] = val;
});
$.post('/the/page.php', JSON.stringify(data), function (r) {
console.log('/the/page.php said ');
console.log(r);
});
});
答案 1 :(得分：0)
无需保存文本框中的所有数据，您可以直接发送数据。我建议您将所有输入包装到<form>标记中，并将jQuery.serialize()方法与jQuery.post()结合使用。
但在此之前，我想提醒您注意，通过按照您的方式克隆模板，所有name和id属性都保持不变。您应该更好地更改它们，name属性对于特定情况下的表单序列化至关重要。
最终代码应如下所示：
$(function() {
var i = 0;
$('#addrow4').click(function() {
var $clone = $($('#template').html());
$clone.attr('id', "bakkant" + ++i);
$clone.find('input[rel=\'length\']').attr('name', 'p' + i + '_length');
$clone.find('input[rel=\'width\']').attr('name', 'p' + i + '_width');
// change other attributes
$('.bakkant').prepend($clone);
});
$('.shape').on('click', '.close', function() {
$(this).closest('.bakkant').remove();
});
$('.shape').on('click', '#send', function() {
var data = $("#myForm").serialize();
$.post('/script_url.php', JSON.stringify(data), function (response) {
//response here
});
});
});
不要忘记将输入包装到表单中：
<form name="myForm" id="myForm">
<span class="bakkant">
<input class="measures" rel="width" id="plan4_width" placeholder="mm" name="p4_width"/>
<span class="times"> ×</span>
<input class="measures" rel="height" id="plan4_height" placeholder="mm" name="p4_length"/>