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>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input type="button" id="order" value="Order" />
  <div style="display:none;">
  <div id="orderform" class="dialog" title="Order now">
                <div id="ordertab" class="uitab">
                    <ul>
                        <li><a href="#ordertab2" class="tabtext">Customer Info</a></li>
                    </ul>
                    <div id="ordertab2" class="tab">
                        <div class="container">
                            <form id="customerinfo" action="#">
                            <table>
                                <tr>
                                    <td>
                                        <label class="csl">
                                            FirstName</label>
                                    </td>
                                    <td>
                                        <input type="text" class="cssb" name="FirstName" />
                                    </td>
                                </tr>
                            </table>
                            <input type="submit" id="orderit" />
                            </form>
                        </div>
                    </div>                    
                </div>
            </div>
  </div>
</body>
</html>
​
​
​
 
$("#orderform").dialog({ width: 500, modal: false,   draggable: true, autoOpen: false });
​
$(".uitab").tabs();
​
$("#customerinfo").validate({
        rules: {
            FirstName: {
                required: true
            }
        },
        messages: {
            FirstName: "Please enter your firstname"
        }
    });
$("#order").bind("click", function(){ 
  $("#orderform").dialog("open");
});
    
    $("#orderit").button();
​
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers