Question

我尝试创建一个具有3级动态下拉列表，将来的商品列表，将来可关闭的按钮列表的商品，将来的联系表格的订单。

想要工作的“步骤”是：

step 1: choose products of 3 level dynamic dropdown lists
step 2: click the “Add product to list”
step 3: the user can delete the product line IF he / she makes a mistake in the product details
step 4: insert contact information to contact form
step 5: click the submit button to send the product order with contact information to my email.

我发现的代码抛出了网站，我进行了一些更改：

function populate(s1, s2){ 
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  if(s1.value == "Vitamin C"){
    var optionArray = ["|", "100mg|100mg", "500mg|500mg", "1000mg|1000mg"];
  } else if(s1.value == "Good Fats"){
    var optionArray = ["|", "omega 3 500ng|omega 3 500ng", "omega 3 1000ng|omega 3 1000ng", "omega 3 2000ng|omega 3 2000ng"];
  } else if(s1.value == "Minerals"){
    var optionArray = ["|", "magnesium citrate|magnesium citrate", "magnesium sulfate|magnesium sulfate"];
  }

  for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption,value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }   
}

function myFunction() {
  document.getElementById("slct0").reset();
}

var numadded = 0;

function doReset() {}

function checkData() {}

function doAdd() {
  // Pick up data from the category and value input fields;
  // In my form these are named 'cat' and 'val'
  var catstr = document.getElementById("slct1").value;
  var valstr = document.getElementById("slct2").value;
  var quantstr = document.getElementById("slct3").value;

  // Create a regex that checks for decimal numbers with
  // optional fractions. The regex expression states that
  // 1. the whole string must match ^...$
  // 2. there must be one or more decimal digits.
  // 3. optional there is a decimal point character.
  // 4. there may be digits following the decimal point.
  // In Javascript, you create a RegExp object giving it
  // the pattern that it must check.
  // var numpattern = new RegExp("^[0-9]+\.?[0-9]*$");
  // Check that the "value" field matches the regex
  // if(!numpattern.test(valstr)) {
  //   alert("Non numeric data in values field");
  //   return;
  // }
  // The other pattern says a string of letters, digits, and spaces
  var catpattern = new RegExp("^[A-Za-z0-9 ]+$");
  if (!catpattern.test(catstr)) {
    alert("FIRST CHOOSE CATEGORY");
    return;
  }

  var valpattern = new RegExp("^[A-Za-z0-9 ]+$");
  if (!valpattern.test(valstr)) {
    alert("YOU NED TO CHOOSE PRODUCT");
    return;
  }

  var quantpattern = new RegExp("^[A-Za-z0-9 ]+$");
  if (!quantpattern.test(quantstr)) {
    alert("CHOOSE QUANTITY");
    return;
  }
  // If data looks ok, pick up references to the text areas; in
  // my page these had id values catlist and numlist
  var cats = document.getElementById("catlist");
  var nums = document.getElementById("numlist");
  var quant = document.getElementById("quantitylist");
  // Append text, inserting a new line character between
  // data sets.
  if (numadded > 0) {
    cats.value = cats.value + "\n";
    nums.value = nums.value + "\n";
    quant.value = quant.value + "\n";
  }

  var catOption = new Option(catstr, valstr);
  var numOption = new Option(valstr, valstr);
  var quantOption = new Option(quantstr, quantstr);
  numadded++;
  cats.appendChild(catOption);
  nums.appendChild(numOption);
  quant.appendChild(quantOption);
}

/* Get all elements with class="close" */
var closebtns = document.getElementsByClassName("close");
var i;

/* Loop through the elements, and hide the parent, when clicked on */
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 5px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
}
    
reset[type=button] {
    width: 30%;    
}

input[type=button] {
    width: 30%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #45a049;
}

div {
    border-radius: 0px;
    background-color: #fff;
    padding: 50px;
}

#list {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background: #bbb;
}

#list td, #list th {
    border: 1px solid #ddd;
    padding: 15px;
    
}

#list tr:nth-child(even){background-color: #f2f2f2;}

#list tr:hover {background-color: #ddd;}

#list th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
 
p.a { 
    word-spacing: 10px;;
}    
    
/* Add a light grey background color on hover */
ul li:hover {
  background-color: #eee;
}

/* Style the close button (span) */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {background: #bbb;}
    
    
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
    box-sizing: border-box;
}   
    
    
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
    
.slct0 {
    background: #bbb;       
}

<div>
  <form id="slct0" action="/action_page.php" onsubmit="(slct1, slct2, slct3); return false;">
