How to turn a hidden type input into a checkbox type input?

Question

This might sound stupid, but I need something like this. I have displayed, say, 10 skills on the webpage, each of which is a hidden input of a form. At the bottom there is an 'EDIT' button. On clicking that, I want checkboxes to appear next to each skillName so that the user can check/uncheck them and then submit the form.

my php code snippet right now is something like this:

<?php echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
        echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>

<input type="button" value="Edit" onClick="someFunction()">

What can i put instead of some function to achieve the required result? Also, if there is any other way I can implement the editing thing, please do tell.

Thanks in advance!

why are you using hidden inputs? why not just hide the checkboxes with css and then show them? — Pete
– Pete, Commented Jun 24, 2013 at 11:08
Oh Pete 7, if only I could accept your comment! I was a fool to include hidden type in the equation itself. Totally unnecessary. — GothamCityRises
– GothamCityRises, Commented Jun 24, 2013 at 18:55

Ke Vin · Accepted Answer · 2013-06-24 11:06:14Z

1

Give all inputs the class input_skill, like this:

echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select" class="input_skill">' . $userSkills[$x] . "</div>";

Then use this function to change their types:

<script type="text/javascript">
function ShowSkillCheckboxes() {
    var skills = document.getElementsByClassName("input_skill");
    for(var i=0; i<skills.length; i++)
        skills[i].setAttribute("type","checkbox");
}
</script>

Keep in mind that the special checked value which the elements get by becoming checkboxes will vanish once you transform the checkboxes back into hidden type inputs. Besides: hidden inputs do not display at all on the webpage. You can say they have 0x0 px dimensions. This means that upon clicking the Edit button, those checkboxes will pop out and extent your layout.

answered Jun 24, 2013 at 11:06

Ke Vin

2,0241 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alessandro Gabrielli Over a year ago

Can you please explain why that -1?

Alessandro Gabrielli Over a year ago

Didn't you gave -1 to my answer?

Alessandro Gabrielli Over a year ago

So the "critic" badge that you gained just around 40 minutes (same time of my -1) ago isn't for this ?

Ke Vin Over a year ago

stackoverflow.com/questions/17273907/…

GothamCityRises · Accepted Answer · 2013-06-24 11:53:38Z

Thanks for the input guys, but I found a way around it. And apologies as well, since I ended up NOT using the hidden input at all. If any of you are interested, this function should do the trick:

      function editSkills()
        {
            var skills = document.getElementsByClassName("skillName");
            for(var i=0;i<skills.length;i++)
            {
                var value = skills[i].innerHTML;
                skills[i].innerHTML = '<input type="checkbox" checked name="skill[]" value="' + value + '" title="Toggle Selection">' + value;
            }
            document.getElementById('EditOrApply').innerHTML='<input type="submit" value="Apply Changes">';
        }

That final line converts the 'Edit' to the 'Submit' button for the form.

Alessandro Gabrielli · Accepted Answer · 2013-06-24 12:34:48Z

0

the -1 he gave me is the usual way to act of greedy and unfair people. Probably he did it like the users before have done with him (have taken advantage of his low reputation). Anyway I want to underline this not for revenge,but to let the users to valutate the answers in an fair way

Something like this? jsfiddle

$userSkills = array('pasta','maccheroni','pizza');
echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
        echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>

<input type="button" value="Edit" onClick="$('input:hidden').attr('type','checkbox');">

you need jquery (<script src="http://code.jquery.com/jquery-1.9.1.js"></script>)

FULL JAVASCRIPT

<input type="button" value="Edit" onClick="show(document.getElementsByTagName('input'))">

<script>
function show(val){
    for(i=0;i<val.length-1;i++){
            if(val[i].type=='hidden'){
                val[i].type='checkbox';
            }
        }
    }
</script>

edited Jun 24, 2013 at 12:34

answered Jun 24, 2013 at 11:10

Alessandro Gabrielli

8926 silver badges7 bronze badges

3 Comments

Alessandro Gabrielli Over a year ago

Explain -1 please, if you are able to do it

GothamCityRises Over a year ago

Thanks, Your method seems to work fine too. But I didn't want to add jQuery otherwise I would've used your way.

Alessandro Gabrielli Over a year ago

@GothamCityRises No problems, if you will need it, I also added the pure js way

Collectives™ on Stack Overflow

How to turn a hidden type input into a checkbox type input?

3 Answers 3

4 Comments

Comments

the -1 he gave me is the usual way to act of greedy and unfair people. Probably he did it like the users before have done with him (have taken advantage of his low reputation). Anyway I want to underline this not for revenge,but to let the users to valutate the answers in an fair way

FULL JAVASCRIPT

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

the -1 he gave me is the usual way to act of greedy and unfair people. Probably he did it like the users before have done with him (have taken advantage of his low reputation). Anyway I want to underline this not for revenge,but to let the users to valutate the answers in an fair way

FULL JAVASCRIPT

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related