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

onClick函数改变html

1 个答案: