我正在处理的网站的一部分涉及添加 <input>使用 jquery，以便用户可以根据他们的要求插入更多详细信息。当这些值插入到通过 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，长度 1 2 - 宽度 2，长度 2 等取决于添加的“行”的数量。这些值将通过电子邮件发送，所以我想将它们保存为 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');
}
}
?>
最佳答案
$('#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);
});
});
关于javascript - 从通过 jquery 显示/添加的输入中保存值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35181438/