Html Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

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

    #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 %}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search