用一个按钮动态添加项目的联系表格

除了通用名称，电话，电子邮件字段等外，我希望它具有一些产品的下拉列表和数量的文本框。点是我想用户可以通过按钮添加更多产品（数量下拉框和文本框）。
我设法做到这一点与一些JQuery脚本，但是当我发送电子邮件与PHP，我添加的产品不在已发送的电子邮件。用一个按钮动态添加项目的联系表格

这里是HTML：

<!DOCTYPE html> 
<html > 

<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<title></title> 

<link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 

<body > 

    <form name="form1" id="form1" action="mail.php" method="POST"> 
Όνομα: <input type="text" name="name" size="20"> 
    <br> 
Email: <input type="text" name="email" size="20"> <br> 
Νομός: <input type="text" name="nomos" size="20"> 
    <br> 
Περιοχή: <input type="text" name="perioxh" size="15"> 
    <br> 
Διέυθυνση <input type="text" name="address" size="15"> 
<br>  
Τηλέφωνο: <input type="text" name="tel" size="9"> 
<br> 
Δ.Ο.Υ: <input type="text" name="doy" size="9"> 

    <div class="aromatika"> 

    <div class="fotodiv"><img src="images/enoikiazomena-diamerismata-                                      tinos-crystal-view-exwterikos-xwros-nuxta-1.jpg" width="100%" height="300px"></div> 

    <div class="input_wrap"> 
     <select size="1" name="dropdown">  
     <option selected disabled>ΔΙΑΛΕΞΤΕ ΦΥΤΟ </option> 

     <option value="ΑΝΗΘΟΣ Φ17"> ΑΝΗΘΟΣ Φ17</option> 
     <option value="ΣΕΛΙΝΟ Φ17"> ΣΕΛΙΝΟ Φ17 </option> 
     <option value="ΜΑΪΝΤΑΝΟΣ Φ17"> ΜΑΪΝΤΑΝΟΣ Φ17 </option> 
     <option value="ΑΡΜΠΑΡΟΡΙΖΑ Φ17"> ΑΡΜΠΑΡΟΡΙΖΑ Φ17 </option> 
     <option value="ΑΡΤΕΜΙΣΙΑ Φ17"> ΑΡΤΕΜΙΣΙΑ Φ17 </option> 
     <option value="ΑΠΗΓΑΝΟΣ Φ17"> ΑΠΗΓΑΝΟΣ Φ17 </option> 
     <option value="ΒΑΣΙΛΙΚΟΣ Φ17"> ΒΑΣΙΛΙΚΟΣ Φ17 </option> 
     <option value="ΔΥΟΣΜΟΣ Φ17"> ΔΥΟΣΜΟΣ Φ17 </option> 
     <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17 </option> 
     <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17 </option> 
     <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17 </option>    
     </select> 
     <div class="posotita"> 

     Ποσοτητα <input type="text" size="1" name="text[]" class="form-control"> 
     </div> 
    </div> 
     <button class="add_field_button btn btn-info">Προσθέστε προιόν</button> 
    </div> 


    <input type="submit" value="Αποστολή">  
</form> 
    <div></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="scripts/script.js" type="text/javascript"></script> 
    </body> 
</html>

而且现在的javascript：

