onClick函数更改html

Question

I have a form which allows with some options to select a color and icon depending on the category that is being built, the issue I have found that it posts in everything I need but not what I am selecting, I have some hidden fields but it seems to just take the last one from the inputs instead of taking the vale from the one I select.

<!-- 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"/>

Here are some inline functions to change the colors and icons to view what it looks like:

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

It isn't the nicest way to do it but my main worry is that of the posting and taking the last values and not the one I select?

Answer 1

So from the colour section, for example, you only need one of these:

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

And modify your click function to update its value:

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