<p class="a">CHOOSE CATEGORY</P>

     <select id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct3')">
        <option value=""></option>
        <option value="Vitamin C">Vitamin C</option>
        <option value="Good Fats">Good Fats</option>
        <option value="Minerals">Minerals</option>
    </select>  
    </p>
    <p></p>
    CHOOSE PRODUCT
    <select id="slct2" name="slct2"></select>             
   </p>
    <p>
        
        <option value="">CHOOSE CATEGORY</option>
        <select id="slct3" name="slct3">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
            <option value="32">32</option>
            <option value="33">33</option>
            <option value="34">34</option>
            <option value="35">35</option>
            <option value="36">36</option>
            <option value="37">37</option>
            <option value="38">38</option>
            <option value="39">39</option>
            <option value="40">40</option>
            <option value="41">41</option>
            <option value="42">42</option>
            <option value="43">43</option>
            <option value="44">44</option>
            <option value="45">45</option>
            <option value="46">46</option>
            <option value="47">47</option>
            <option value="48">48</option>
            <option value="49">49</option>
            <option value="50">50</option>
            <option value="51">51</option>
            <option value="52">52</option>
            <option value="53">53</option>
            <option value="54">54</option>
            <option value="55">55</option>
            <option value="56">56</option>
            <option value="57">57</option>
            <option value="58">58</option>
            <option value="59">59</option>
            <option value="60">60</option>
            <option value="61">61</option>
            <option value="62">62</option>
            <option value="63">63</option>
            <option value="64">64</option>
            <option value="65">65</option>
            <option value="66">66</option>
            <option value="67">67</option>
            <option value="68">68</option>
            <option value="69">69</option>
            <option value="70">70</option>
            <option value="71">71</option>
            <option value="72">72</option>
            <option value="73">73</option>
            <option value="74">74</option>
            <option value="75">75</option>
            <option value="76">76</option>
            <option value="77">77</option>
            <option value="78">78</option>
            <option value="79">79</option>
            <option value="80">80</option>
            <option value="81">81</option>
            <option value="82">82</option>
            <option value="83">83</option>
            <option value="84">84</option>
            <option value="85">85</option>
            <option value="86">86</option>
            <option value="87">87</option>
            <option value="88">88</option>
            <option value="89">89</option>
            <option value="90">90</option>
            <option value="91">91</option>
            <option value="92">92</option>
            <option value="93">93</option>
            <option value="94">94</option>
            <option value="95">95</option>
            <option value="96">96</option>
            <option value="97">97</option>
            <option value="98">98</option>
            <option value="99">99</option>
            <option value="100">100</option>
        </select>
    </p>
    
    <br><br><br>
    <input type="button" onmousedown="doAdd()" onmouseup="myFunction()" value="Add product to list">
    
    
</form>
</div>
    
    
    
<div>           
                    <h1>My List</h1>
                <br>
                <br>
                <table id="list" width="100%" align="center" border="0px">
                <tr>
                    <th colspan="5">CATEGORY</th>
                    <th colspan="35">PRODUCT</th>
                    <th colspan="35">QUANTITY</th>
                </tr>
                <tr>
                    <td colspan="5" id="catlist" style="width: 250px;" /></td>
                    
                    <td colspan="35" id="numlist" style="width: 250px;" /></td>
                    
                    <td colspan="5" id="quantitylist" style="width: 250px;" /></td>
                
               
                </table>
        </form>


<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

问题是我找不到解决方案以使列表与行项目列表和蚀刻行一起成为step3将来可关闭的按钮列表项目！最后找到一种解决方案，使联系人列表的提交按钮可以将带有联系人信息的产品列表发送到我的电子邮件中。

有人可以帮我吗？

Answer 1

表格解决方案

您在表中创建一个新列。请看下面。之后，您应该能够创建一个删除实际显示行的函数。

可能应该使用document.getElementById("myTable").deleteRow(0);-DOM属性。 W3 reference

请严格结束/开始标记。

<h1>My List</h1>
<br>
<br>
<table id="list" width="100%" align="center" border="0px">
 <tr>
  <th colspan="5">CATEGORY</th>
  <th colspan="35">PRODUCT</th>
  <th colspan="35">QUANTITY</th>
  <th colspan="35">Action</th>
 </tr>
 <tr>
  <td colspan="5" id="catlist" style="width: 250px;" /></td>
  <td colspan="35" id="numlist" style="width: 250px;" /></td>
  <td colspan="5" id="quantitylist" style="width: 250px;" /></td>
  <td colspan="5" id="deletelist" style="width: 250px;" /><a href="#" onClick="PutYourActionHere">Delete</a></td>
 </tr>
</table>

FORM解决方案

您已经直接转到此页面action_page.php。此页面上会发生什么情况？

<form id="slct0" action="/action_page.php" onsubmit="(slct1, slct2, slct3); return false;">

我从一个以前的项目中得到了这个。这可能对您有帮助。 $_POST[''];中的引用应与表单中的现有输入（具有“ id”-属性）相关联，以便能够检索。它们的名称应完全相同。 $ email只是将其转换为可以使用的变量。首先，我们在$formcontent中创建您将收到的消息。 \n的意思是“换行”。其余的应该可以自我解释。

<?php
//Input from fomr
$email = $_POST['email'];
$phone = $_POST['phone'];
$call = $_POST['call'];
$company = $_POST['company'];
$type = $_POST['type'];
$adress = $_POST['adress'];
$message = $_POST['message'];
$areacode = $_POST['areacode'];
$land = $_POST['land'];

//Create email from here and send it to receiver
$formcontent=" From: $email \n Firma: $company \n Navn: $name \n Adresse: $adress , $areacode \n Land: $land \n Telefon: $phone \n Ringes op: $call \n Type: $type \n Besked: \n $message \n Vedhæftede filer: \n $path_of_uploaded_file";
$recipient = "email to receive form";
$subject = "Message from Sender";
$mailheader = "Fra: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header('Location: http://www.myhomepage.com/thank_you.shtml');
?>

产品订单表格

1 个答案: