您好我在上周尝试添加新配方以及对话框中的成分，任何人都可以帮忙解决这个问题。我真的很新的PHP和ajax，并且真的很难发布与表格其余部分一起输入的成分
<!doctype html>
<?php include('php/dbconnection.php'); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" type="text/css" href="style/addrecipe.css"/>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<!--<link rel="stylesheet" href="../../themes/base/styleEmerx.css">-->
<script src="../../jquery-1.10.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".datepicker").live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
</script>
<script type="text/javascript">
var num=0;
var fieldCount = 1;
function addField(){
makefields(fieldCount++);
}
function frmField(fieldId){
var remThis = document.getElementById(fieldId);
remThis.parentNode.removeChild(remThis);
}
function makefields(){
var fields="";
fields+="<p><label>Ingredient:</label><input name=\"Description"+fieldCount+"\" type=\"text\" class=\"text-long\"/>";
fields+="<label>Amount:</label><input name=\"Amount"+fieldCount+"\" type=\"text\" class=\"text-long\" />";
fields+="<label>Measure:</label><input name=\"UnitOfMeasure"+fieldCount+"\" type=\"text\" class=\"text-long\" />";
fields+='<input type="button" value="remove" onClick="frmField(\'fieldCnt'+fieldCount+'\')" /></p>';
var newDiv = document.createElement('div');
newDiv.innerHTML = fields;
newDiv.setAttribute('id', 'fieldCnt' + fieldCount);
document.getElementById('fieldContainer').appendChild(newDiv);
}
</script>
<script>
$(function() {
var ingredient = $( "Description" ),
amount = $( "Amount" ),
measure = $( "UnitOfMeasure" ),
allFields = $( [] ).add( ingredient ).add( amount ).add( measure ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 700,
width: 750,
modal: true,
buttons: {
"Add ingredients": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( ingredient, "Description", 3, 20 );
bValid = bValid && checkLength( amount, "Amount", 2, 4 );
bValid = bValid && checkLength( measure, "UnitOfMeasure", 3, 16 );
bValid = bValid && checkRegexp( ingredient, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp( amount, /^[+]?[0-9]*\.?[0-9]+$/, "Qty field allows only Positive numbers");
bValid = bValid && checkRegexp( measure, /^([0-10000a-zA-Z])+$/, "Measure field only allow : a-z 0-10000" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + ingredient.val() + "</td>" +
"<td>" + amount.val() + "</td>" +
"<td>" + measure.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-ingredients" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id='container'>
<div class='grd12mainheading'><img src="img\bannerfans_10360955.jpg"
alt="" title = "" height = "100">
</div>
<div class='clear'></div>
<nav>
<ul>
<li class='rmenu'><a href="Index.php">Home</a></li>
<li><a href="Recipes.php">Recipes</a></li>
<li><a href="Nutrition.php">Nutrition</a></li>
<li><a href="Ingredients.php">Key Ingredients</a></li>
<li><a class='current' href="#">My Recipes</a></li>
</ul>
</nav>
<div class='clear'></div>
<div class = 'grd12'>
</div>
<div class = 'clear'>
<div id="dialog-form" title="Add ingredients">
<p class="validateTips">All form fields are required.</p>
<form id ="fileupload" name="frmaddservice" enctype="multipart/form-data" action="YourRecipes.php" method="GET" class="jNice" onsubmit="return checkaddservice();">
<fieldset>
<div id="fields">
<p><label></label>
</p>
<div id="fieldContainer">
<div id="fieldCnt1">
<p>
<label>Ingredient:</label>
<input type="text" name="Description" id="Description" size ="20" class="text ui-widget-content ui-corner-all" />
<label>Amount:</label>
<input type="text" name="Amount" id="Amount" value="" class="text ui-widget-content ui-corner-all"/>
<label>Measure:</label>
<input "type="text" name="UnitOfMeasure" id="UnitOfMeasure" value="" class="text ui-widget-content ui-corner-all"/>
<input type="button" value="remove" onClick="frmField('fieldCnt1') " />
</p>
</div>
</div>
<input type="hidden" name="num" value="1"/><a href="#" onclick="addField()"></a>
<input type="button" value="Add " onClick="addField()"/>
</div><label></label>
</fieldset>
</form>
</div>
<div class='clear'></div>
<div class = 'grd12'>
<form id = "Upload" enctype="multipart/form-data" action="transcript.php" method="POST">
<fieldset>
<article>
<ul>
<h2>Add a New Recipe</h2>
<br>
<label>RecipeTitle:</label> <input type="text" name="RecipeName" placeholder='Enter Recipe Name' required><br><br>
<label>Image:</label><input type="file" name="Image"><br><br>
<label> Category:</label><br><br><?php require_once('php/selectCategory.php'); ?> <br><br>
<label> TimeToPrepare:</label><input type="text" name="TimeToPrepare" placeholder='eg 30 mins' require><br><br>
<label>SevingSize:</label><input type="text" name="NoOfServings" placeholder='Eg 6' required><br><br>
<label>Author:</label><input type="text" name="Author" placeholder='eg Emer McMahon' required><br><br>
<button id="create-ingredients">Specify Ingredients</button><br><br>
Enter Instructions, hit return after each instruction<br><br><textarea name="Instructions" placeholder='Eg Dice the meat' required></textarea><br><br>
Comments:<br><br><textarea name= "Comments" placeholder='eg other alternative id to add:' ></textarea>
<input name="Submit" type="Submit" value="Add Recipe" />
</ul>
</article>
</fieldset>
</form>
</div>
<div class='clear'></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Emer's Recipe Application</title>
<meta name="description" content="Recpipes,food,cooking" />
<link rel="stylesheet" type="text/css" href="style/styleEmerx.css"/>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700italic' rel='stylesheet' type='style/css'>
</head>
<body>
<div id='container'>
<div class='grd12mainheading'><img src="img\bannerfans_10360955.jpg"
alt="" title = "" height = "100">
</div>
<div class='clear'></div>
<nav>
<ul>
<li class='rmenu'><a class='current' href="#">Home</a></li>
<li><a href="Recipes.php">Recipes</a></li>
<li><a href="Nutrition.php">Nutrition</a></li>
<li><a href="Conversion.php">Conversion</a></li>
<li><a href="Ingredients.php">Key Ingredients</a></li>
<li><a href="YourRecipes.php">My Recipes</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</nav>
<div>
<div class ='clear'>
<div class = 'grd6'>
<article>
<?php
if (isset($_POST['Submit']))
{
//This is the directory where images will be saved
$target = "img/";
$target = $target . basename( $_FILES['Image']['name']);
//Get the values from the new user form
$recipename = $_POST['RecipeName'];
$categoryID = $_POST['Categories'];
$time = $_POST['TimeToPrepare'];
$servings = $_POST['NoOfServings'];
$image=($_FILES['Image']['name']);
$author = $_POST['Author'];
$instructions = $_POST['Instructions'];
$comments = $_POST['Comments'];
$ingredient = $_POST['Description'];
$amount = $_POST['Amount'];
$measure = $_POST['UnitOfMeasure'];
include('php\dbconnection.php');
$sql=mysql_query("SELECT RecipeName FROM recipes WHERE RecipeName= '$recipename' ");
if(mysql_num_rows($sql)>=1)
{
echo "<article><p><h2>Recipe Name already exists, Please choose another</h2></p></article>";
}
else{
//Set up and execute the INSERT query
$sql = "INSERT INTO recipes (RecipeName, Instructions, Category_ID, NoOfServings, Image, TimeToPrepare ,Author, Comments)
VALUES ('$recipename', '$instructions', $categoryID, $servings, '$image', '$time', '$author', '$comments')";
mysql_query($sql) or die(mysql_error()."Error Inserting Values");
$recipeid = mysql_insert_id();
$sql2 = "INSERT INTO ingredient (recipe_id, Description, UnitOfMeasure) VALUES ($recipeid, '$ingredient', '$measure')";
mysql_query($sql2) or die(mysql_error()."Error Inserting Values");
$ingredientid = mysql_insert_id();
$sql3 = "INSERT INTO recipes_has_ingredient(recipe_id, ingredient_ID, Amount) VALUES ($recipeid, $ingredientid, $amount)";
mysql_query($sql3) or die(mysql_error()."Error Inserting Values");
//Writes the photo to the server
if(move_uploaded_file($_FILES['Image']['tmp_name'], $target))
{
//Tells you if its all ok
echo "<h2>The file ". basename( $_FILES['Image']['name']). " has been uploaded</h2>";
}
else {
//Gives and error if its not
echo "<h2>Sorry, there was a problem uploading your file.</h2>";
}
}
}
?>
</article>
</div class = 'clear'>
<div class = 'grd6content'></div>
<article >
<?php
session_start();
if (isset($_POST['Submit'])) {
include ('php\dbconnection.php');
$query ="SELECT RecipeName, Instructions,Category_ID,TimeToPrepare,NoOfServings,Image,Comments,Author,
ingredient.Description, ingredient.UnitOfMeasure,recipes_has_ingredient.Amount
FROM recipes
INNER JOIN recipes_has_ingredient on
recipes.RecipeId=recipes_has_ingredient.recipe_id
INNER JOIN ingredient on
ingredient.ID = recipes_has_ingredient.ingredient_ID=recipeid";
//$query = "SELECT recipes. *, ingredient.Description
// FROM recipes
//INNER JOIN ingredient WHERE recipes.RecipeId =($recipeid)";
$result = mysql_query($query) or die(mysql_error()."select error"); //stablish a connection and pass it on the query
//$num = mysql_num_rows($result); // informs me the number of rows in the result set, it saves to a variable
while ($row = mysql_fetch_assoc( $result)) {
echo "<div class = 'grd6' ";
echo "<br /><br />";
Echo "<b>Recipe Name:</b> ".$row ['RecipeName'] . "<br><br> ";
Echo "<img class = 'imgSearch'src = 'img/{$row['Image']} '><br><br>" ;
Echo "<b>Instruction:</b> ".$row ['Instructions'] . "<br><br> ";
Echo "<b>Category:</b> ".$row ['Category_ID'] . "<br><br> ";
Echo "<b>Time To Prepare:</b> ".$row ['TimeToPrepare'] . "<br><br> ";
Echo "<b>No Of servings:</b> ".$row ['NoOfServings'] . "<br><br> ";
Echo "<b>Comments:</b> ".$row ['Comments'] . "<br><br> ";
Echo "<b>Author:</b> ".$row ['Author'] . " <br><br>";
Echo "<b>Ingredients:</b> ".$row ['Description'] . "<br><br> ";
Echo "<b>Measure:</b> ".$row ['UnitOfMeasure'] . "<br><br>";
Echo "<b>Amount:</b> ".$row ['Amount'] . " <hr>";
}
//close the database connection
mysql_close($connection);
}
?>
</article>
</div>
<div class = 'clear'></div>
<div class='grd12'>
<article>© 2013 Emer O Donohue McMahon</article>
</div>
<div class='clear'></div>
</div>
</body>
</html>