Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  
  <script "text/javascript">
    $(function() {      
        $( "#dialogbox" ).dialog({
    
            autoOpen: false,
            modal: true,
            width: 'auto',
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
        
            buttons: {
                //This function handles passing in the form data generated by getdialogbox.php 
                'Submit' : function(){
                    $.ajax({
                        type: "POST",
                        url: "include/insertToDB.php",
                        data: $("#htmlform").serialize(),
                    
                        success: function(){
                            $("#htmlform").submit();
                        }
                    });
                
                    return false;
                
                    $(this).dialog('close');
                }
            }
        
        });
            
        $( "#opendialogbtn" ).click(function() {
            $( "#dialogbox" ).dialog( "open" );
            
        });
    });
  </script>
​
</head>
<body>
  
    
    <div id="dialogbox" title="Dialog box">
            <form id= 'htmlform' name= 'htmlform' method='post' action=''>
            <select class="controller">
                  <option></option>
                  <option>Disable Titans 1</option>
                  <option>Disable Titans 2</option>
                  <option>Disable Titans 3</option>
              </select> 
              <select class="titans">
                  <option></option>
                  <option>Oceanus</option>
                  <option>Hyperion</option>
                  <option>Atlas</option>
              </select> 
              <input type="text" class="userclass"/>
                            
            </form>
            </div>
            
            <!-- Passes serialized data from listbox to dialog box -->
            <input type="button" id="opendialogbtn" value='Open Dialog' onclick="passtophp(document.getElementById('selectItems'), 'dialogbox', 'include/getdialogbox.php')">
            
            
  <script>
  var $inputs = $('select.titans');
        var $controller = $('select.controller');
          $('select').change(function(){
            if($controller.val() !== ''){
              $inputs.prop('disabled', $(this).val() !== '');
              $inputs.val('');
            }
            else
            {
             $inputs.prop('disabled',false); 
            }
          });
  </script>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
potatofarmerpro
0viewers