Response title
This is preview!
Move this topic
Div box as dynamic form element
in Using jQuery
•
6 years ago
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?
1
Replies(10)
Re: Div box as dynamic form element
6 years ago
Can you share a demo of what you are writing about?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Div box as dynamic form element
6 years ago
There would be 3 boxes and when one of the boxes is selected it would submit as a form element.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box {
height: 400px;
width: 256px;
border-radius: 10px;
border: thin solid #86939e;
}
Leave a comment on makamo66's reply
Re: Div box as dynamic form element
6 years ago
What would the server see? The empty contents of the div?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Div box as dynamic form element
6 years ago
I found out that I would have to use a hidden input. Now the question is how do I select the hidden input when I select the div?
Leave a comment on makamo66's reply
Re: Div box as dynamic form element
6 years ago
Leave a comment on jakecigar's reply
Re: Div box as dynamic form element
6 years ago
I want the border to change colors when the div is selected. This is what I have so far:
<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>
$(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;
}
Leave a comment on makamo66's reply
Re: Div box as dynamic form element
6 years ago
Leave a comment on jakecigar's reply
Re: Div box as dynamic form element
6 years ago
When I tried to use your code a radio button showed up and I don't want any buttons showing in my form.
Leave a comment on makamo66's reply
Leave a comment on makamo66's reply
Re: Div box as dynamic form element
6 years ago
The hidden radio in label is a trick everyone should know!
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to makamo66's question