首先，我道歉，我对jquery的了解很糟糕，但我正在学习。我有一个剧本的主要问题我写作供个人使用，整个周末让我上楼。 PHP工作100％（测试）它只是不发送post变量的jquery
该脚本允许您添加步骤以及图片和标题，底部有一个按钮，允许您“删除最后一步”或“添加另一步”限制为最多10步。当在浏览器上使用它并查看html它无缝地工作时，名称和id根据需要改变，它在步骤1之后没有其他步骤（即，步骤2步骤3步骤4）在表单提交时发送变量的事实很好。我正在使用表单的方法发布，下面是步骤加法器的javascript和html：
<html>
<head>
<link rel="stylesheet" href="style/css/screen.css">
<script type="text/javascript" src="style/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 steps allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div style="margin-bottom:25px; height:180px;"><div class="form"><label>Step '+ counter + ': </label>' +
'<div class="form"><input readonly="readonly" id="step'+ counter + '" type="hidden" name="step'+ counter + '" maxlength="92"size="50" value="step'+ counter + '"/><div class="formholder">Photo <input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics' + counter + '"/></div></br>' +
'<div style="margin-top:10px; margin-bottom:10px;" class="formholder">Title <input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle' + counter + '" type="text" name="rtitle' + counter + '" maxlength="55" size="30"><br /></div></div>' +
'<div class="formholder"><textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" rows="3" cols="49" type="text" name="step' + counter + '" id="step' + counter + '" value="" ></textarea></div></div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more steps to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Step " + i + " : " + $('#step' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButtoni").click(function () {
if(counter>30){
alert("Only 30 ingredients allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDivi' + counter);
newTextBoxDiv.after().html('<div style="height: 75px;"><div class="form"><label>Ingredient '+ counter + ': </label>' +
'<input style="outline: 5px solid #f5f5f5;" size="50" type="text" name="ingredient' + counter +
'" id="ingredient' + counter + '" value="" ></div>' +
'<div class="form"><label><i>Amount:</i></label>' +
'<input style="outline: 5px solid #f5f5f5;" type="text" id="amount' + counter +
'" name="amount' + counter + '" size="15" value=""> ' +
' <select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="unit' + counter +
'" id="unit' + counter + '">' +
'<option value="g">g</option>' +
'<option value="kg">kg</option>' +
'<option value="lb">lb</option>' +
'<option value="tsp">tsp</option>' +
'<option value="tbsp">tbsp</option>' +
'<option value="cup">cup</option>' +
'<option value="pint">pint</option>' +
'<option value="ml">ml</option>' +
'<option value="l">l</option>' +
'<option value="bunch">bunch</option>' +
'<option value="pinch">pinch</option>' +
'</select></div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroupi");
counter++;
});
$("#removeButtoni").click(function () {
if(counter==1){
alert("No more ingredients to remove");
return false;
}
counter--;
$("#TextBoxDivi" + counter).remove();
});
$("#getButtonValuei").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Ingredient " + i + " : " + $('#ingredient' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
$(function() {
var $tabs = $('#jrtabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Step »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Step</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
</script>
</head>
<body>
<div id="jrtabs">
<ul>
<li><a href="#fragment-1"><strong>1</strong>. Overview</a></li>
<li><a href="#fragment-2"><strong>2</strong>. Images</a></li>
<li><a href="#fragment-3"><strong>3</strong>. Ingredients</a></li>
<li><a href="#fragment-4"><strong>4</strong>. Steps</a></li>
<li><a href="#fragment-5"><strong>5</strong>. Dietary</a></li>
<li><a href="#fragment-6"><strong>6</strong>. Additional</a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel">
<div>
<?php
if($_SESSION['id'])
{
$sql="SELECT * from `users` WHERE `id`='".$_SESSION['id']."'";
$res=mysql_query($sql);
$row=mysql_fetch_assoc($res);
if(!$_POST['update'])
{
?>
<form enctype="multipart/form-data" action="recipes/addrecipe.php" method="POST">
<input readonly="readonly" id="r_id" type="hidden" name="r_id" maxlength="92"size="50" value="<?php $id_result = mysql_query("SELECT * FROM recipe"); $num_id = mysql_num_rows($id_result); $num_recipe = $num_id + 1; echo "$num_recipe";?>">
<div style="margin-bottom:10px;" class="form">
<label for="title">Title</label>
<input style="width:370px; outline: 5px solid #f5f5f5;" id="title" type="text" name="title" maxlength="92" size="50"><br/>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="description">Description</label>
<textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" type='text' id='description' name='description' rows="3" cols="49"></textarea><br/>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="time">Time</label>
Prep <input style="outline: 5px solid #f5f5f5;" id="prep_time" type="text" name="prep_time" maxlength="4"size="4">
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="prep_time_unit" id="prep_time_unit">
<option value="Hour">Hour</option>
<option value="Hours">Hours</option>
<option value="Minutes">Minutes</option>
</select>
    Cook <input style="outline: 5px solid #f5f5f5;" id="cook_time" type="text" name="cook_time" maxlength="4"size="4">
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="cook_time_unit" id="cook_time_unit">
<option value="Hour">Hour</option>
<option value="Hours">Hours</option>
<option value="Minutes">Minutes</option>
</select>
<br/>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="date">Date</label>
Day
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="day" id="day">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
Month
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="month" id="month">
<option value="01">January</option>
<option value="02">Febuary</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Year
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="year" id="year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
<br/>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="course">Course</label>
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="course" id="course">
<option value="01">01</option>
</select>
</div>
</div>
</div>
<div id="fragment-2" class="ui-tabs-panel">
<div class="dividerlarge">
<div style="margin-bottom:10px;" class="form">
<label for="pics">Thumbnail:</label>
<div class="formholder">
Title <input style="outline: 5px solid #f5f5f5; display:; width:300px;" id="rtitle" type="text" name="rtitle" maxlength="55" size="30">
<br />
</div>
<label for="pics"><i>150px x 150px</i></label>
<div class="formholder">
Photo <input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics"/>
</div>
</br>
</div>
</br>
<div style="margin-bottom:10px;" class="form">
<label for="videolink">Video Link</label>
<textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" type='text' id='videolink' name='videolink' rows="3" cols="49"></textarea><br/>
</div>
</div>
</div>
<div id="fragment-3" class="ui-tabs-panel">
<div class="dividerlarge">
<div id='TextBoxesGroupi'>
<div style="height: 75px;" id="TextBoxDiv1i">
<div class="form">
<label>Ingredient 1: </label>
<input style="outline: 5px solid #f5f5f5;" type='text' id='ingredient1' name='ingredient1' size="50">
</div><br />
<div class="form">
<label><i>Amount:</i></label>
<input style="outline: 5px solid #f5f5f5;" type='text' id='amount1' name='amount1' size="15">
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="unit1" id="unit1">
<option value="g">g</option>
<option value="kg">kg</option>
<option value="lb">lb</option>
<option value="tsp">tsp</option>
<option value="tbsp">tbsp</option>
<option value="cup">cup</option>
<option value="pint">pint</option>
<option value="ml">ml</option>
<option value="l">l</option>
<option value="bunch">bunch</option>
<option value="pinch">pinch</option>
</select>
<input type="text" name="Other" id="Other" style="display: none;">
</div>
</div>
</div>
<div style="float:left; width: 400px;">
<input style="border: 1px solid #dddddd; background:#f5f5f5; margin-left:95px; font-weight:bold; color:#78AB46;" type='button' value='Click to add ingredient' id='addButtoni'>
<input style="border: 1px solid #dddddd; background:#f5f5f5; font-weight:bold; color:#c16b54;" type='button' value='Click to remove last' id='removeButtoni'>
</div>
</div>
</div>
<div id="fragment-4" class="ui-tabs-panel">
<div class="dividerlarge">
<div id='TextBoxesGroup'>
<div style="margin-bottom:25px; height:180px;" id="TextBoxDiv1">
<div class="form">
<label>Step 1: </label>
<div class="form">
<input readonly="readonly" id="step1" type="hidden" name="step1" maxlength="92"size="50" value="step1"/>
<div class="formholder">
Photo <input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics"/>
</div>
</br>
<div style="margin-top:10px; margin-bottom:10px;" class="formholder">
Title
<input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle" type="text" name="rtitle" maxlength="55" size="30"/>
<br />
</div>
</div>
<div class="formholder">
<textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" type='text' id='step1' name='step1' rows="3" cols="49"></textarea>
</div>
</div>
</div>
</div>
<div style="float:left; width: 400px;">
<input style="border: 1px solid #dddddd; margin-left:95px; background:#f5f5f5; font-weight:bold; color:#78AB46;" type='button' value='Click to add step' id='addButton'>
<input style="border: 1px solid #dddddd; background:#f5f5f5; font-weight:bold; color:#c16b54;" type='button' value='Click to remove last' id='removeButton'>
</div>
</div>
</div>
<div id="fragment-5" class="ui-tabs-panel">
<div class="dividerlarge">
<div style="margin-bottom:10px;" class="form">
<label for="allergy">Allergy:</label>
<div class="formholder">
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="gluten" value="1" /> <img class="radios" src="style/images/gluten.gif">
Gluten Free
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="fat" value="1" /> <img class="radios" src="style/images/fatfree.gif">
Fat Free
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="vegan" value="1" /> <img class="radios" src="style/images/vegan.gif">
Vegan
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="vegetarian" value="1" /> <img class="radios" src="style/images/vegetarian.gif">
Vegetarian
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="egg" value="1" /> <img class="radios" src="style/images/chilli.png">
Egg
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="shellfish" value="1" /> <img class="radios" src="style/images/chilli.png">
Shellfish
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="dairy" value="1" /> <img class="radios" src="style/images/chilli.png">
Dairy
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="nuts" value="1" /> <img class="radios" src="style/images/chilli.png">
Nuts
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="checkbox" name="lowsodium" value="1" /> <img class="radios" src="style/images/chilli.png">
Low Sodium
</label>
</div>
</div>
</div>
</div>
<div id="fragment-6" class="ui-tabs-panel">
<div class="dividerlarge">
<div style="height:350px;">
<div style="margin-bottom:10px;" class="form">
<label for="title">Difficulty</label>
<div class="formholder">
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="difficulty" value="1" />
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
Beginner
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="difficulty" value="2" />
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
Intermediate
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="difficulty" value="3" />
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/gray_star.png">
<img class="radios" src="style/images/gray_star.png">
Advanced
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="difficulty" value="4" />
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/gray_star.png">
Expert
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="difficulty" value="5" />
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
<img class="radios" src="style/images/color_star.png">
Professional
</label>
</div>
<br/>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="hot">Heat:</label>
<div class="formholder">
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="0" checked="yes"/>
<img class="radios" src="style/images/cold.png"> Not Spicy
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="1" />
<img class="radios" src="style/images/chilli.png">
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="2" />
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="3" />
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="4" />
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
</label>
<label style="outline: 5px solid #f5f5f5;" class="radios">
<input type="radio" name="hot" value="5" />
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
<img class="radios" src="style/images/chilli.png">
</label>
</div>
</div>
<div style="margin-bottom:10px;" class="form">
<label for="hot">Cuisine:</label>
<div class="formholder">
<select style="outline: 5px solid #f5f5f5; border: 1px solid #A2B1C5; padding: 4px; margin-bottom: 4px;" name="cuisine" id="cuisine">
<option value="African">African</option>
<option value="British">British</option>
<option value="Caribbean">Caribbean</option>
<option value="Chinese">Chinese</option>
<option value="Contemporary">Contemporary</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Lebanese">Lebanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Middle Eastern">Middle Eastern</option>
<option value="Pacific">Pacific</option>
<option value="North American">North American</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
</select>
</div>
</div>
<div class="form">
<input style="background: #f5f5f5 url(style/images/tick.png) no-repeat left; width:150px; margin-bottom:25px; margin-left:90px;" type="submit" id="send" value="Save Recipe">
</div>
</form>
</div></div>
<?php
}
}
else echo "<script language=\"Javascript\" type=\"text/javascript\">document.location.href='index.php'</script>";
?>
</body>
</html>
你能看出它没有发送数据的原因吗？
我会永远满足任何建议
答案 0 :(得分：0)
调用post函数时通常会有所帮助。
（对不起......我在打电话/）
$.post("something.php", {variable: var}, function(reply)
{
$('#something').html(reply);
});
答案 1 :(得分：0)
这可能不是答案。
但我会给你一个很好的建议，可以制作HTML＆amp; JS更清洁，更容易，更清洁
创建
<!--Add this in your html and set to display none to keep it hidden-->
<div id='toClone' style='display:none'>
put the html code in here instead of putting it in JS and handling all the single & double quotes..
and use this syntax <input id="step{COUNTER}" name="step{COUNTER}" />.............etc
</div>
现在在你的JS
中这样做：
var newHtml = $("#toClone).html();
while(newHtml.indexOf("{COUNTER}")>-1){
newHtml = newHtml.replace("{COUNTER}",counter);
}
现在附加newHTML
这只是一种更简洁的克隆方式，而不是在JS中编写大量的html。
答案 2 :(得分：0)
我建议您尝试使用Fiddler之类的内容，以查看表单数据中的实际内容，并将其发回页面。
你有：
newTextBoxDiv.after().html('<div...
我不认为这是正确的语法，它在Chrome中给我一个Javascript错误。 .after()没有0参数选项。你可能意思是newTextBoxDiv.html().after(...吗？
顺便说一句，我注意到你有一个隐藏的输入和一个与step1具有相同名称和id的textarea。这不是有效的HTML。 id属性必须是唯一的。我假设您动态生成的块相同。