Get value from input jQuery - javascript

I am trying to get the value from the first name input and pass it to the bootstrap alert when the user clicks the submit button, but can't manage to do that.
Here is my snippet:
$(document).ready(function() {
$("#submit-button").click(function() {
$("#myAlert").show("fade"), $("#fname").attr("value");
event.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<div id="myAlert" class="alert alert-success collapse">
×Thank you for contacting us,
</div>

I assume you wish to use the input value to complete the Bootstrap's alert text...
You will need an element to place that value in I suggest a span. Use the .val() method to get the input value... Then .text() to insert it in the span.
$(document).ready(function() {
$("#submit-button").click(function() {
$("#firstName").text($("#fname").val()); // Use the input's value for the span's text
$("#myAlert").show("fade"); // Show the Bootstrap's alert
event.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
Enter your first name: <input id="fname"><br>
<button id="submit-button">Submit</button>
<div id="myAlert" class="alert alert-success collapse">
×Thank you for contacting us, <span id="firstName"></span>
</div>

Related

Submit form although field is required-> used Bootstrap Checkout example

i created a simple form to submit a text.
This text inpout is required.
But if I click on the submit button the form is sent even though the required text is empty.
I used this bootstrap example template
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
// 'use strict'
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation')
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
}, false)
}())
$("#suche").submit(function(event) {
alert("Handler for .submit() called.");
event.preventDefault();
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="karte1" class="col-md-7 order-md-1">
<form class="needs-validation" id="suche" novalidate>
<div class="mb-3">
<div class="input-group">
<input type="text" class="form-control" id="username2" required>
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary">
submit
</button>
</div>
<div class="invalid-feedback" style="width: 100%;">
Valid text is required.
</div>
</div>
</div>
</form>
</div>
<!-- Karte1 -->
</div>
<!-- row -->
</div>
<!-- container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Thanks for your help!
Could you maybe use the html required attribute instead?
This should be a comment but I do not have enough reputation.

how to display error msg using create element in form validation?

I want to do a validation registration form. How to display the error of the input empty in a span at the bottom of the input?
I want this span to not already exist and be created to display the message.
enter code here
<form action="" name="reg-form" method="post">
<div id="name-box" onblur="validateFullname()" class="form-holder">
<input type="text" name="name" placeholder="enter name" id="name" class="form-control">
</div>
i want create a span element and display message after input or append to div.
The solution will look something like this:
Identify where the "Error Message" span will appear. It needs to be inside another element, even if that element is the body. My example contains: <div id="ErrMsg"></div>
You need an event that triggers both the validation, and the creation of the error span. Usually, that event is a button press. So let's go with that in this example:
$('#mybutt').click(function(){
var tmpL = $('#login').val();
var tmpP = $('#pword').val();
if( tmpL=='' || tmpP=='' ){
$('#ErrMsg').html('<span>Please fill-out all fields</span>');
}else{
alert('Logging in now');
}
});
$('input').on('keyup', function(){
if ( $('#ErrMsg span').length ) $('#ErrMsg span').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="LoginDIV">
<div id="LName">
Login: <input id="login" type="text" />
</div>
<div id="LPass">
Pword: <input id="pword" type="password" />
</div>
<div id="ErrMsg"></div>
<div id="btnDIV"><button id="mybutt">Login</button></div>
</div>
Note: the <script> tag that references the jQuery library is all that you need in order to use jQuery. jQuery just makes javascript easier, more consistent, and less-typing-required.
Your best bet is probably to use JQuery Validation. It's built-in methods don't technically use a span, as you specified, but you could easily tack on your own function to un-hide the custom span you create. Or, better yet, just style their error-message <label> in the way you prefer.
Here's an example using just JQuery Validation:
<form action="/" method="post" id="commentForm">
<div class="form-holder">
<input type="text" name="username" placeholder="username" class="form-control">
</div>
<div class="form-holder col-12">
<input type="email" name="email" placeholder="email" class="form-control">
</div>
</form>
<script>
var validator = $("#commentForm").validate();
validator.showErrors({
"email": "Please enter a valid email address"
});
</script>
(The example leaves out the includes for JQuery and JQuery Validation.)

JavaScript : Enable button if field is filled is not automatical

function checkValid() {
var cbChecked = $(".fakeRadio").is(":checked"); // check if checked
var hasText = $("#email-download-document").val().length > 0; // check if it has text
$("#document-choice-button").prop("disabled", !cbChecked || !hasText);
}
$(function() {
checkValid(); // run it for the first time
$(".fakeRadio").on("change", checkValid); // bind checkbox
$("#email-download-document").on("change", checkValid) // bind textbox
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row">
<div class=" col-md-5">
<label for="primary">Email address</label>
<input type="email" class="form-control" id="email-download-document" name="EmailDownloadDocument" placeholder="Enter email address to get document(s)">
</div>
</div>
<br>
<div class="row">
<div class=" col-md-5">
<input id="document-choice-button" type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Send to my email' %}" />
</div>
</div>
I would like to get your help because I have a little issue with my simple Javascript part and Chrome Browser.
With Chrome, my button is greyed out until I click outside of the field when this one is filled. I would like to enable my button when the field is automatically filled with email verification thanks to type='email'.
This is an example :
Try with input event instead of change.
The DOM input event is fired synchronously when the value of an <input>, <select>, or <textarea> element is changed.
function checkValid() {
var cbChecked = $(".fakeRadio").is(":checked"); // check if checked
var hasText = $("#email-download-document").val().length > 0; // check if it has text
$("#document-choice-button").prop("disabled", !cbChecked || !hasText);
}
$(function () {
checkValid(); // run it for the first time
$(".fakeRadio").on("input", checkValid); // bind checkbox
$("#email-download-document").on("input", checkValid) // bind textbox
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class=" col-md-5">
<label for="primary">Fake Radio</label>
<input type="radio" class="fakeRadio" checked>
<label for="primary">Email address</label>
<input type="email" class="form-control" id="email-download-document" name="EmailDownloadDocument"
placeholder="Enter email address to get document(s)">
</div>
</div>
<br>
<div class="row">
<div class=" col-md-5">
<input id="document-choice-button" type="submit" class="btn btn-default" name="DocumentSelected"
value="Send to my email"/>
</div>
</div>
Try to use 'input' event instead of 'change' event in your Javascript, to trigger the function when the user is typing into the field.
Have your HTML button by default disabled
<input id="document-choice-button" type="submit" ... disabled="disabled" />
This way, it will load disabled without any javascript.
Then, attach a function to keyup event of your textbox to check if the length of the current text is greater than zero.
$("#email-download-document").keyup(function(){ // triggered at any keystroke
if ($(this).val().length>0) {
$("#document-choice-button").removeProp("disabled"); // enable the field
} else {
$("#document-choice-button").prop("disabled","disabled"); // disable the field
}
});
PS: This will make the button enabled/disabled as you are typing or clearing text from the textfield. If you would like to only disable/re-enable after you have exited the textfield, then you will need to attach the function to the change event
$("#email-download-document").change(function(){ //triggered after leaving textbox
if ($(this).val().length>0) {
$("#document-choice-button").removeProp("disabled");
} else {
$("#document-choice-button").prop("disabled","disabled");
}
});
$("#email-download-document").keyup(function(){
if ($(this).val().length>0) {
$("#document-choice-button").removeProp("disabled");
} else {
$("#document-choice-button").prop("disabled","disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row">
<div class=" col-md-5">
<label for="primary">Email address</label>
<input type="email" class="form-control" id="email-download-document" name="EmailDownloadDocument" placeholder="Enter email address to get document(s)">
</div>
</div>
<br>
<div class="row">
<div class=" col-md-5">
<input id="document-choice-button" type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Send to my email' %}" disabled="disabled" />
</div>
</div>

Submit button not working on login form, using PHP and JavaScript

I am trying to code a simple login page using JavaScript and PHP to help validate the user input values with the values in a database.
However, my submit button doesn't seem to do anything... it just clears the fields.
Here is my code. There are probably MANY errors in it and I apologize for that... the PHP code I wrote is from a collection of other login pages I found on the web and I only started learning JavaScript a couple days ago...
EDIT: I have updated the code based on the mistakes that you guys pointed out. The log in button now no longer refreshes but instead doesn't do anything. I will try to figure it out or start from scratch since there is so much code that I don't understand, haha.
login.html:
`<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Login</title>
</head>
<body>
<div class="header">
<div class="container">
<h1>Login</h1>
</div>
</div>
<div class="form">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
<script src="login.js"></script>
</div>
</body>
</html>'
login.js
$(document).ready(function(){
$("form").on("submit", function(e){
e.preventDefault();{
var username = $('#inputUsername3').val();
var password = $('#inputPassword3').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "$username="+username+"&password="+newPw,
success: function(result) {
window.open(success.html);
}
});
} else {
alert("Please enter a username and password.");
}
return false;
});
});
doLogin.php:
<?php
$host="localhost";
&username="";
$password="";
$db_name="atasgtsar";
$tbl_name="members";
$connection =
mysqli_connect("$host", "$username", "$password")or die("Unable to connect.");
mysqli_select_db("$db_name");
$myUsername=$_POST['username'];
$myPassword=$_POST['password'];
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysqli_real_escape_string($myusername);
$mypassword = mysqli_real_escape_string($mypassword);
$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
$result=mysqli_query($sql);
$count=mysqli_num_rows($result);
if ($count == 1) {
session_register("myusername");
session_register("mypassword");
}
else {
echo "Wrong username or password.";
}
mysqli_close($connection);
?>
Your fields are cleared as the submit button reloads the page.
Use preventDefault(); to stop the submit from happening as you want to submit the data yourself using ajax.
$("form").on("submit", function(e){
e.preventDefault();
//...
Please do not store passwords as plain text in databases, use password_hash() and password_verify().
The MySQL Version you use is deprecated, please use MySQLi or PDO.
There is no type='username', use 'text'.
You call "check(this.form)" from the submit button, but you already bind the jQuery handler to the submit event using js.
If you want to select elements by there ID in jQuery, instead of input[id=username], use #username
Also, there sure are more mistakes in these codes.
I would always recommend to start with an extremely basic layout, print out all information (in js using console.log or alert and in php using echo) and then go n small steps, until you got your working code.
You read out the wrong input fields in your JS and remove the $ in your data string which will send via post.
Here is the correct version.
$(document).ready(function(){
$("#submit").click(function(){
var username = $('input[id=inputUsername3]').val();
var password = $('input[id=inputPassword3]').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "username="+username+"&password="+newPw,
success: function(result) {
alert(result)
}
});
}
else {
alert("Please enter a username and password.");
}
return false;
});
});
You have also forget the " on the end of the ID.
<div class="col-sm-10">
<input type="username" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
You have done too many mistakes in HTML and Javascript coding:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Login</title>
</head>
<body>
<div class="header">
<div class="container">
<h1>Login</h1>
</div>
</div>
<div class="form">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
<script src="login.js"></script>
</div>
</body>
</html>
Than in your javascript code:
$(document).ready(function(){
$("#submit").click(function(){
var username = $('#inputUsername3').val();
var password = $('#inputUsername3').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "$username="+username+"&password="+newPw,
success: function(result) {
alert(result)
}
});
}
else {
alert("Please enter a username and password.");
}
return false;
});
});
In the HTML the "tpye" attribute of the input with name "username" should be "text" and you've forgot to close the quotes after the "id" attribute:
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
In your Javascript it seems like you use jQuery but I dont see where you include the library.
The javascript selectors for IDs should be defined like this:
var username = $('#inputUsername3').val();
var password = $('#inputPassword3').val();
Keep in mind that there could be more things that I haven't notice.
The browser automatically posts your data when you click in an submit button that is inside your form, what you have to do is to prevent this default behaviour so that it actually uses your JS code.
change
$("#submit").click(function(){
for
$("form").on("submit", function(e){
e.preventDefault();
Your fields are beeing cleared because your button is a submit button and because you are not redirecting the client to any other page, it refreshes it. From what I see you want to use AJAX, try to use just a simple button with a onclick event (type="button").

How to off the Bootstrap Loading Button while text is still Empty

Please help
I want to off the bootstrap loading button while my textbox is still empty
the user need to fill all textbox before the submit button will change the text to loading
whats happening to me is that when the user click the submit button the bootstrap is loading too even the page textbox still has a required field.
this my current code
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
<form class="form-horizontal" action="button.php" method="post" style=" width:450px;">
<label class="control-label col-xs-3">Username Name :</label>
<input type="textbox" class="form-control" name="txtfirst" placeholder="First Name"required>
<label class="control-label col-xs-3">Password :</label>
<input type="textbox" class="form-control" name="txtlast" placeholder="Last Name"required>
<button type="submit" class="btn btn-primary" data-loading-text=" Loading... ">Login</button>
</form>
Please help
From the code it looks like your js function call is bound to click event of the button and not submit event of the form. The click event does not do any form validations.
Try this: http://jsfiddle.net/Dde4U/
$(function() {
$(".btn").click(function(){
if($('.form-horizontal').valid()){ //Checks if form is valid
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
}
});
});

Categories