Форма отправки зависит от цвета, нажатого

У меня есть форма, которая объявляет пользователя об ошибке, предупреждении или новом контенте на моем сайте. У меня есть три кнопки в классе ann-right, и каждая кнопка имеет свой цвет. Когда я нажимаю кнопку, нажимается кнопка ввода в классе ann-left, измененная на цвет. Я хочу спросить, как мне отправить форму в зависимости от выбранного цвета. Красный - для "Объявления об ошибке", Зеленый - для "Предупреждения", а синий - для "Нового объявления". 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>
Author: Funk Forty Niner, 2017-01-03
Source

3 answers

Вы можете использовать один скрытый ввод, чтобы передать тип уведомления в вашу форму. Затем вы отправляете его в обычном режиме.

  <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"];
 3
Author: Antonio Alexandre, 2017-01-03 15:53:47

Здесь есть пара проблем. Во-первых, вы не практикуете СУХО (не повторяйтесь), что очень важно при создании функций. Создайте одну функцию, которая обрабатывает вашу функцию 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>
 3
Author: CodeGodie, 2017-01-03 15:51:14 

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>
 0
Author: happymacarts, 2017-01-03 16:24:56