クリックしたフォームの種類に応じた色をクリック

Question

私は自分のサイトでエラー、警告、または新しいコンテンツのユーザーを発表するフォームを持っています。私はクラスann-rightに3つのボタンがあり、各ボタンの色があります。ボタンをクリックすると、クラス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のタイプを渡すために隠された1つの入力を使用することができます。私は何だろうことのようなフォーム要素であなたのonsubmit()を置いています。 それからあなたはそれを正常に提出します。

<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（自分自身をやめてはいけません）を練習していません。これは、関数を作成するときに非常に重要です。 setColor関数を処理する1つの関数を作成し、クリックされた実際のボタンに選択した色を送信します。それが終わったら、「あなたのフォームを提出する」ことに集中することができます。フォームを送信すると、通常、タイプsubmitのbuttomが必要になります。あなたはそれを持っていないので、フォームを提出しません。

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