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

Question

我有通知用户我网站上的错误、警告或新内容的表格。我在 class ann-right 上有三个按钮，每个按钮都有自己的颜色。当我单击按钮时，class ann-left 上的按钮输入更改为颜色被单击。我想问的是，如何提交取决于所选颜色的表格。红色代表 "Error announcement"，绿色代表 "Warning announcement"，蓝色代表 "New announcement"。 Red = #D91E18 Green = #3FC380 Blue = #5BBBFF

  <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>

Answer 1

这里有几个问题。首先你没有练习 DRY（Dont Repeat Yourself），这在创建函数时非常重要。创建一个函数来处理您的 setColor 函数，并在实际单击的按钮上发送选定的颜色。完成后，您可以专注于 "submitting your form"。当您提交表单时，它通常希望您有一个类型为 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>

Answer 2

您可以使用一个隐藏的输入将公告类型传递给您的表单。当你正常提交的时候。

  <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>

announcement_post.php:

<?php

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

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

Answer 3

function color1() {
  document.getElementById("submit-post").style.backgroundColor = "#D91E18";
  sessionStorage.setItem('col1', "#D91E18");
  document.getElementById("hidden_field").value = 'error';
  submitform();
}

function color2() {
  document.getElementById("submit-post").style.backgroundColor = "#3FC380";
  sessionStorage.setItem('col2', "#3FC380");
  document.getElementById("hidden_field").value = 'warning';
  submitform();
}

function color3() {
  document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
  sessionStorage.setItem('col3', "#5BBBFF");
  document.getElementById("hidden_field").value = 'new';
  submitform();
}

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

function submitform() {
  var form = document.getElementById("ann");
  var data = new FormData(form);
  console.log(data);
  //var req = new XMLHttpRequest();
  //eq.send(data);
  form.submit();

}

#red {
  background: #D91E18;
}
#green {
  background: #3fc380;
}
#blue {
  background: #5bbbff;
}

<form method="post" id="ann">
  <div class="ann-left">

    <input id="announce-text" type="text" name="" placeholder="What's new?" />
    <input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post" />
    <input type="hidden" id="hidden_field" />
  </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>
</form>

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

Submitting form depend of color clicked

html

javascript

php

form-submit