[英]Submit button inside form without reloading form
我有一个 html 表单,其中包含以下字段来创建配方:
<form class="login-form" action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
<div class="form-group <?php echo (!empty($name_err)) ? 'has-error' : ''; ?>">
<label>Name</label>
<input type="text" name="name" class="form-control" value="<?php echo $name; ?>">
<span class="help-block"><?php echo $name_err; ?></span>
</div>
<div class="form-group">
<label>Image</label>
<textarea name="image" class="form-control"><?php echo $image; ?></textarea>
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Video Name</label>
<input type="text" name="video_name" class="form-control" value="<?php echo $video_name; ?>">
<span class="help-block"></span>
</div>
<div id="ingredients" class="form-group <?php echo (!empty($ingredient_err)) ? 'has-error' : ''; ?>">
<label>Ingredient Name</label>
<input type="text" name="ingredient_name" class="form-control" value="<?php echo $ingredient_name; ?>">
<label>Measure</label>
<input type="text" name="ingredient_measure" class="form-control" value="<?php echo $ingredient_measure; ?>">
<label>Unit</label>
<input type="text" name="ingredient_unit" class="form-control" value="<?php echo $ingredient_unit; ?>">
<button type="submit" class="btn api-button" onClick="addIngredient()"> Add Ingredient</button>
</div>
<div id="addedIngredient"></div>
<div class="form-group <?php echo (!empty($step_err)) ? 'has-error' : ''; ?>">
<label>Steps</label>
<textarea name="steps" class="form-control"></textarea>
<span class="help-block"><?php echo $steps_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($rating_err)) ? 'has-error' : ''; ?>">
<label>Rating</label>
<select id="rating" name="rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<span class="help-block"><?php echo $rating_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($servings_err)) ? 'has-error' : ''; ?>">
<label>Servings</label>
<textarea name="servings" class="form-control"><?php echo $servings; ?></textarea>
<span class="help-block"><?php echo $servings_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($difficultyID_err)) ? 'has-error' : ''; ?>">
<label>Difficulty</label>
<select id="difficulty" name="difficulty">
<option value="1">Easy</option>
<option value="2">Medium</option>
<option value="3">Hard</option>
</select>
<span class="help-block"><?php echo $difficultyID_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($maxTime_err)) ? 'has-error' : ''; ?>">
<label>Max Time</label>
<input type="text" name="maxTime" class="form-control" value="<?php echo $time; ?>">
<span class="help-block"><?php echo $maxTime_err; ?></span>
</div>
<input type="hidden" name="recipe_ID" value="<?php echo $id; ?>"/>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="show-all-recipes.php" class="btn btn-default">Cancel</a>
</form>
我在成分字段后面有一个按钮,理想情况下会添加一个新的输入字段,以将另一种成分添加到包含配方成分的表格中。 目前,该按钮正在正确调用该函数,并且该函数按预期执行,但它似乎也在提交重新加载页面且输入字段消失的表单。 有没有办法只提交这个按钮来添加字段而不提交表单,或者我应该在这个按钮之间创建两个表单所以它不是任何形式?
我的功能:
function addIngredient() {
var area = document.getElementById("addedIngredient");
var input = document.createElement("INPUT");
area.appendChild(input);
}
任何建议将不胜感激。
将“添加成分”的按钮类型更改为“按钮”,您的表单将相应地工作。 目前,您已经输入了“提交”按钮,它也提交了表单。
请试试这个。 希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.