I
I
igor675632017-12-26 21:46:10
Flask
igor67563, 2017-12-26 21:46:10

How to implement adding records to the database through the form without reloading the page?

There is an HTML page that displays a database of registered users.
Through forms, we can add/delete/edit records.
But when doing any actions with the database, the whole page is updated.. It is
necessary to use Ajax to update changes only in the database, without reloading the page.
My table in HTML:

<table id="example" class="table0" width="700px" cellspacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PASSWORD</th>
          </tr>
        </thead>
        {% for record in records.items %}
        <tbody>
          <tr>
            <td>{{ record.id }}</td>
            <td>{{ record.name }}</td>
            <td>{{ record.password }}</td>
          </tr>	
        </tbody>
        {% endfor %}
        </table>

Editing forms appear after clicking on the button, here is the code of one of the forms:
<button id="pole-1" class="calc11">Добавить</button>
  	<div class="pole-1" id="act">
  		<content>
  			<div text-align="center">
        <form action='/dobav' method='POST'>
      <h3 class="zagl">Добавление нового пользователя</h3>
      <p>Логин пользователя:</p>
      <input type='text' name='login' id='login' placeholder='login..'></input>
      <p>Пароль Пользователя:</p>
      <input type='password' name='pw' id='pw' placeholder='password..'></input><br>
      <button type='submit'  name='submit' class="b1" >Добавить</button>
        </form>
      </div>	
    </content>	
  </div>

Help to implement at least one ajax form, then go by yourself.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim Kuznetsov, 2017-12-27
@igor67563

The page is being updated because the post method was hung on the form. And when you click on the save button in the form, call a special js method, inside which dynamic data exchange will be involved, i.e. AJAX. The easiest way is to use some framework like jquery http://jquery.page2page.ru/index.php5/Ajax-request
You can, of course, tinker with the request and process responses and error statuses yourself and spend a lot of time on cross-browser compatibility - see to start xmlhttprequest.ru

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question