Bonjour,
Je suis débutant en html javascript. J'essaie de coder un formulaire modèle avec deux boutons, quand on appuie sur bouton test 1 il s'inactive et active bouton test 2 et inversement. Quand on appuie sur bouton test 1, il imprime "hello" dans mon script python, et bouton test 2 imprime byby.
Le lien entre Python et la page web fonctionne correctement, par contre je n'arrive pas à inactiver les boutons.
Désolé si c'est une question de débutant, j'ai lu pas mal de choses mais je nage depuis un bon moment. Merci d'avance.
Code python : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 ######## imports ########## from flask import Flask, jsonify, request, render_template app = Flask(__name__)############################# ###################################### run app ######### #rendering the HTML page which has the button @app.route('/') def json(): return render_template('jason6.html') #background process happening without any refreshing @app.route('/background_process_test1') def background_process_test1(): print ("Hello") return ("nothing") #background process happening without any refreshing @app.route('/background_process_test2') def background_process_test2(): print ("byby") return ("nothing")
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type=text/javascript> $(function() { $('a#test1').on('click', function(e) { e.preventDefault() $('#test1').prop('disabled', true); $.getJSON('/background_process_test1', function(data) { //do nothing }); return false; }); }); $(function() { $('b#test2').on('click', function(e) { e.preventDefault() //disable the submit button $('#test2').prop('disabled', true); $.getJSON('/background_process_test2', function(data) { //do nothing }); return false; }); }); </script> <div class='container'> <h3></h3> <form> <a href=# id=test1><button class='btn btn-primary' >Test1</button></a> <b href=# id=test2><button class='btn btn-primary' >Test2</button></b> </form> </div>
Partager