ACTIVER LE BUTON ENREGISTRER EN JAVASCRIPT

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
bedson
Messages : 2
Enregistré le : 03 janv. 2023, 11:07

ACTIVER LE BUTON ENREGISTRER EN JAVASCRIPT

Message par bedson » 03 janv. 2023, 11:22

Bonjour à tous,
J'espère que vous allez bien.

J'ai un formulaire contenant deux champs input type text et un bouton valider.
Le champ (contact1) comporte un numéro de téléphone sur 10 positions.
Le champ (contact2) est un champ vide

Le bouton est désactivé par défaut .
Je souhaite que le bouton soit actif dès que le numéro de téléphone entré dans le champ 2 est différent de celui du champ 1.
J'ai besoin de votre aide svp !!!

<script>
$( document ).ready(function() {
var contact1 = $('#contact1').val();
$('#contact2').keyup(function(e){
if( contact1 == this.value )
{
$('#btn-submit').prop('disabled', false);
}else{
$('#btn-submit').prop('disabled', true);
}
})
});
</script>
Fichiers joints
Capture.JPG
Capture.JPG (25.41 Kio) Vu 2141 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 560
Enregistré le : 28 févr. 2017, 15:19

Re: ACTIVER LE BUTON ENREGISTRER EN JAVASCRIPT

Message par webmaster » 04 janv. 2023, 12:33

Bonjour

Il me faudrait le code du formulaire également pour faire plus d'essais
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

bedson
Messages : 2
Enregistré le : 03 janv. 2023, 11:07

Re: ACTIVER LE BUTON ENREGISTRER EN JAVASCRIPT

Message par bedson » 04 janv. 2023, 14:55

Bonjour Webmaster,

Tu trouveras ci-dessous le code:

<html>
<head>
<title>Test Bede</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@ ... ap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="contact1" class="form-label">Contact 1</label>
<input type="text" class="form-control" id="contact1" placeholder="" value="0708509433" disabled>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="contact2" class="form-label">Contact 2</label>
<input type="text" class="form-control" id="contact2" placeholder="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-block" id="btn-submit" disabled="true"> Enregistrer</button>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@ ... per.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@ ... rap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
$( document ).ready(function() {
var contact1 = $('#contact1').val();
$('#contact2').keyup(function(e){
if( contact1 == this.value )
{
$('#btn-submit').prop('disabled', false);
}else{
$('#btn-submit').prop('disabled', true);
}
})
});
</script>
</body>
</html>

Avatar du membre
webmaster
Administrateur du site
Messages : 560
Enregistré le : 28 févr. 2017, 15:19

Re: ACTIVER LE BUTON ENREGISTRER EN JAVASCRIPT

Message par webmaster » 05 janv. 2023, 10:00

Bonjour

Après quelques essais, je suis arrivé à cette fonction :

Code : Tout sélectionner

$( document ).ready(function() {
    var contact1 = $('#contact1').val();
    $('#contact2').keyup(function(e){
        console.log("contact2 :"+this.value)
        if( contact1 == this.value )  {
            $('#btn-submit').removeAttr('disabled');
        }else{
            $('#btn-submit').attr('disabled', true);
        }
    })
});
j'ai utilisé removeAttr() car disabled='false' laisse le bouton desactivé
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre