How to have multiple submit buttons in one line even if they are different form submissions, using Python Django?

I'm making a sort of checklist/todo app in Python Django and have an update form where I can save updates, mark it as complete or incomplete or delete the item.

The current code displays the save button on one line as it's in a form with other data to update the item. the complete and delete buttons are in a separate line.

How do I update the code so that all the buttons appear in one line? and function?

I've tried to use Chatgpt to get an answer and if I get all the buttons in one line, the functions/buttons or the mark as important stop working.

{% extends 'BJJApp/base.html' %}

{% block content %}

<div class="row justify-content-center mt-5">
    <div class="col-md-5">
        <h2>New Item</h2>
    </div>
</div>

<div class="row justify-content-center mt-5">
   <div class="col-md-5">
        {% if error %}
        <div class="alert alert-danger" role="alert">
            {{ error }}
        </div>
        {% endif %}

        <div class="container">
            <!-- Main Form for saving item -->
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" name="title" class="form-control" id="title" value="{{ item.title }}" required>
                </div>
            <div class="form-group">
                <label for="memo">Memo</label>
                <textarea name="memo" rows="5" class="form-control" id="memo">{{ item.memo }}</textarea>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" name="important" class="form-check-input" id="important" {% if item.important %}checked{% endif %}>
                <label class="form-check-label" for="important">Important</label>
            </div>
            <button type="submit"  class="btn btn-primary">Save</button>
        </form>

        <!-- Buttons Row -->
        <!-- Complete Button Form (if item is not completed) -->
        {% if item.datecompleted is None %}
        <form method="POST" action="{% url 'completeitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-success">Complete</button>
        </form>
        {% endif %}

        <!-- UnComplete Button Form (if item is completed) -->
        {% if item.datecompleted %}
        <form method="POST" action="{% url 'uncompleteitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-success">UnComplete</button>
        </form>
        {% endif %}

        <!-- Delete Button Form -->
        <form method="POST" action="{% url 'deleteitem' item.id %}" style="display:inline-block;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Delete</button>
        </form>
    </div>
    </div>
</div>
</div>
<br><br>

    {% endblock %}

The function works, but I can't get them into one line!

Thanks

It is not a Django or Python issue but an HTML and CSS styling issue

You can move the save button into the button row and use the form attribute.

You may or may need the inline form CSS

#buttonRow form {
  display: inline-block;
}
{% extends 'BJJApp/base.html' %} {% block content %}

<div class="row justify-content-center mt-5">
  <div class="col-md-5">
    <h2>Update Item</h2>
  </div>
</div>

<div class="row justify-content-center mt-5">
  <div class="col-md-5">
    {% if error %}
    <div class="alert alert-danger" role="alert">
      {{ error }}
    </div>
    {% endif %}

    <div class="container">
      <!-- Main Form for updating and saving item -->
      <form method="POST" id="main-form">
        {% csrf_token %}
        <div class="form-group">
          <label for="title">Title</label>
          <input type="text" name="title" class="form-control" id="title" value="{{ item.title }}" required>
        </div>
        <div class="form-group">
          <label for="memo">Memo</label>
          <textarea name="memo" rows="5" class="form-control" id="memo">{{ item.memo }}</textarea>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" name="important" class="form-check-input" id="important" {% if item.important %}checked{% endif %}>
          <label class="form-check-label" for="important">Important</label>
        </div>
      </form>

      <!-- Buttons Row -->
      <div class="d-flex flex-wrap align-items-center" id="buttonRow">
        <!-- Save Button -->
        <button type="submit" class="btn btn-primary mr-2" form="main-form">Save</button>

        <!-- Complete Button Form (if item is not completed) -->
        {% if item.datecompleted is None %}
        <form method="POST" action="{% url 'completeitem' item.id %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-success mr-2">Complete</button>
        </form>
        {% endif %}

        <!-- UnComplete Button Form (if item is completed) -->
        {% if item.datecompleted %}
        <form method="POST" action="{% url 'uncompleteitem' item.id %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-warning mr-2">Uncomplete</button>
        </form>
        {% endif %}

        <!-- Delete Button Form -->
        <form method="POST" action="{% url 'deleteitem' item.id %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<br><br> {% endblock %}

This is a styling issue. Typically a <form> [mdn-doc] has a block as display style [mdn-doc].

You can change this to inline-block or inline:

form {
    display: inline-block;
}
Back to Top