<?php

	
	
	if(isset($_POST['verrou']) && $_POST['verrou'] == "ok")	
	{	
		echo "plouf";
	}
	
/*<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>*/

?>

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


</head>
 
<body align="center">
<div align="center">
<h1>Jquery Form Submit Demo</h1>
 
<form name="myForm" id="testForm" method="POST" action="exo01.php">
<input type="hidden" name="verrou" id="verrou" value="">
UserName: <input type="text" name="user" value="test" /> <br/>
Password: <input type="password" name="password" value="test"/> <br/>
</form>
 
<br/>
<input type="button" id="submit1" value="Submit by Form ID" />
<input type="button" id="submit2" value="Submit by Form Name" />
<input type="button" id="submit3" value="Submit by Form Index" />
<input type="button" id="submit4" value="Submit with Event Handler" />
 
</div>
</body>
<script>
$(document).ready(function()
{


    $("#submit1").click(function()
    {
		document.getElementById('verrou').value = "ok";
			
	/*	$("#dialog").dialog({
				autoOpen: false
			});
			
			$("#dialog").dialog("open");
			
	
	$("#modal_dialog").dialog({
            title: "jQuery Modal Dialog Popup",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });*/
	
	
	$( "#basicModal" ).dialog({
        modal: true,
        title: "Are you sure?",
        buttons: {
            "YES": function() {
                window.open("http://codeofaninja.com/", '_blank');
            },
            "NO": function() {
                $( this ).dialog( "close" );
            }
        }
    });
	
/*	$( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });*/
	
       // $("#testForm").submit();
 
    });
    $("#submit2").click(function()
    {
        $("form[name='myForm']").submit(); 
    });
    $("#submit3").click(function()
    {
        $("form:first").submit();
 
    });
 
    $("#submit4").click(function()
    {
        $("#testForm").submit(function()
        {
         alert('Form is submitting');
         return true;
        });     
        $("#testForm").submit(); //invoke form submission
 
    });
});
</script>


<div id="basicModal" style="display: none">
    Go to codeofaninja.com?
</div>

<div id="modal_dialog" style="display: none">
    This is a Modal Background popup
</div>

<div id="dialog" style="display: none" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<div id="dialog-message" style="display: none" title="Download complete">
  <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    Your files have downloaded successfully into the My Downloads folder.
  </p>
  <p>
    Currently using <b>36% of your storage space</b>.
  </p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
 

</html>