Submit button inside form without reloading form

Shauna :

I have a html form which has the following fields to create a recipe:

<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>

I have a button after the ingredients fields which ideally would add a new input field to add another ingredient to the table containing the ingredients for the recipe. At the moment, the button is calling the function correctly and the function does as it should but it seems to be also submitting the form which reloads the page and the input fields disappear. Is there a way to just have this button be submitted to add the fields without the form being submitted or should I create two forms between this button so it isn't in any form?

My function:

function addIngredient() {
    var area = document.getElementById("addedIngredient");
    var input = document.createElement("INPUT");
    area.appendChild(input);
}

Any advise would be appreciated.

Nikhil Gyan :

Change the button type of "Add Ingredient" to "button" and your form will work accordingly. Currently you've button type "submit", which submits the form as well.

Please try this. Hope this will be helpful.