Updating form class based on input using database lookup
I have no clue where to start with this. Basically, I want the class of a input to change to has-success when a username that is in a database table called Username is equal to the string that the user has written. The current code for the form is:
<div class='container col-md-3 rounded p-5 mt-5 border'>
<form action="Authentication.php" method ="post">
<h3 class='text-center'>Please Login</h3>
<h5 class='pt-3'>Enter Username and Password</h5>
<div class="form-group mb-0">
<input class='form-control float-left mt-3 mb-1' placeholder="Username" type="text" name="username">
<br>
<input class='form-control float-left mb-3' placeholder="Password" type="password" name="password">
<br>
</div>
<div class="text-center">
<input type="submit" class='btn btn-primary btn-sx' value="Login">
</div>
</form>
</div>
So whenever anyone types in the field with placeholder="username" it needs to check whether that string matches with any in the column Username in the table Students and if it does update the class to success.
Thanks so much for the help,
Toby
php jquery mysql bootstrap-4
edited Nov 15 '18 at 13:08
bcperth
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
add a comment |
I have no clue where to start with this. Basically, I want the class of a input to change to has-success when a username that is in a database table called Username is equal to the string that the user has written. The current code for the form is:
<div class='container col-md-3 rounded p-5 mt-5 border'>
<form action="Authentication.php" method ="post">
<h3 class='text-center'>Please Login</h3>
<h5 class='pt-3'>Enter Username and Password</h5>
<div class="form-group mb-0">
<input class='form-control float-left mt-3 mb-1' placeholder="Username" type="text" name="username">
<br>
<input class='form-control float-left mb-3' placeholder="Password" type="password" name="password">
<br>
</div>
<div class="text-center">
<input type="submit" class='btn btn-primary btn-sx' value="Login">
</div>
</form>
</div>
So whenever anyone types in the field with placeholder="username" it needs to check whether that string matches with any in the column Username in the table Students and if it does update the class to success.
Thanks so much for the help,
Toby
php jquery mysql bootstrap-4
edited Nov 15 '18 at 13:08
bcperth
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
1
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55
add a comment |
I have no clue where to start with this. Basically, I want the class of a input to change to has-success when a username that is in a database table called Username is equal to the string that the user has written. The current code for the form is:
<div class='container col-md-3 rounded p-5 mt-5 border'>
<form action="Authentication.php" method ="post">
<h3 class='text-center'>Please Login</h3>
<h5 class='pt-3'>Enter Username and Password</h5>
<div class="form-group mb-0">
<input class='form-control float-left mt-3 mb-1' placeholder="Username" type="text" name="username">
<br>
<input class='form-control float-left mb-3' placeholder="Password" type="password" name="password">
<br>
</div>
<div class="text-center">
<input type="submit" class='btn btn-primary btn-sx' value="Login">
</div>
</form>
</div>
So whenever anyone types in the field with placeholder="username" it needs to check whether that string matches with any in the column Username in the table Students and if it does update the class to success.
Thanks so much for the help,
Toby
php jquery mysql bootstrap-4
edited Nov 15 '18 at 13:08
bcperth
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
I have no clue where to start with this. Basically, I want the class of a input to change to has-success when a username that is in a database table called Username is equal to the string that the user has written. The current code for the form is:
<div class='container col-md-3 rounded p-5 mt-5 border'>
<form action="Authentication.php" method ="post">
<h3 class='text-center'>Please Login</h3>
<h5 class='pt-3'>Enter Username and Password</h5>
<div class="form-group mb-0">
<input class='form-control float-left mt-3 mb-1' placeholder="Username" type="text" name="username">
<br>
<input class='form-control float-left mb-3' placeholder="Password" type="password" name="password">
<br>
</div>
<div class="text-center">
<input type="submit" class='btn btn-primary btn-sx' value="Login">
</div>
</form>
</div>
So whenever anyone types in the field with placeholder="username" it needs to check whether that string matches with any in the column Username in the table Students and if it does update the class to success.
Thanks so much for the help,
Toby
php jquery mysql bootstrap-4
php jquery mysql bootstrap-4
edited Nov 15 '18 at 13:08
bcperth
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
edited Nov 15 '18 at 13:08
bcperth
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
edited Nov 15 '18 at 13:08
bcperth
2,0011514
edited Nov 15 '18 at 13:08
bcperth
2,0011514
edited Nov 15 '18 at 13:08
bcperth
2,0011514
2,0011514
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
asked Nov 15 '18 at 12:51
Toby Dixon SmithToby Dixon Smith
359
359
1
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55
add a comment |
1
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55
1
1
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55
add a comment |
1 Answer
1
active
oldest
votes
If the code above is in Authentication.php witch is called by the form, then where you check if $_POST has been submitted, initialize a $extraClass = '';
If (your_condition is true) $extraClass = 'success';
and down there in the form, add an
This way it will keep it empty if the condition si not met.
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319909%2fupdating-form-class-based-on-input-using-database-lookup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If the code above is in Authentication.php witch is called by the form, then where you check if $_POST has been submitted, initialize a $extraClass = '';
If (your_condition is true) $extraClass = 'success';
and down there in the form, add an
This way it will keep it empty if the condition si not met.
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
add a comment |
If the code above is in Authentication.php witch is called by the form, then where you check if $_POST has been submitted, initialize a $extraClass = '';
If (your_condition is true) $extraClass = 'success';
and down there in the form, add an
This way it will keep it empty if the condition si not met.
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
add a comment |
If the code above is in Authentication.php witch is called by the form, then where you check if $_POST has been submitted, initialize a $extraClass = '';
If (your_condition is true) $extraClass = 'success';
and down there in the form, add an
This way it will keep it empty if the condition si not met.
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
If the code above is in Authentication.php witch is called by the form, then where you check if $_POST has been submitted, initialize a $extraClass = '';
If (your_condition is true) $extraClass = 'success';
and down there in the form, add an
This way it will keep it empty if the condition si not met.
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
answered Nov 15 '18 at 13:12
Robert ŞtefanRobert Ştefan
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319909%2fupdating-form-class-based-on-input-using-database-lookup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Use an ajax request to PHP & change the class with pure js or jquery.
– Chad
Nov 15 '18 at 12:55
Possible duplicate of JQUERY AJAX - change class of $(this) in case of success
– Chad
Nov 15 '18 at 12:55