I am sorry,. correcting the obvious mistake still no result.
var inp = $(“.form-group”).find(".check");
can I get help? I don't understand what is the problem.
I don’t know how to use debugger tools yet, later I’ll start learning.
Not quite sure what you’re trying to achieve here – with $('.form-group') you’ll get all .form-group elements on the page, and with find('.check') all .check elements inside those form groups; it’s equivalent to selecting $('.form-group .check'). You can then do something with those elements such as getting or setting their values, for example with an each():
$('.form-group .check').each(function () {
// `this` refers to the current .check element here
console.log(this.value)
})
Alright, it’s quite essential really so take your time; and if you’re then still having trouble debugging your code we can of course assist you.
Thank you for help. I managed to get some result but I get a lot of undefined with alert() that I use to check results, also textarea is skipped, possibly because it is not a form-group descendent, please have a look. thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.warning {
color:red;
}
.ok {
color:green;
}
</style>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<!--<form class="form-horizontal" action="/action_page.php">-->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="firstName">
<span class="glyphicon glyphicon-star"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group ">
<span class="input-group-addon glyph2 fst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_contact fst-name-field"
name="First Name" id="firstName" placeholder="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your email</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lastName">
<span class="glyphicon glyphicon-star"></span> Last Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 lst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_contact lst-name-field"
name="Last name" id="lastName" placeholder="Last Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your last or family name.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="inputEmail">
<span class="glyphicon glyphicon-star"></span> Email Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 email-glyph next">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control check inputbgr_contact email-field"
name="E-mail" id="inputEmail" placeholder="E-mail">
</div>
<div class="inputstatus">
<span class="error">Please enter your E-mail.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="phoneNumber">
<span class="glyphicon glyphicon-star"></span> Phone Number :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 phone-glyph">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input type="tel" class="form-control check inputbgr_contact phone-field"
name="Phone Number" id="phoneNumber" placeholder="Phone Number">
</div>
<div class="inputstatus">
<span class="error">Please enter your phone number.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="postalAddress">
<span class="glyphicon glyphicon-star"></span> Postal Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon check glyph3 address-glyph">Postal :</span>
<textarea rows="3" name="Postal Address" class="form-control check inputbgr_reg address-field" id="postalAddress" placeholder="Postal Address"></textarea>
</div>
<div class="inputstatus">
<span class="error">Please enter your postal address.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="ZipCode3">
<span class="glyphicon glyphicon-star"></span> Zip Code :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 zip-glyph">zip code</span>
<input type="text" class="form-control check inputbgr_reg zip-field"
id="ZipCode3" name="zip code" placeholder="Zip Code">
</div>
<div class="inputstatus">
<span class="error">Please enter your Zip code.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">
<span class="glyphicon glyphicon-star"></span> Password :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 email-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwd" type="text" class="form-control check inputbgr_reg email-field" name="Password" placeholder="Enter Password">
</div>
<div class="inputstatus">
<span class="error">Please enter your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">
<span class="glyphicon glyphicon-star"></span> Password:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 email-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwd" type="text" class="form-control check inputbgr_reg email-field" name="Password retype" placeholder="Retype Password">
</div>
<div class="inputstatus">
<span class="error">Please retype your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Gender :</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="male"> Male
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="female"> Female
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn1">Submit</button>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$('.input-group, textarea').on('focusin focusout input', function (event) {
console.log('cnanged');
var name = event.target.name
var value = event.target.value.trim()
var $error = $(this).next().find('.error')
if (value) {
$error.html('Your ' + name + ' field is OK ' + value).addClass("ok").removeClass("warning");
} else {
$error.html('Your '+name + ' field is empty').addClass("warning").removeClass("ok");
}
});
$(".btn1").click(function(){
$(".form-group, textarea").each(function(){
var inputattr = $(this).find(".check").attr("name");
alert(inputattr);
});
});
});
</script>
</body>
</html>
A textarea does not have any children, so you won’t find() and .check elements here. You can check this conveniently in the debugger – set a breakpoint inside the each() loop, and inspect what this refers to, and what the result of $(this).find('.check') is. You don’t need any alert()s.
thank you for help, unfortunately I am not yet there. Can you help me to make textarea vizible for each()-find()?thank you.
What has this to do with the code you posted above? Where is the textarea now getting hidden?
this is the code ;part I try to access but alert() gives me undefined message.meanwhile other field names are displayed… also other fields get undefined displayed. I need just fields with star, also textarea that is address. the rest is not needed. the code of address:
<div class="form-group">
<label class="control-label col-sm-3" for="postalAddress">
<span class="glyphicon glyphicon-star"></span> Postal Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon check glyph3 address-glyph">Postal :</span>
<textarea rows="3" name="Postal Address" class="form-control check inputbgr_reg address-field" id="postalAddress" placeholder="Postal Address"></textarea>
</div>
<div class="inputstatus">
<span class="error">Please enter your postal address.</span>
<span class="feedback"></span>
</div>
</div>
</div>
As I already explained a textarea doesn’t have any children, and thus it also will not contain a .check element having a name attribute; hence you’re getting undefined here.
I uderstand that but I dont know what to do to get its attribute and content. can you help me with thid details?thank you.
If you want to get the name attributes of all $('.form-group .check') elements, just iterate over those directly rather than over $('.form-group, textarea') and then getting $(this).find('.check') – the textare is the .check element here. Also see my reply #84 where I already posted the code how to do this for the value.
1 Like
unfortunately alert gives undefined only,
$(".btn1").click(function(){
$('.input-group .check').each(function(){
var inputattr = $(this).find(".check").attr("name");
alert(inputattr);
});
});
The element on which the check class is on is a span element. The span element does not have a name attribute on it. That is why you are getting undefined.
Do you need to move the check class to the textarea element instead?
Hi Paul
I am sory but I am back to square 1. the form experiment finaly works but as I applied in my bs 3 example/bs 3 is my former experiment/ the jquery part is effectles, as I click on the field, nothing happens. I realized applying bs means also a lot of embedding. does it affect the script?thank you.
registration
It seems that this class is on the textarea as well… either way, there is no .check element that has a .check child you’d find() here:
In this code, this already refers to the .check element.
The browser console says that your scripting code has a syntax error somewhere within it. A code linter is how do you find obvious errors in your JS code.
I prefer to use JSLint but it’s pretty harsh. You might prefer to use ValidateJavaScript instead.
With ValidateJavaScript, in the Settings area under Environments tick the Browser and jQuery checkboxes, and you’re all ready to validate your code.
1 Like
When your code isn’t properly indented it can be difficult for you to understand the structure of your code.
I recommend using beautifier.io on your code before using a linter or validation, to easily fix many indentation and formatting problems. That way, it is easier to see when you have any obvious structural issues.
1 Like
I tried beautifier.io. never used it so no success, I did manally but in codepen I didn’t see essential difference. so can you help me with the code? I just copied and pasted it in previous working environment to the final one and is not working, the is effectless clcking on form doesn’t no checking happen.
Okay, let me break it down into these simple terms.
- The form isn’t being validated.
- The code that should be validating the form isn’t working.
- The browser console tells us
Uncaught SyntaxError: Unexpected end of input
The Unexpected end of input means that one of the sections of code hasn’t been properly closed.
How do we find out what hasn’t been properly closed? The indentation of the code tells us that. But we can only understand that when correct indentation is used.
Using beautifier.io we end up with the following from the code. I’ve removed most of the middle part of the scripting code as that’s not relevant when it comes to the indentation of the code.
$(".btn1").click(function() {
$('.input-group, textarea').on('focusin focusout input', function(event) {
console.log('cnanged');
var name = event.target.name
...
});
$(".btn1").click(function() {
$('.input-group').each(function() {
var inputattr = $(this).find(".check,textarea").attr("name");
alert(inputattr);
});
});
Below the first line .btn1 is the .input-group section on line two. That looks to have an appropriate closing tag section. But, that is followed by another .btn1 click section which is currently indented inside of the line 1 .btn1 section. That is not appropriate.
Line 2 looks to be properly closed, but line 1 doesn’t have a proper close to it. What you need to do is to close off the .btn1 click statement before the other .btn1 click statement starts.
When you correctly do that, beautifying the code once again will fix the indentation which leaves you with properly indented code. Another benefit of doing that is that the code then becomes much easier for people to understand.
3 Likes
Hi Paul
thank you for help.
I returned to my modal, I managed to ad event ‘management’ and ‘filters’ but password retype comparison is not working. please have a look my codepen and please help me, thank you.
password comparizon
I can’t seem to find that section. Can you give more details about it?