onClick function to change 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?

Just to be clear you want cat_color to only be the one you clicked? — bassxzero, May 22 '15 at 23:31
So you can select one from the cat_color list and one form the cat_icon list - the issue is no matter which one I select it takes the value from the last of each of those lists — PhpDude, May 22 '15 at 23:35
I can push the info if I change it from a `hidden` to a `radio` input but I have no idea on how to maybe turn a radio selection into what looks like my div class? — PhpDude, May 22 '15 at 23:38
You need to have only one hidden field for each property and update its value in the onclick method. — Tony the Tech, May 22 '15 at 23:39
@TonytheTech I am not sure what you mean, could you take a snippet from my code and show me an example maybe with the `cat_colors` ? — PhpDude, May 22 '15 at 23:41
@phpcoder - Please describe how you are inspecting the data, i.e., on client or server side? Using a common name for your inputs, like cat_colors, shouldn't a problem. — Yogi, May 22 '15 at 23:48
@phpcoder take a look at this http://jsbin.com/jibaxakufe/1/edit?html,css,output — bassxzero, May 22 '15 at 23:51
I just tested the form and it sends all the data. It's okay to have multiple inputs, including hidden type, all with the same name. However, if your backend is PHP then you might need to add brackets to decode on the server side. See this post: [HTML input arrays](http://stackoverflow.com/questions/1010941/html-input-arrays) — Yogi, May 23 '15 at 00:26

score 0 · Accepted Answer · answered May 22 '15 at 23:50

0

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

answered May 22 '15 at 23:50

Tony the Tech

570
6
16

But how will it know which colour it is? – PhpDude May 23 '15 at 00:02
I see it takes it form the onclick – PhpDude May 23 '15 at 00:03
Although that worked for the selection - it fails to now post the value still? – PhpDude May 23 '15 at 00:04

onClick function to change html

1 Answers1