Div box as dynamic form element

Discussion in 'JavaScript' started by makamo66, Jun 2, 2016.

0
  1. #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?
     
    makamo66, Jun 2, 2016 IP
  2. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    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>

<script>
$(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());      
    });
});
</script>
<style>
.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;
}</style>
    Code (markup):
     
    Last edited by a moderator: Jun 2, 2016
    makamo66, Jun 2, 2016 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,821
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #3
    Have a hidden form element that is given the appropriate value when a box is clicked. The box is then essentially a button.

    Having looked through your code I'm not really sure what you are trying to acheive. Changing the border if something is clicked doesn't need a form - do you need to record the fact that someone has clicked - does it mean something further down the line?
     
    sarahk, Jun 2, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    That code is pure and utter gibberish. How about you try to explain what you're trying to do instead?
     
    PoPSiCLe, Jun 2, 2016 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,821
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #5
    Here's what I think he's trying to do... https://jsfiddle.net/5nwpvky8/
    but without a real life business problem to solve I'm just reading between the lines.
     
    sarahk, Jun 2, 2016 IP
  6. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #6
    You could just style a simple form checkbox:

    
<input type="checkbox" id="option1" name="option1">
<label for="option1">Option 1</label>

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  width: 256px;
  height: 400px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  background: url(check.gif) left top no-repeat;
  cursor: pointer;
}
input[type="checkbox"]:checked + label {
  background: url(check.gif) -256px top no-repeat;
}
    Code (markup):
    You should check css rules to fit your design.
     
    Blizzardofozz, Jun 2, 2016 IP