3 Replies - 521 Views - Last Post: 12 September 2013 - 01:36 AM Rate Topic: -----

#1 dannybarh  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 19-February 11

How to get values from twitter bootstrap switch in my form

Posted 11 September 2013 - 08:16 AM

Hi all, am trying to use bootstrap switch in my form. Am at a lost as to how to get the value of
name="onoffswitch"
from that field and insert it into mysql db, here is my code...

div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <div class="onoffswitch-inner"></div>
        <div class="onoffswitch-switch"></div>
    </label>
</div>


and here is my css below :

.onoffswitch {
    position: relative; width: 89px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #F7F7F7; border-radius: 23px;
}

.onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "On";
    padding-left: 16px;
    background-color: #078DBA; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "Off";
    padding-right: 16px;
    background-color: #EEEEEE; color: #0D0C0C;
    text-align: right;
}

.onoffswitch-switch {
    width: 11px; margin: 6.5px;
    background: #FFFFFF;
    border: 2px solid #F7F7F7; border-radius: 23px;
    position: absolute; top: 0; bottom: 0; right: 61px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}



Is This A Good Question/Topic? 0
  • +

Replies To: How to get values from twitter bootstrap switch in my form

#2 Atspulgs  Icon User is offline

  • D.I.C Regular

Reputation: 68
  • View blog
  • Posts: 380
  • Joined: 29-July 09

Re: How to get values from twitter bootstrap switch in my form

Posted 11 September 2013 - 10:13 AM

Erm... So you want to use PHP to insert the value in the database? Well I guess since youre here :D/>
Do you want the value to be saved each time the switch is flicked or when some sort of form is submitted?

Could you explain your problem/intention a little more?

This post has been edited by Atspulgs: 11 September 2013 - 10:13 AM

Was This Post Helpful? 1
  • +
  • -

#3 dannybarh  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 19-February 11

Re: How to get values from twitter bootstrap switch in my form

Posted 12 September 2013 - 12:56 AM

Thank you for your comments Atspulgs. Yes time the each time the switch is flicked and when the form is submitted also. Since it will be used on different pages. Am very sorry for not explaining it this way. Thank you for your time.
Was This Post Helpful? 0
  • +
  • -

#4 Atspulgs  Icon User is offline

  • D.I.C Regular

Reputation: 68
  • View blog
  • Posts: 380
  • Joined: 29-July 09

Re: How to get values from twitter bootstrap switch in my form

Posted 12 September 2013 - 01:36 AM

Well then, to save it each time its flicked you will have to look into ajax.
Here or Here.

Then for the form submission you might want to look into some of these:
PHP Manual
W3Schools
D.I.C tut

For SQL part, i can suggest:
MySQL:
w3schools
PHP Manual
Mysqli for beginners
PDO:
PHP Manual
PDO tutorial
Another PDO tutorial

Those would be good starting points.
If you get into trouble, please do not hesitate and ask.
You can also ask us to check it out even if it works, you know to perhaps point out some security issues you may have, etc etc.
Tutorials will only show you how to handle it, most wont show you how to do it safely. But for now, lets concentrate on getting you into the art of form submission.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1