Как создать список покупок / корзину с помощью выпадающего меню и отправить отправленный список / данные через phpmailer? - PullRequest
0 голосов
/ 18 апреля 2020

Я абсолютный новичок. Я немного разбираюсь в сценариях HTML, CSS, java и PHP.

Я хочу создать веб-страницу, где пользователь может выбрать параметры из выпадающего списка и создать список. Сам список будет выглядеть как корзина покупок: пользователь должен иметь возможность удалить опцию и изменить количество. Когда пользователь будет готов, он отправит форму. Я хочу получать все представленные данные через phpmailer.

У меня нет проблем с получением текстовых полей через phpmailer. У меня проблема с опциями выбора. Я не могу понять, как кодировать то, что я ранее описал. Мне удалось собрать код, который я выкладываю здесь (скопировать-вставить и изменить другие коды, которые я нашел в Интернете), но это не то, что я хочу, и, кроме того, он отправляет мне только один из выбранных вариантов.

Может ли кто-нибудь помочь мне решить эту корзину с помощью выпадающего меню? Даже намек будет лучше, чем ничего. Я действительно застрял.

Буду очень признателен за вашу помощь.

Заранее извините, если допустил ошибки при задании вопроса.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamically add/remove items from list - JavaScript</title>
</head>
<body>
    <form action="get22result.php" name= "restults" method="post">
<div id="FormDivId">
    <div class="divtr" id="presUser_1">
        <div class="divtd"><select id="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option></select>
        </div>
        <div class="divtd"> <a href="javascript:void(0);" title="Add" onClick="userController.addFormDivId();">Add </a>
        <a href="javascript:void(0);" title="Delete this" onClick="userController.removeFormDivId('presUser_1');">Delete</a>
        </div>
    </div>
</div>
<div class= "container">
<div class="form-row">
<div class="col-sm">
    <div class="form-group col-md-6S">
      <label for= "fname">First Name</label>
      <input type="name" class="form-control" id="fname" name="fname">
    </div>
    <div class="form-group col-md-6S">
      <label for="lname">Last Name</label>
      <input type="name" class="form-control" id="lname" name="lname">
    </div>
    <div class="form-group col-md-6S">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" name="email">
    </div>
    </div>
    <div class="col-sm">
  <div class="form-group">
    <label for="Address">Address</label>
    <input type="text" class="form-control" id="eddress" placeholder="Street" name="address">
  </div>
  <div class="form-group">
    <label for="Address2">Address 2</label>
    <input type="text" class="form-control" id="address2" placeholder="Apartment or floor" name="address2">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="City">City</label>
      <input type="text" class="form-control" id="city" name="city">
    </div>
    <div class="form-group col-md-2">
      <label for="Zip">Zip</label>
      <input type="text" class="form-control" id="zip" name="zip">
    </div>
  </div>
  </div>
</div>
<br> 
<button class="submit" id="submit" name="submit">Submit</button>
</form>
<script> var userController = {
    id: 2,
    addFormDivId: function () {
        var newdiv = document.createElement('div');
        var divIdName = 'presUser_' + this.id;
        newdiv.setAttribute('id', divIdName);
        newdiv.className = "divtr";
        newdiv.innerHTML = '<div class="divtd"> ' +
        '<select id="cars">'+
        '<option value="volvo">Volvo</option>'+
        '<option value="saab">Saab</option>'+
        '<option value="mercedes">Mercedes</option>'+
        ' <option value="audi">Audi</option></select>' +
            '<div class="divtd"> <a href="javascript:void(0);" title="Add" onClick="userController.addFormDivId();">Add</a> ' +
            '<a href="javascript:void(0);" title="Delete this" onClick="userController.removeFormDivId(' + "'" + divIdName + "'" + ');">Delete</a>' +
            '</div>';
        document.getElementById("FormDivId").appendChild(newdiv);
        this.id = this.id + 1;
        console.log(this.id)
    },
    removeFormDivId: function (id) {
        document.getElementById(id).remove();
    }
}</script>
</body>
</html>
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
if(isset($_POST['submit'])){
    $cars=$_POST['cars'];
    $fname=$_POST['fname'];
    $lname=$_POST['lname'];
    $email=$_POST['email'];
    $address=$_POST['address'];
    $address2=$_POST['address2'];
    $city=$_POST['city'];
    $zip=$_POST['zip'];
require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';
$mail = new PHPMailer(true);
try {
    $mail->SMTPDebug = 0;                                     
    $mail->isSMTP();                                            
    $mail->Host       = 'smtp.gmail.com';                       
    $mail->SMTPAuth   = true;                                   
    $mail->Username   = '';                     
    $mail->Password   = ;                               
    $mail->SMTPSecure = 'tls';        
    $mail->Port       = 587;                                   
    $mail->setFrom('');
    $mail->addAddress('');        
    $mail->isHTML(true);                                  
    $mail->Body = "$cars $fname $lname $email $address $address2 $city $zip";
    $mail->send();
    echo 'Message has been sent';
} 
catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}}
else{
    echo "Message not sent";
}
?>
...