Javascript 提交表单取决于单击的颜色

我有一个表单，它会在我的网站上公布用户的错误、警告或新内容。我在class

annright

上有三个按钮，每个按钮都有自己的颜色。当我点击按钮时，点击了class

ann left

上更改为颜色的按钮输入。我想问的是，我如何提交表格取决于选择的颜色。红色表示“错误公告”，绿色表示“警告公告”，蓝色表示“新公告”<代码>红色=#D91E18

Green=#3FC380

Blue=#5bbff

  <div class="ann-left">
  <form method="post" id="ann">
     <input id="announce-text" type="text" name="" placeholder="What's new?"></input>
     <input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post"></input>
  </form>
  </div>
  <div class="ann-right">
   <button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
   <button id="green" onclick="color2()" class="tooltip color"title="Warning!" ></button>
   <button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
  </div>

<script>  
function color1() {
  document.getElementById("submit-post").style.backgroundColor = "#D91E18";
  sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
  document.getElementById("submit-post").style.backgroundColor = "#3FC380";
  sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
  document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
  sessionStorage.setItem('col3', "#5BBBFF");
}

color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));

function submitform() {
}
</script>

函数color1（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#D91E18”；
sessionStorage.setItem（'col1'，“#D91E18”）；
}
函数color2（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#3FC380”；
sessionStorage.setItem（'col2'，“#3FC380”）；
}
函数color3（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#5bbff”；
sessionStorage.setItem（'col3'，“#5bbff”）；
}
color1（sessionStorage.getItem（'col1'））；
color2（sessionStorage.getItem（'col2'））；
color3（sessionStorage.getItem（'col3'）；
函数submitform（）{
}

这里有几个问题。首先，你不是在练习干练（不要重复你自己），这在创建函数时非常重要。创建一个处理setColor函数的函数，并在实际单击的按钮上发送选定的颜色。完成后，您可以专注于“提交表单”。当您提交表单时，它通常希望您有一个类型为

submit

的按钮。因为你没有，它不会提交表格。我要做的是将您的

onsubmit（）

放在表单元素上，如下所示：

<div class="ann-left">
    <form method="post" id="ann" onsubmit="return submitform(this);">
        <input id="hidden-input" type="hidden" name="color_selected" value="">
        <input id="announce-text" type="text" name="" placeholder="What's new?">
        <input id="submit-post" type="submit" name=""  value="Post">
    </form>
</div>
<div class="ann-right">
    <button id="red" onclick="setColor('#D91E18')" class="tooltip color" title="Error!"></button>
    <button id="green" onclick="setColor('#3FC380')" class="tooltip color"title="Warning!" ></button>
    <button id="blue" onclick="setColor('#5BBBFF')" class="tooltip color" title="New!"></button>
</div>

<script>
    var $btn = document.getElementById("submit-post");
    var $hidden = document.getElementById("hidden-input");

    function setColor(color) {
        $btn.style.backgroundColor = color;
        $hidden.value = color;
    }

    function submitform(form) {
        alert(form.color_selected.value);
        return false;
    }
</script>

var$btn=document.getElementById（“提交帖子”）；
var$hidden=document.getElementById（“隐藏输入”）；
函数setColor（颜色）{
$btn.style.backgroundColor=颜色；
$hidden.value=颜色；
}
函数提交表单（表单）{
警报（所选表格颜色值）；
返回false；
}

您可以使用一个隐藏的输入将注释类型传递给表单。 然后你正常提交

  <div class="ann-left">
  <form method="post" action="announcement_post.php" id="ann">
     <input type="text" name="announcement_description" id="announce-text"  placeholder="What's new?">
     <input type="hidden" name="announcement_type" id="announcement_type">
     <input id="submit-post" type="submit" name="" value="Post">
  </form>
  </div>
  <div class="ann-right">
   <button id="red" onclick="color1()" class="tooltip color" title="Error!">&nbsp;</button>
   <button id="green" onclick="color2()" class="tooltip color"title="Warning!" >&nbsp;</button>
   <button id="blue" onclick="color3()" class="tooltip color" title="New!">&nbsp;</button>
  </div>

<script>  
function color1() {
  document.getElementById("submit-post").style.backgroundColor = "#D91E18";
   document.getElementById("announcement_type").value="Error announcement";
  sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
  document.getElementById("submit-post").style.backgroundColor = "#3FC380";
   document.getElementById("announcement_type").value="Warning announcement";  
  sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
  document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
   document.getElementById("announcement_type").value="New announcement";   
  sessionStorage.setItem('col3', "#5BBBFF");
}

color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));

</script>

函数color1（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#D91E18”；
document.getElementById（“公告类型”）.value=“错误公告”；
sessionStorage.setItem（'col1'，“#D91E18”）；
}
函数color2（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#3FC380”；
document.getElementById（“公告类型”）.value=“警告公告”；
sessionStorage.setItem（'col2'，“#3FC380”）；
}
函数color3（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#5bbff”；
document.getElementById（“公告类型”）.value=“新公告”；
sessionStorage.setItem（'col3'，“#5bbff”）；
}
color1（sessionStorage.getItem（'col1'））；
color2（sessionStorage.getItem（'col2'））；
color3（sessionStorage.getItem（'col3'）；

公告\u post.php:

<?php

if(!isset($_POST["announcement_type"])) die("Post was not sent.");

echo $_POST["announcement_type"];
echo '<br>';
echo $_POST["announcement_description"];

函数color1（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#D91E18”；
sessionStorage.setItem（'col1'，“#D91E18”）；
document.getElementById（“隐藏的_字段”）。值='error'；
submitform（）；
}
函数color2（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#3FC380”；
sessionStorage.setItem（'col2'，“#3FC380”）；
document.getElementById（“隐藏的_字段”）。值='warning'；
submitform（）；
}
函数color3（）{
document.getElementById（“提交帖子”）.style.backgroundColor=“#5bbff”；
sessionStorage.setItem（'col3'，“#5bbff”）；
document.getElementById（“隐藏的_字段”）.value='new'；
submitform（）；
}
color1（sessionStorage.getItem（'col1'））；
color2（sessionStorage.getItem（'col2'））；
color3（sessionStorage.getItem（'col3'）；
函数submitform（）{
var form=document.getElementById（“ann”）；
var数据=新表格数据（表格）；
控制台日志（数据）；
//var req=新的XMLHttpRequest（）；
//等式发送（数据）；
表单提交（）；
}
#红色{
背景#D91E18；
}
#绿色的{
背景：#3fc380；
}
#蓝色的{
背景#5bbff；
}

与php有什么关系？如果它不相关，你应该删除它的标签。问题是什么？你是否尝试过在每个函数中添加一个“submit”或将一个隐藏字段的值设置为你想要的值？“我如何提交表单取决于所选的颜色”-哦，我知道这与php有什么关系。你想把它们传递给php，对吗？如果是这样，那么问题既不清楚又太宽泛。如果我理解了问题，您想根据所选颜色提交到其他页面吗？如果是这样，您可以在颜色选择上使用javascript更改表单的操作。我觉得问题远不止这些。我正在干练，我正在使用这个
函数color1（col）{document.getElementById（“submit post”）.style.backgroundColor=col；sessionStorage.setItem（'col1'，col）；}color1（sessionStorage.getItem（'col1'）