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

添加名称为color的隐藏输入。
点击颜色时，将您选择的颜色的颜色值（如注释.css中的指针输出将返回RGB而不是十六进制）更新为表单的隐藏输入。
在提交时，您拥有自己选择的颜色 - 在服务器端，您可以使用输入名称访问颜色值，就像任何其他字符串一样

更新了小提琴https://jsfiddle.net/5erjuo7o/

注意：将隐藏属性添加到

{{1}}

根据所选的div提交颜色

1 个答案: