onClick函數更改html

Question

我有一個表單允許一些選項來選擇一種顏色和圖標，這取決於正在構建的類別，我發現問題發佈在我需要的所有內容中，但不是我選擇的內容，我有一些隱藏的字段，但它似乎只是從輸入中取出最後一個，而不是從我選擇的那個中取出值。

<!-- FORM TO DESIGN & CREATE A CATEGORY --> 

    <form action="actions/add_cat.php" method="post" id="rtf" name=""> 

     <input type="text" name="cat_title" id="cat_title" required="required" placeholder="Category Title"/><br /><br /> 

    <div class="catOptionsMenu"> 

     <!-- COLOUR PICKER FOR CATEGORY HEADERS --> 

     <div class="redSelect" onclick="button_click('#d31b26');"><input type="hidden" name="cat_color" value="#f9c04c" ></div> 
     <div class="yellowSelect" onclick="button_click('#f9c04c');" ><input type="hidden" name="cat_color" value="#f9c04c" ></div> 
     <div class="blueSelect" onclick="button_click('#72bce9');"><input type="hidden" name="cat_color" value="#72bce9" ></div> 
     <div class="pinkSelect" onclick="button_click('#ec9292');"><input type="hidden" name="cat_color" value="#ec9292"></div> 
     <div class="greenSelect" onclick="button_click('#b7d04e');"><input type="hidden" name="cat_color" value="#b7d04e" ></div> 
     <div class="slateSelect" onclick="button_click('#637a91');"><input type="hidden" name="cat_color" value="#637a91" ></div> 
     <div class="purpleSelect" onclick="button_click('#AEA8D3');"><input type="hidden" name="cat_color" value="#AEA8D3" ></div> 
     <br><br> 


     <!-- ICON PICKER FOR CATEGORY HEADERS --> 

     <div class="iconSelect" onclick="button_click_icon1()"> 
      <input type="hidden" name="cat_icon" value='<i class="fa fa-phone" style="font-size: 2em;"></i>' /><i class='fa fa-phone' style='font-size: 2em;'></i> 
     </div> 

     <div class="iconSelect" onclick="button_click_icon2()"> 
      <input type="hidden" name="cat_icon" value='<i class="fa fa-graduation-cap" style="font-size: 2em;"></i>'><i class='fa fa-graduation-cap' style='font-size: 2em;'></i> 
     </div> 

     <div class="iconSelect" onclick="button_click_icon3()"> 
      <input type="hidden" name="cat_icon" value='<i class="fa fa-users" style="font-size: 2em;"></i>'><i class='fa fa-users' style='font-size: 2em;'></i> 
     </div> 

     <div class="iconSelect" onclick="button_click_icon4()"> 
      <input type="hidden" name="cat_icon" value='<i class="fa fa-question-circle" style="font-size: 2em;"></i>'><i class='fa fa-file-text' style='font-size: 2em;'></i> 
     </div> 

     <div class="iconSelect" onclick="button_click_icon5()"> 
      <input type="hidden" name="cat_icon" value='<i class="fa fa-question-circle" style="font-size: 2em;"></i>'><i class='fa fa-question-circle' style='font-size: 2em;'></i> 
     </div> 

    </div> 
    <br><br> 


    <!-- CATEGORY HEADER DEMO BUILD VIEW --> 

    <div class="indexBox"> 
     <div class="indexBoxHeader" id="box"> 
      <siv id="icon"></div> 
     <div class="indexBoxFooter"> 
      <div class='printchatbox' id='printchatbox'></div> 
     </div> 
    </div> 
    <br><br> 


    <input onclick="formsubmit()" type="submit" value="Create Category" name="submit"/> 

這裏有一些內聯函數來改變顏色和圖標來查看是什麼樣子：

<!-- INLINE JS TO HANDLE THE CATEGORY BUILDER OPTIONS--> 

<script type="text/javascript"> 

var inputBox = document.getElementById('cat_title'); 

inputBox.onkeyup = function(){ 
    document.getElementById('printchatbox').innerHTML = inputBox.value; 
} 


function button_click(color){ 
    document.getElementById("box").style.backgroundColor=color; 
} 

function button_click_icon1() { 
    document.getElementById("icon").innerHTML = "<i class='fa fa-phone' style='font-size: 2em;'</i>"; 
} 

function button_click_icon2() { 
    document.getElementById("icon").innerHTML = "<i class='fa fa-graduation-cap' style='font-size: 2em;'</i>"; 
} 

function button_click_icon3() { 
    document.getElementById("icon").innerHTML = "<i class='fa fa-users' style='font-size: 2em;'</i>"; 
} 

function button_click_icon4() { 
    document.getElementById("icon").innerHTML = "<i class='fa fa-file-text' style='font-size: 2em;'</i>"; 
} 

function button_click_icon5() { 
    document.getElementById("icon").innerHTML = "<i class='fa fa-question-circle' style='font-size: 2em;'</i>"; 
} 

</script> 

這不是做的最好的方式，但我主要擔心的是的發佈和取得最後的值，而不是我選擇的那個？

Answer 1

所以從顏色部分，例如，你只需要這些一個：

<input type="hidden" name="cat_color" > 

並修改您的點擊功能來更新它的值：

function button_click(color){ 
    document.getElementById("box").style.backgroundColor=color; 
    document.forms[0].cat_color.value = color; 
}