Check out this code snippet:
HTML
<div id="resume-begin" style="background:#CCCCCC; display:inline-block;">
<img src="/images/plus-plus.png" style="display:inline;" class="trigger"/>
</div>
<div class="input-resume-data" style="display:none;">
<form id="project-form">
<label for="resume-create-name">Resume Project Name:</label>
<input type="text" id="resume-create-it" name="resume-create-it" class="text ui-widget-content ui-corner-all">
</form>
</div>
jQuery
<script>
$(document).ready(function() {
$('#resume-begin').click(function() {
('#resume-begin').hide();
$('.input-resume-data').dialog("open");
});
});
</script>
When the #resume-begin div is clicked, it triggers a UI Dialog box to open. Here's the jQuery code for it:
<script>
$(function() {
$( ".input-resume-data" ).dialog({
title: 'Name your Resume Project',
autoOpen: false,
resizable: false,
height: 450,
width: 380,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"Submit": function() {
var $this = $(this);
var string = $('#resume-create-it').serialize();
$.ajax({
url: 'functions.php',
type: 'POST',
data: string,
success: function(data){
alert("Project created!");
$this.dialog('close');
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
$( "#resume-begin" ).show( "slow", function() {
});
}
}
});
});
</script>
I want to save user input from the UI dialog to a database via PHP. Although the success message pops up after clicking Submit, the data doesn't get stored in the database.
In my PHP script, I fetch the submitted data like this:
//Sanitize the POST values
$resumeProjectname = $_POST['resume-create-it'];
I'm not sure if I'm handling and passing the data correctly through the "string" variable in jQuery or retrieving it properly in the PHP file.
Your assistance on this matter would be greatly valued. Feel free to ask any questions!
Thank you.