How to control css style with jquery ui slider?

Question

0.00/5 (No votes)

See more:

I tried to make code that control the number of form in my php page wiht jquery ui slider

This is my php code

XML

<body>
  <form id="form_number">
  <label for="minform">Choose number of form</label>
  <select name="minform" id="minform">
    <option>1</option>
    <option>2</option>
  </select>
</form>

<form action="" id="add_user" method="post">
<?php
		include "../include/form.php";
	 ?>
	</form>
	
	<form action="" name="add_user2" id="add_user2" method="post" style="visibility:hidden;">
	
	<?php
		include "../include/form.php";
	 ?>
	</form>
	
  </body>

this is the js slider code:

C#

$(function() {
    var select = $( "#minform" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 2,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( "#minform" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });

The form with id="add_user" is show in page by default..
How to make the id="add_user2" visible in the php page when the slider value=2??

I know method document.add_user2.visibility = "visible"; will change the state and make the form with id="add_user2" appear,,but I still can't get it right..

Please help me and show me the way..

Posted 31-May-13 23:42pm

Taftazani

Updated 31-May-13 23:44pm

v3

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Taftazani · Accepted Answer · 2013-06-07T06:52:00

Finally I solve this :

in PHP code:

XML

<body>
<form action="" id="add_user" method="post">
     <?php
        include "../include/form.php";
     ?>
     <submit1>
     <input type="button"  id="submit1" class="submit" value="Masukkan Data"/>
     </submit1>
    </form>

    <form action="" name="add_user2" id="add_user2" method="post" style="display:none;">

    <?php
        include "../include/form.php";
     ?>
      <submit2>
     <input type="button"  id="submit1" class="submit" value="Masukkan Data"/>
     </submit2>
    </form>
</body>
</body>

js code:

$(function() {
    var select = $( "#minform" );
	var submit1 = document.getElementsByTagName("submit1");
	var submit2 = document.getElementsByTagName("submit2");
var slider = $( "<div id="slider"></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 2,
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      
	  if (ui.value == 1)
	  {
		document.add_user2.style.display = "none";
		$(submit1).css('display', 'block');
	  }
	  else
	  {
		document.add_user2.style.display = "block";
		$(submit1).css('display', 'none');
		$(submit2).css('display', 'block');
	  }
}
    });
	
    $( "#minform" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
	  if (this.selectedIndex + 1 == 1)
	  {
		document.add_user2.style.display = "none";
		$(submit1).css('display', 'block');
	  }
	  else
	  {
		document.add_user2.style.display = "block";
		$(submit1).css('display', 'none');
		$(submit2).css('display', 'block');
	  }
 });
  });

in the css I make submit1 and submit2 like this:

CSS

submit1{
      display: block;
}
submit2{
      display: none;
}

How to control css style with jquery ui slider?

1 solution

Solution 1

Add your solution here

Preview 0

How to control css style with jquery ui slider?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us