Jump to content
jeff73230

javascript not working on bootstrap toggle buttons

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

Share this post


Link to post
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.

Share this post


Link to post
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 😉

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...