Désactiver un bouton en fonction d'un autre
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:
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:
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> |
