Jump to content

javascript not working on bootstrap toggle buttons


jeff73230

Recommended Posts

Hi Everyone,
I'm trying in a bootstrap view to replace two dropdown lists (yes/no) by two toggle checkboxes.
Here is the part of code used on the Edit View :
 

<div class="row">
	  <div class="col-md-3" style="">
		<div class="col-sm-12">
		<label for="d_c" class="col-sm-12 control-label">DC</label>
		</div>
	  </div>		
      <div class="col-md-3" style="" >
		<div class="col-sm-12">
		<label for="i_m_c" class="col-sm-12 control-label">IMC</label>
		</div>
	  </div>		
      <div class="col-md-6" style="" >
		<div class="col-sm-12">
		</div>
	  </div>		
      <div class="col-md-3" style="">
		<div class="col-sm-12">
		<input type="checkbox" name="test_1" id="test_1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
		</div>
	  </div>		
      <div class="col-md-3" style="">
		<div class="col-sm-12">
		<input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
		</div>
	  </div>
      <div class="col-md-6" style="" >
		<div class="col-sm-12">
		</div>
	  </div>		
	</div>

When i check the test_1, 'on' is stored in my (sql) database, when i check test_2, 'on' is also stored.
my problem is that i would like to be able to have test_2 toggle button visible only when test_1 toggle button is checked, and when test_1 is not checked to store 'NULL' as test_2 value. And when test_2 is checked to force test_1 value to be 'on', and force test_2 value to 'NULL' if test_1 is not checked.

ALL that I tried in javascript ended in a failure, so if there is anybody who can tell me how to get out of it, any help will be really appreciated.
(i have try following javascript (div names have been removed from code above as nothing worked as i want to))

<script type="text/javascript">
function Change() {

if ((document.getElementById('test_1').checked)) {
document.getElementById('madiv').style.display="block";
document.getElementById('madiv2').style.display="block";
}
else {
document.getElementById('madiv').style.display="none";
document.getElementById('madiv2').style.display="none";
}
}
</script>

And if anybody can tell me how to get the checkbox value on another bootstrap form (Modify View)... i'tried with value="<?php echo...; ?>" but it doesn't worked..

a big big thanks in advance.

(sorry for my poor english)

Have a nice day.

Jeff

Link to comment
Share on other sites

So right here's you're two tasks you need to do as you've stated (just to get my head around it)

  • Show and hide test_2 when test_1 is checked and unchecked respectively.
  • When test_1 is not checked, you want to pass test_2 as NULL

You seem to be using PHP so that makes it simple for me.

Your first issue is that you aren't calling your Javascript code. You're defining it as a function, but not calling it. It isn't running.
Add an onclick attribute to your test_1 checkboxes to get that JavaScript to run. You'll need to modify it as you've removed the div ids, but you seem to have that under control.

The second part is a joint issue between your HTML and your PHP.

You'll need to add some value attributes to your checkboxes, so some values are sent through on a form submission.
Then inside your PHP you'll just have a bit of logic:

  • if test_1 value is not set (unchecked checkboxes do not send a value)
    • set test_1 to no
    • set test_2 to NULL
  • else
    • set test_1 to test_1 value
    • if test_2 value is not set
      • set test_2 to no
    • else
      • set test_2 to test_2 value
  • Save test_1 and test_2 into database

Let me know if any of this is unclear.

Link to comment
Share on other sites

Hi Funce,

Sorry for late reply. Many Thanks for these ideas.

First point (show test_2 only when test_1 is checked) is working only when i click on test_1. My question was not precise enough as i would like to have Test_2 also not showed at form opening. 


 

      <div class="col-md-1" style="">
				<div class="col-sm-12">
				<input type="checkbox" name="test_1" id="test_1" onchange="DisplayToggle()" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
				</div>
	  </div>
	  <div class="col-md-1" style="" id="madiv2" style="display:none">
				<div class="col-sm-12">
				<input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
				</div>
	  </div>

I've tried as above style="display:none" but it doesn't worked... Test_2 toggle button is showed at form opening...

Concerning PHP code for value of test_1 and test_2, as i have to work on another project, i will have a look on it in a few weeks...

Many thanks again for help 😉

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...