var wrapper = $(".input_wrap>div"); 
     var add_button = $(".add_field_button"); 

     $(add_button).click(function (e) { 
      e.preventDefault(); 
      $(wrapper).after('<div class="input_wrap"><select size="1" name="dropdown"><option selected disabled>ΔΙΑΛΕΞΤΕ ΦΥΤΟ </option> 
      <option value="ΑΝΗΘΟΣ Φ17"> ΑΝΗΘΟΣ Φ17</option> 
      <option value="selino"> ΣΕΛΙΝΟ Φ17 </option> 
      <option value="ΜΑΪΝΤΑΝΟΣ Φ17"> ΜΑΪΝΤΑΝΟΣ Φ17 </option> 
      <option value="ΑΡΜΠΑΡΟΡΙΖΑ Φ17"> ΑΡΜΠΑΡΟΡΙΖΑ Φ17 </option> 
      <option value="ΑΡΤΕΜΙΣΙΑ Φ17"> ΑΡΤΕΜΙΣΙΑ Φ17 </option> 
      <option value="ΑΠΗΓΑΝΟΣ Φ17"> ΑΠΗΓΑΝΟΣ Φ17 </option> 
      <option value="ΒΑΣΙΛΙΚΟΣ Φ17"> ΒΑΣΙΛΙΚΟΣ Φ17 </option> 
      <option value="ΔΥΟΣΜΟΣ Φ17"> ΔΥΟΣΜΟΣ Φ17 </option> 
      <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17 </option> 
      <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17 </option><option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17 </option></select> 
<a href="#" class="remove_field"> Αφαίρεση Προιόντος</a><div class="posotita">Ποσοτητα <input type="text" name="text[]" size="1" class="form-control">'); //add input box 

     }); 

     $(document).on("click",".remove_field",function(){ 
      $(this).parent().remove(); 
     });

和最后的PHP：在线

<?php 

$name = $_POST['name']; 
$email = $_POST['email']; 
$nomos = $_POST['nomos']; 
$perioxh = $_POST['perioxh']; 
$address = $_POST['address']; 
$tel = $_POST['tel']; 
$doy = $_POST['doy']; 
$dropdown = $_POST['dropdown']; 
$posotita = $_POST['text[]']; 
$formcontent=" Όνομα: $name \n Email: $email \n Νομός: $nomos \n Περιοχή: $perioxh \n Διέυθυνση: $address \n Τηλέφωνο: $tel \n Δ.Ο.Υ: $doy \n Προίοντα: $dropdown \n Ποσότητα: $posotita"; 
$recipient = "[email protected]"; 
$subject = "Contact Form"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>"; 
?>

你可以看到它在http://birdycreative.gr/jqueryform.html

在此先谢谢

来源

2016-12-05 Spiros Poulakis

Kalimera！

解决您的问题将是以下内容。

这会给你所有的产品在不同的符合它们的数量一起：

HTML &的JavaScript

<!DOCTYPE html> 
<html > 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title></title> 

    <link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 

<body > 

<form name="form1" id="form1" action="mail.php" method="POST"> 
    Όνομα: <input type="text" name="name" size="20"> 
    <br> 
    Email: <input type="text" name="email" size="20"> <br> 
    Νομός: <input type="text" name="nomos" size="20"> 
    <br> 
    Περιοχή: <input type="text" name="perioxh" size="15"> 
    <br> 
    Διέυθυνση <input type="text" name="address" size="15"> 
    <br> 
    Τηλέφωνο: <input type="text" name="tel" size="9"> 
    <br> 
    Δ.Ο.Υ: <input type="text" name="doy" size="9"> 

    <div class="aromatika"> 

     <div class="fotodiv"> 
     <div class="input_wrap"> 
      <select name="dropdown[0]"> 
       <option selected disabled>ΔΙΑΛΕΞΤΕ ΦΥΤΟ </option> 
       <option value="ΑΝΗΘΟΣ Φ17"> ΑΝΗΘΟΣ Φ17</option> 
       <option value="ΣΕΛΙΝΟ Φ17"> ΣΕΛΙΝΟ Φ17 </option> 
       <option value="ΜΑΪΝΤΑΝΟΣ Φ17"> ΜΑΪΝΤΑΝΟΣ Φ17 </option> 
       <option value="ΑΡΜΠΑΡΟΡΙΖΑ Φ17"> ΑΡΜΠΑΡΟΡΙΖΑ Φ17 </option> 
       <option value="ΑΡΤΕΜΙΣΙΑ Φ17"> ΑΡΤΕΜΙΣΙΑ Φ17 </option> 
       <option value="ΑΠΗΓΑΝΟΣ Φ17"> ΑΠΗΓΑΝΟΣ Φ17 </option> 
       <option value="ΒΑΣΙΛΙΚΟΣ Φ17"> ΒΑΣΙΛΙΚΟΣ Φ17 </option> 
       <option value="ΔΥΟΣΜΟΣ Φ17"> ΔΥΟΣΜΟΣ Φ17 </option> 
       <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17 </option> 
       <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17 </option> 
       <option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17 </option> 
      </select> 
      <div class="posotita"> 
       Ποσοτητα <input type="text" size="1" name="text[0]" class="form-control"> 
      </div> 
     </div> 
     <button class="add_field_button btn btn-info">Προσθέστε προιόν</button> 
    </div> 
    <br> 

    <input type="submit" value="Αποστολή"> 
</form> 
<div></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    var wrapper = $(".input_wrap>div"); 
    var add_button = $(".add_field_button"); 
    var i = 1; 
    $(add_button).click(function (e) { 
     e.preventDefault(); 
     $(wrapper).append('<div class="input_wrap"><select size="1" name="dropdown[' + i + ']"><option selected disabled>ΔΙΑΛΕΞΤΕ ΦΥΤΟ </option>' + 
       '<option value="ΑΝΗΘΟΣ Φ17"> ΑΝΗΘΟΣ Φ17</option>' + 
       '<option value="ΣΕΛΙΝΟ Φ17"> ΣΕΛΙΝΟ Φ17 </option>' + 
       '<option value="ΜΑΪΝΤΑΝΟΣ Φ17"> ΜΑΪΝΤΑΝΟΣ Φ17 </option>' + 
       '<option value="ΑΡΜΠΑΡΟΡΙΖΑ Φ17"> ΑΡΜΠΑΡΟΡΙΖΑ Φ17 </option>' + 
       '<option value="ΑΡΤΕΜΙΣΙΑ Φ17"> ΑΡΤΕΜΙΣΙΑ Φ17 </option>' + 
       '<option value="ΑΠΗΓΑΝΟΣ Φ17"> ΑΠΗΓΑΝΟΣ Φ17 </option>' + 
       '<option value="ΒΑΣΙΛΙΚΟΣ Φ17"> ΒΑΣΙΛΙΚΟΣ Φ17 </option>' + 
       '<option value="ΔΥΟΣΜΟΣ Φ17"> ΔΥΟΣΜΟΣ Φ17 </option>' + 
       '<option value="ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ Φ17 </option>' + 
       '<option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΕΡΠΟΝ Φ17 </option><option value="ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17"> ΔΕΝΤΡΟΛΙΒΑΝΟ ΗΜΙΕΡΠΟΝ Φ17 </option></select>' + 
       '<a href="#" class="remove_field"> Αφαίρεση Προιόντος</a><div class="posotita">Ποσοτητα <input type="text" name="text[' + i + ']" size="1" class="form-control">' 
     ); 
     i++; 
    }); 

    $(document).on("click",".remove_field",function(){ 
     $(this).parent().remove(); 
    }); 
</script> 
</body> 
</html>

PHP

$name = $_POST['name']; 
$email = $_POST['email']; 
$nomos = $_POST['nomos']; 
$perioxh = $_POST['perioxh']; 
$address = $_POST['address']; 
$tel = $_POST['tel']; 
$doy = $_POST['doy']; 

$productsArray=[]; 
foreach (($_POST['dropdown']) as $key => $dropdown) { 
    $productsArray[$key] = 'Προϊον: ' . $dropdown . ' - Ποσότητα: ' . $_POST['text'][$key] . " \n "; 
} 

$productsString = implode('',$productsArray); 
$formcontent=" Όνομα: $name \n Email: $email \n Νομός: $nomos \n Περιοχή: $perioxh \n Διέυθυνση: $address \n Τηλέφωνο: $tel \n Δ.Ο.Υ: $doy \n " . $productsString; 

$recipient = "[email protected]"; 
$subject = "Contact Form"; 
$mailheader = "From: $email \r\n"; 

mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 

echo "Thank You!" . " -" . "<a href='form.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";

来源

2016-12-05 03:18:36 LePhleg

谢谢您的回答！它的工作部分。数量显示与逗号分开，但关于产品，它只显示我选择的第一个。我拍了一个截图[链接]（http://prnt.sc/dfmgr5）。纳西卡拉文件euxaristw。 –

答案更新了！现在这应该把产品的完整列表和它们的数量分开。 – LePhleg

用一个按钮动态添加项目的联系表格

回答

相关问题