php - 根据所选 div 提交颜色

Question

这是我到目前为止所拥有的 - JSFiddle

我想将表单中的数据提交到数据库，并且想知道是否有任何方法可以使用代码根据用户选择的颜色提交所选的注释颜色。

我知道如何使用 $_POST['x']; 以及如何从我不确定的单击颜色 div 中获取数据。任何帮助都会很棒!

$(document).ready(function() {
  /* Listening for keyup events on fields of the "Add a note" form: */
  $('.pr-body,.pr-author').on('keyup', function(e) {
    if (!this.preview)
      this.preview = $('.previewNote');

    /* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
    this.preview.find($(this).attr('class').replace('pr-', '.')).html($(this).val().replace(/<[^>]+>/ig, ''));
  });

  /* Changing the color of the preview note: */
  $('.color').on('click', function() {
    $('.previewNote').removeClass('yellow blue pink').addClass($(this).attr('class').replace('color', ''));
  });
});

.note-wrapper {
  position: relative;
  height: 150px;
  width: 150px;
  float: left;
  margin: 5px;
}
.note {
  height: 150px;
  padding: 5px;
  width: 150px;
  overflow: hidden;
  font-family: Trebuchet MS, Tahoma, Myriad Pro, Arial, Verdana, sans-serif;
  font-size: 18px;
  -moz-box-shadow: 2px 2px 0 #333;
  -webkit-box-shadow: 2px 2px 0 #333;
  box-shadow: 2px 2px 0 #333;
}
.pink {
  background-color: #ff99ff;
  border: 1px solid #e589e5;
}
.yellow {
  background-color: #FDFB8C;
  border: 1px solid #DEDC65;
}
.blue {
  background-color: #A6E3FC;
  border: 1px solid #75C5E7;
}
.author {
  bottom: 5px;
  color: #666666;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  position: absolute;
  right: 8px;
}
.note-form label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 3px;
}
.note-form textarea,
.note-form input[type=text] {
  background-color: #FCFCFC;
  border: 1px solid #AAAAAA;
  font-family: Arial, Verdana, sans-serif;
  font-size: 16px;
  height: 60px;
  padding: 5px;
  width: 300px;
  margin-bottom: 10px;
}
.note-form input[type=text] {
  height: auto;
}
.color {
  /* The color swatches in the form: */
  cursor: pointer;
  float: left;
  height: 10px;
  margin: 0 5px 0 0;
  width: 10px;
}
#note-submit {
  margin: 20px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="note-wrapper">
  <div id="previewNote" class="previewNote note yellow" style="left:0;top:65px;z-index:1">
    <div class="body"></div>
    <div class="author"></div>
    <span class="data"></span>
  </div>
</div>


<form action="post.php" method="post" id="note-form" class="note-form">

  <label for="note-body">Text of the note</label>
  <textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>

  <label for="note-name">Your name</label>
  <input type="text" name="note-name" id="note-name" class="pr-author" value="" />

  <label>Color</label>
  <!-- Clicking one of the divs changes the color of the preview -->
  <div class="color yellow"></div>
  <div class="color blue"></div>
  <div class="color pink"></div>

  <button id="note-submit" class="remodal-confirm">Submit</button>
</form>

Answer 1

1. 添加一个名为 color 的隐藏输入。
2. 单击颜色时，更新您选择作为表单隐藏输入值的颜色的颜色值(如注释 .css 中的指针所示，将返回 RGB 而不是十六进制)。
3. 提交后，您就有了选择的颜色 - 在服务器端，您可以像任何其他字符串一样使用输入名称访问颜色值

更新了 fiddle https://jsfiddle.net/5erjuo7o/

注意:添加隐藏属性

<input name="note-color" hidden type="text"/><!-- to hide from view of the form-->