[英]html form elements and using php to get data
我已經搜索並找到了一些不錯的潛在解決方案,但似乎無法使這項工作奏效。 我還是一個初學者。 我正在使用帶有下拉菜單的表單元素,並嘗試獲取用戶輸入,然后通過電子郵件發送信息。 我將在此處發布html和php:
<form method = "post">
<fieldset class="form-group">
<div class="dropdown">
<button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" name="size">Choose Size
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>14 x 20</li>
<li>16 x 26</li>
<li>18 x 30</li>
<li>20 x 32</li>
<li>22 x 38</li>
<li>28 x 44</li>
</ul>
</div>
</fieldset>
<div class="dropdown">
<button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" name="color">Choose Color
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Blue</li>
<li>Lt Blue</li>
<li>Purple</li>
<li>Lavendar</li>
<li>Green</li>
<li>Lt Green</li>
<li>Black</li>
<li>Pink</li>
</ul>
</div>
和PHP:
<?php
$error = ""; $successMessage = "";
if (isset($_POST['size'])) {
$size = $_POST['size'];
$size_string = "";
for($i=0;$i<count($size);$i++) {
if($i!=0) {
$size_string = $size_string . ", ";
}
$size_string = $size_string . $service[$i];
}
} else {
$error .= "Please select a size from the dropdown menu.<br>";
}
if (isset($_POST['color'])) {
$color = $_POST['color'];
$color_string = "";
for($i=0;$i<count($color);$i++) {
if($i!=0) {
$color_string = $color_string . ", ";
}
$color_string = $color_string . $color[$i];
}
} else {
$error .= "Please select a color from the dropdown menu.<br>";
}
...
$emailTo = "me@mydomain.com";
$subject = "Mat Order";
$content = $_POST['color'];
$content .= $_POST['size'];
$content .= $_POST['monogram']
抱歉,大量的代碼只是嘗試粘貼相關區域。 任何建議將不勝感激。
作為上述插件的替代方法,下面是一段jQuery代碼,這些代碼將預處理並提交表單。 另外,如上面的評論中所述,請確保在表單和提交按鈕中添加並“操作”。
<form method="post" action="pathToYourphp.php">
<!-- Your form content here -->
<button id="submitBtn" class="btn btn-primary" type="submit">Submit</button>
</form>
jQuery代碼:
<script>
$(document).ready(function() {
// This will replace the text in the dropdown with the item selected from the list
$(".dropdown-menu li").click(function(){
$(this).parents(".dropdown").find('.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.dropdown-toggle').val($(this).data('value'));
});
// Handle the submit button click
$('#submitBtn').click(function(event) {
// prevent the form from submitting
event.preventDefault();
// Get the form to submit
var form = $(this).closest('form');
// Add hidden inputs dynamically to the form
// and fill them with the correct value
// This will grab the "name" attribute from
// your button
$('.dropdown-toggle').each(function() {
var input = $("<input>")
.attr("type", "hidden")
.attr("name", $(this).attr("name"))
.val($(this).text().trim());
form.append($(input));
});
//submit the form
form.submit();
});
});
</script>
由於您正在使用引導程序,因此應該有可用的jQuery。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.