Div box as dynamic form element

JavaScript
1

I want to make a large box into a form element. When the box is selected it should be submitted to the form. How do I change a div into a form element?

2

The other way around. You make the form element label into the box.

1 Like
3

I want the border to change colors when the div is selected. This is what I have so far:

Continue

$(document).ready(function(){
$(“.tog”).click(function(){
var atag = $(this);
var hiddenInput = atag.find(‘input[type=hidden]’);
atag.removeClass(“box”).addClass(“select-box”);
//alert(hiddenInput.val());
});
});

.box {
height: 400px;
width: 256px;
border-radius: 10px;
border: thin solid #86939e;
}

.select-box {
height: 400px;
width: 256px;
border-radius: 10px;
border: thin solid #7dc855;
}

4

Not all of my code showed up. Here is the HTML:

<form action="" method="get">

<a href="#" class="tog"><div id="left-box" class="col-sm-4 box"><input type="hidden" name="hid" value="val01" /></div></a>

 <a href="#" class="tog"><div id="center-box" class="col-sm-4 box"><input type="hidden" name="hid" value="val02" /></div></a>

  <a href="#" class="tog"><div id="right-box" class="col-sm-4 box"><input type="hidden" name="hid" value="val03" /></div> </a>

<div class="clearfix"></div>

<button type="button" class="btn btn-success">Continue</button></div>

</form>
5

This is a rough example using checkboxes that appear as boxes.

6

You don’t need JS at all. If you just use a hidden checkbox its value will get submitted with the form anyway, and styles can be applied with the :checked pseudo-class.

CSS

#check {
    display: none;
}

.box {
    display: block;
    height: 400px;
    width: 256px;
    border-radius: 10px;
    border: thin solid #86939e;
}

#check:checked ~ .box {
    border: thin solid #7dc855;
}

HTML

<input type="checkbox" id="check" />
<label for="check" class="box"></label>

x-post

7

The checked pseudo class didn’t work for me.

8

It should work so long as you are not using an ancient browser.
Can you post the code you tried?
I have to go soon, but someone will have a look.

I have updated the codepen above to a slightly improved version.

9

This worked:

#check:checked + label{
    border: 2px solid #7dc855;
}
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.