在不重新加載表單的情況下提交表單內的按鈕

Question

我有一個 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);
}

任何建議將不勝感激。

Answer 1

將“添加成分”的按鈕類型更改為“按鈕”，您的表單將相應地工作。 目前，您已經輸入了“提交”按鈕，它也提交了表單。

請試試這個。 希望這會有所幫助。