[HTML/PHP/JQuery] - Enable / Disable button

[Rebbelx]

Allen,

Via HTML, PHP en JQuery probeer ik een login scherm te maken. Hierop zijn 2 knoppen beschikbaar. De authenticate knop en de login knop. Bedoeling is dat de login knop standaard disabled is en pas wanneer gebruiker username en paswoord correct invult en op authenticate drukt zou de login knop op disabled moeten komen.

Wat ik tot nu toe heb:
html pagina met jquery die de login knop disabled via:

code:

$("#btn_login").attr('disabled', true);

Een form op deze pagina met een action="validate_form.php". In dit bestand heb ik tot nu toe volgende code staan:

code:

<?php include ('config/config.php');



$username = $_POST["username"];
$password = $_POST["password"];

//login query
$login_query = "SELECT username, pwd from users where username = '$username'";
$querydb = mysqli_query($dbc, $login_query);
$result_querydb = mysqli_fetch_array($querydb);

if ($username == $result_querydb['username'] && $password == $result_querydb['pwd']) {
    
    ==> HIER MOET DE LOGIN KNOP ENABLED WORDEN.
    
    
}

?>

Mijn code lijkt tot nu toe allemaal wel OK alleen heb ik geen idee hoe ik na de If de knop weer moet enablen. Het lijkt alsof JQuery hier niet op zijn plaatst staat via
$("#btn_login").attr('enabled', true);

Kunnen jullie me wat verder op weg zetten en me vooral laten weten of ik goed bezig ben of op een andere manier moet te werk gaan ?

Bedankt.

[FotW]

Je $("#btn_login").attr('enabled', true); tussen <script> tags zetten en echo'en in de if?

[n2theb]

Waarom maak je geen gebruik van een ajax, http://api.jquery.com/jquery.ajax/, call om de formulier te posten. Waarna je in je validate_form.php alleen terug geef of het succesvol is of niet. Als het succes is dan zeg je in jquery enable knop en anders nee.

[Afvalzak]

Het kan aan mij liggen, maar dat lijkt mij echt niet gewenst (als het al werkt) . PHP en jQuery door elkaar heen gebruiken.
Ik zou AJAX gebruiken, maar ik zie niet in waarom je niet gewoon de check doet op het moment dat je op "submit" drukt, nu moet je bij elke letter die getypt wordt de database gaan belasten en wat gebeurt er als ik in Chrome de knop handmatig enable, kan ik dan gewoon verder?

[FotW]

Ik zou uiteraard ook gebruik maken van ajax, echter leek mij dat gezien het voorbeeld dat de poster geeft zijn pet te boven te gaan en gaf ik een quick fix. Verder eens met @Afvalzak

[Verwijderd]

Je $("#btn_login").attr('enabled', true); moet zijn:

$("#btn_login").removeAttr('disabled');

[Rebbelx]

n2theb schreef op donderdag 17 september 2015 @ 15:39:
Waarom maak je geen gebruik van een ajax, http://api.jquery.com/jquery.ajax/, call om de formulier te posten. Waarna je in je validate_form.php alleen terug geef of het succesvol is of niet. Als het succes is dan zeg je in jquery enable knop en anders nee.

OK ik denk dat ik terug een stapje verder ben. In mijn login.php pagina heb ik in de head volgend geschreven:

code:

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
            
            <script type="text/javascript">

$('#btn_authenticate').click(function() {
                        
                        var username = $('#uname').val();
                        var password = $('#pass').val();        

                        if (username.val() != '' && password.val() != '')
                        {
                            EN NU CALL naar login_validation

                        }
                            
                            });
</script>

Beter ? In de login_validation zal ik checken wat er in de inputvelden meegegeven werd en op basis daarvan de login knop enablen. Ik had daarnet echter gewoon voor de lol in mijn if structuur
$('#btn_login').removeAttr('disabled'); geplaatst. Volgens mij had dit dan toch meteen moeten werken niet ? Ik geef willekeurige date in in username en password wel en klik op de authenticate knop...dan zou de login knop toch moeten enabled zijn of mis ik iets ?

[ Voor 19% gewijzigd door Rebbelx op 17-09-2015 19:52 ]

[BlueZero]

Maar waarom een Authenticate en een Login knop?

Waarom niet gewoon een formulier wat je submit naar een PHP script je checkt of de login corrrect is zo ja dan forward je naar het einddoel zo niet dan stuur je iemand terug.

En nee je script werkt hierom niet:

code:

var username = $('#uname').val();
var password = $('#pass').val();        

if (username[s].val()[/s] != '' && password[s].val()[/s] != '')
{

Je haalt nu de val uit de val dat lijkt me erg dubbel. Mocht je AJAX gaan gebruiken dan doe je zoiets:

code:

$.ajax('url/naar/logincheck',{
   data : {
      username : username,
      password: password
   },
   onSuccess(data){
       
     if(data.success === true){
         $('#btn_login').removeAttr('disabled');
     }
   }
});

Als je gaat debuggen zet alerts in je code op een plek waarvan je denkt dat die uitgevoerd wordt, dan had je direct gezien dat de code in je IF nooit uitgevoerd werd.

[TheNephilim]

Voor disabled moeten we tegenwoordig volgens mij .prop() gebruiken en niet .attr().

JavaScript:

$('#btn_login').prop('disabled', true);
$('#btn_login').prop('disabled', false);

http://api.jquery.com/prop/

[ Voor 6% gewijzigd door TheNephilim op 18-09-2015 10:37 ]

[BlueZero]

Correct ook al zou attr in dit voorbeeld ook werken.

Attr ondersteund alleen string variabelen waardoor bij bijvoorbeeld checkboxen het lastig is om te kijken of hij wel of niet aan staat.

Prop ondersteund meer types waardoor boolean's zoals in jouw voorbeeld mogelijk zijn, ook is het zo dat als een input wijzigt ten opzicht van de originele state de prop wel altijd mee zal wijzigen maar de Attr soms de initiële waarde zal houden.

[mcDavid]

Waarom zou je überhaupt zo'n constructie willen? Wat is het nut behalve dat je nu 2x moet klikken ipv 1x om in te loggen?

Tevens neem ik aan dat je database-query een vereenvoudiging van je daadwerkelijke code is? Zo niet dan zou ik dit héél gauw offline halen en je eerst eens inlezen in SQL-injecties en password hashing.

Als je een leuk en uitdagend project zoekt om meer over webapplicaties te leren zou ik je adviseren eerst eens een Oauth implementatie te doen bijvoorbeeld. Een eigen loginsysteem is in mijn ogen niet de juiste materie om mee te beginnen.