CODEWITHSUNDEEP
pythonhtmlflask
user14611858
user14611858

Reputation:

send two forms with only one button in flask

I'm making a basic chat app with flask. I have this page and this piece of code

@app.route('/', methods = ['GET', 'POST'])
def chat():

    if request.method == 'POST':

        message_content = request.form['content']
        message_author = request.form['name']

        if message_content:
            new_message = Message(content = message_content, author = message_author)

            db.session.add(new_message)
            db.session.commit()

        return redirect('/')

    else:

        all_messages = Message.query.order_by(Message.date.desc()).all()
        return render_template('chat.html', posts=all_messages)

and I would like to every time I hit the "Send" button it takes the information of the input in the header and the info of the message. So, my question is, can I take the informations of two different forms with only one button ?

Html code (with a bit of jinja 2):

{% block body %}

<!-- Navbar -->

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Chat</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
        </ul>
        <form action="/" class="d-flex" method="POST">
          FORM THAT CONTAINS THE NAME -- > <input class="form-control me-2" type="search" id="name" placeholder="Name" value="{% if message_author %}{{ message_author }}{% else %}Unknown{% endif %}" aria-label="Search">
          <!-- <button class="btn btn-outline-success" type="submit">Save</button> -->
        </form>
      </div>
    </div>
  </nav>

<!-- New message form -->
<br>
<div class="bg-light p-5 rounded">

    <h2 class="createPost">New message </h2>



    <form action="/" method="POST">

        <input type="text" name="content" id="content" class="createPost">
        <br>
        <input type="submit" value="Send" class="btn btn-outline-dark" id="submit">

    </form>

</div>

<hr>

<!-- Display messages -->

    {% for post in posts %}

        <div class="">

            {% if post.author %}
                {% if post.date %}
                    <small class="">{{ post.date.replace(microsecond=0) }} - {{ post.author }} : </small>
                {% else %}
                    <small class="">{{ post.author }}</small>
                {% endif %}
            {% else %}
                {% if post.date %}
                    <small class="">{{ post.date }} - Unkown : </small>
                {% else %}
                    <small class="">N/A - Unkown</small>
                {% endif %}
            {% endif %}

            <p class="">{{ post.content }}</p>

            <a href="message/delete/{{post.id}}" method="delete_post" class="btn btn-outline-danger">Delete</a>
            <!-- <a href="message/edit/{{post.id}}" method="edit_post" class="edit_post">Edit</a> -->

            <hr>

        </div>

    {% endfor %}

{% endblock %}

Upvotes: 1

Views: 210

Answers (1)

Wagner Santos
Wagner Santos

Reputation: 41

You could create a hidden input inside your send form and on submit copy the value (with javascript) of the input from the other form.

 <input id="name" type="text" value="" name="name" class="btn btn-outline-dark" id="submit">
 
 <form>
 <input id="hiddenName" type="hidden" value="" name="name" class="btn btn-outline-dark" >
 <input onclick="document.getElementById('hiddenName').value = document.getElementById('name').value" type="button" value="Send" class="btn btn-outline-dark" id="submit">
 </form>

Upvotes: 1

Related Questions