Отправка формы зависят от цвета щелкнули

Question

У меня есть форма, которая объявляет пользователя об ошибке, предупреждении или новом содержимом на моем сайте. У меня три кнопки на классе 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> 

Answer 1

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

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

Есть несколько вопросов здесь. Сначала вы не практикуете DRY (Dont Repeat Yourself), что очень важно при создании функций. Создайте одну функцию, которая обрабатывает вашу функцию 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> 

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>