Level 122
this is a pure JavaScript problem. Laravel should have nothing to do with it.
show some sample code and I'm sure someone can help.
2 likes
Sep 13, 2015
13
Level 1
how do I make a character limit/countdown javascript to work on my form?
I'm working on a project where I need to limit the number of characters users enter in their bio. I have tried many javascript scripts, tested to work on html pages but when I tried them on my laravel project none of them worked. I don't know why.
@extends('layouts.default')">@section('content')
<section class="container registration">
<!-- FORM 1 -->
<div class="col-sm-10 col-sm-offset-1">
<form role="form" id="step1-form" method="post" action="{{url()}}/service/professionalCreate">
@if ($errors->has())
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
@endif
<div class="row">
<div class="col-sm-12">
<div class="form-group" id="group_bio">
@if($bio)
<textarea name=Description class="form-control textarea" id="Description" name="bio" rows="4" placeholder="Keep Bio Short And Sweet" onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)">{{$bio}}</textarea>
@else
<textarea class="form-control textarea" id="Description" name="bio" rows="4" placeholder="Keep Bio Short And Sweet"></textarea>
@endif
</div>
</div>
<input readonly type=text name=remLen size="3" maxlength="3" value="500"><font size="2" color="000000"> characters left</font>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group pull-right">
<input type='submit' class='btn btn-finish btn-fill btn-success btn-wd btn-sm' name='finish' value='Save & Continue' />
</div>
</div>
</div>
</form>
</div>
<!-- END FORM 1 -->
@stop
@section('scripts')
<SCRIPT>
function checkMaxInput(form) {
maxLen = 500; // max number of characters allowed in the textbox
if (form.Description.value.length > maxLen) // if too long.... trim it!
form.Description.value = form.Description.value.substring(0, maxLen);
// otherwise, update 'characters left' counter
else form.remLen.value = maxLen - form.Description.value.length;
}
</SCRIPT>
@stopassola
Level 1
thank you for your response. I've been co-opted to work on a project using laravel. I'm quite new to the platform. I can understand that I'm having issues with javascript but when I used 'maxlength='200' and it didn't work, it got me wondering what I'm doing wrong. here's the code. javascript is at the bottom. @extends('layouts.default') @section('content')
Create your business profile today
It's simple.
</ul>
</div>
</div>
<div class="spacer-60"></div>
<!--<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-ms-8 col-xs-8">
<h3>Business Info</h3>
</div>
<div class="col-ms-4 col-xs-4">
<p class="skip pull-right"><a href="#">SKIP THIS STEP</a></p>
</div>
</div>
</div>
</div>-->
<!-- FORM 1 -->
<div class="col-sm-10 col-sm-offset-1">
<form role="form" id="step1-form" method="post" action="{{url()}}/service/professionalCreate">
@if ($errors->has())
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
@endif
<div class="row">
<div class="col-sm-6">
<div class="form-group" id="group_first_name">
@if($first_name)
{{ Form::text('first_name', $first_name,array('placeholder'=>'First Name','class'=>'form-control')) }}
@else
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" required>
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group" id="group_last_name">
@if($first_name)
{{ Form::text('last_name', $last_name,array('placeholder'=>'Last Name','class'=>'form-control')) }}
@else
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" >
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" id="group_gender" >
@if($gender)
{{ Form::select('gender', array(''=>'Select Gender','1'=>'Male','2'=>'Female') ,$gender,array('id' => 'gender','class'=>'form-control')) }}
@else
{{ Form::select('gender', array(''=>'Select Gender','1'=>'Male','2'=>'Female') ,'Select Gender',array('id' => 'gender','class'=>'form-control')) }}
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group" id="group_email">
@if($email)
{{ Form::text('email', $email,array('placeholder'=>'Email Address','class'=>'form-control','readonly'=>'true')) }}
@else
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" autocomplete="off" required>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" id="group_password">
<input type="password" class="form-control" id="password" name="password" placeholder="Create Password" autocomplete="off" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" id="group_repassword">
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Re-type Password" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" id="group_country">
@if($sess_country)
{{ Form::select('country', $country ,$sess_country,array('id' => 'country','class'=>'form-control')) }}
@else
{{ Form::select('country', $country ,'Select Country',array('id' => 'country','class'=>'form-control')) }}
@endif
</div>
</div>
<div class="col-sm-6">
<div class="form-group" id="group_state">
<select id='state' name='state' class='form-control'>
<option>Select State</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" id="group_city">
@if($city)
{{ Form::text('city', $city,array('placeholder'=>'Business City','class'=>'form-control')) }}
@else
<input type="text" class="form-control" id="city" name="city" placeholder="City" required>
@endif
</div>
</div>
<div class="col-sm-6" id='zip_div' style='display: none'>
<div class="form-group" id="group_zip">
@if($city)
{{ Form::text('zip', $zip,array('placeholder'=>'Zip','class'=>'form-control','id'=>'zip')) }}
@else
{{ Form::text('zip', '',array('placeholder'=>'Zip','class'=>'form-control','id'=>'zip')) }}
@endif
</div>
</div>
</div>
<div class="row">
<?php $bio = substr($_POST['bio'], 0, 10); ?>
<div class="col-sm-12">
<div class="form-group" id="group_bio">
@if($bio)
<textarea class="form-control textarea" id="bio" name="bio" rows="4" maxlength="200" placeholder="Keep Bio Short And Sweet">{{$bio}}</textarea>
@else
<textarea class="form-control textarea" id="bio" name="bio" rows="4" maxlength="200" placeholder="Keep Bio Short And Sweet"></textarea>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group" id="group_phone_type">
<p>
<label class="labletype">Type : </label>
@if($type == 1 || $type == '')
<label class="radio-inline">
<input type="radio" name="type" value="1" checked> Business
</label>
<label class="radio-inline">
<input type="radio" name="type" value="2" > Personal
</label>
@else
<label class="radio-inline">
<input type="radio" name="type" value="1" > Business
</label>
<label class="radio-inline">
<input type="radio" name="type" value="2" checked> Personal
</label>
@endif
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group pull-right">
<input type='submit' id='submit' class='btn btn-finish btn-fill btn-success btn-wd btn-sm' name='finish' value='Save & Continue' />
</div>
</div>
</div>
</form>
</div>
<!-- END FORM 1 -->
@stop
@section('page-js')
$(document).ready(function(){
$( 'textarea#bio' ).ckeditor();
var country = $("#country").val();
if(country == 254){
$('#zip_div').css('display','block');
}
if(country != ''){
$.get("{{ url('statelist')}}",
{ option: country },
function(data) {
var state = $('#state');
state.empty();
$.each(data, function(index,element) {
state.append("<option value='"+ element.id +"'>" + element.state + "</option>");
});
});
}
$('#country').change(function(){
if($(this).val() == '254') {
$('#zip_div').css('display','block');
}else if($(this).val() == '') {
$('#state option[value!="0"]').remove();
$('#state').append("<option>Select State</option>");
return false;
}
else{
$('#zip_div').css('display','none');
}
$.get("{{ url('statelist')}}",
{ option: $(this).val() },
function(data) {
var state = $('#state');
state.empty();
$.each(data, function(index,element) {
state.append("<option value='"+ element.id +"'>" + element.state + "</option>");
});
});
});
});
</script>
if (value.length == 0) {
$('#totalChars').html(0);
return;
}
var totalChars = value.length;
$('#totalChars').html(totalChars); //change the selector to whatever the ID of your counter area is
};
$(document).ready(function() { $('#bio').change(counter); $('#bio').keydown(counter); $('#bio').keypress(counter); $('#bio').keyup(counter); $('#bio').blur(counter); $('#bio').focus(counter); });
@stop
Level 47
First off google is amazing, but seriously you have to use JavaScript to get the input, maybe on keyup and find the length. Then set your requirements.
If(this.input.length < 10) { return true; } else { return false; }
Level 47
HTML also has the maxlenght attribute.
http://www.w3schools.com/tags/att_input_maxlength.asp
If you use this, youll still want to do a server side lenght check before saving to your database.
Level 3
Maybe it is not working because you transform it to a ckeditor field? (I have never used ckeditor, but I remember I had once problems with value lengths when using tinymce).
Often with this kind of editors the whole textarea gets removed from dom and replaced with something else. Doesn't CKeditor have some method to limit string length?
Level 122
Its a bit hard to see because of the formatting of the post.
Code blocks in this forum are identified by having three backticks (```) before and after or lines starting with four spaces.
If you go back to your original post and hover over the Posted x hours ago, you will see a pencil where you can edit the post.
However, it looks like your check is after the closing script tag?
I cannot see anywhere where you are displaying #totalChars?
also, you can tidy this;
@if($bio)
<textarea class="form-control textarea" id="bio" name="bio" rows="4" maxlength="200" placeholder="Keep Bio Short And Sweet">{{$bio}}</textarea>
@else
<textarea class="form-control textarea" id="bio" name="bio" rows="4" maxlength="200" placeholder="Keep Bio Short And Sweet"></textarea>
@endif
by using or in the blade tag;
<textarea class="form-control textarea" id="bio" name="bio" rows="4" maxlength="200" placeholder="Keep Bio Short And Sweet">{{$bio or ''}}</textarea>
Level 1
thanks @Snapey I tidied the code. this time I changed the javascript to one that's been proven to work on a plain html document. so why is it not working on a laravel document. also I'm having issues with 'maxlength'. though in some instances I specified a maxlength, it's not been working. what am I doing wrong?
Level 122
The code in your first post won't work. You can't just use dotted notation like that - my guess is that you cribbed this from something using a javascript framework like vue?
Go back to your jQuery methods.
bind a function to the keyup event of the field you want to check
console log the event happening
grab the text of the field with .val
console log the text to prove you are getting the right field
get the length of the field and console log it
Work out how many characters left and console log the answer
Write the value to a <span> with an ID you can grab hold of.
When this is working experiment with truncating the value.
Do yourself a favour and build the javascript up from scratch, understanding each step as you go rather than just copying and pasting something that looks like it might do it.
Honestly, there should be nothing to do with laravel in this little script.
Level 122
Have a look at this little codepen
Level 1
thank you again for your assistance but I have to admit that my javascript sucks. I'm working on it though but not before I get a good handle on laravel. I tested the javascript from code pen and it worked perfect. but the minute I change the id from 'comment' to 'bio', it stops working. that's what's been baffling me from the beginning. why are the attributes to this text area not working?
<div class="form-group" id="group_bio">
@if($bio)
<textarea name="Description" class="form-control textarea" id="bio" rows="4" placeholder="Keep Bio Short And Sweet" >{{$bio}}</textarea>
@else
<textarea class="form-control textarea" id="bio" name="bio" rows="4" placeholder="Keep Bio Short And Sweet"></textarea>
@endif
</div>
</div>
applying the same script
/* JQuery Code from:
http://www.findsourcecode.com/jquery/how-to-count-number-of-characters-in-textarea-jquery/ */
var maxCharacters = 255;
$('#characterLeft').text(maxCharacters + ' characters left');
$('#bio').keyup(function () {
var textLength = $(this).val().length;
if (textLength >= maxCharacters) {
$('#characterLeft').text('You have reached the limit of ' + maxCharacters + ' characters');
} else {
var count = maxCharacters - textLength;
$('#characterLeft').text(count + ' characters left');
}
});
</script>
I must be doing something wrong but since I'm beginning with laravel, I may be missing something.
Level 1
@snapey, I'm at least making some progress. if I remove this bit of code:
@if($bio)"><!-- some code goes here… -->
@else
<!-- some code goes here… -->
@endif
it all starts working miraculously. how can I keep the conditional without conflicting with my javascript? thank you again. without your pointers, I wouldn't have arrived at that deduction.
Level 122
Check you don't have two fields on the page with the id of bio. If necessary, view source and search it.
By the way, you can simplify this code by using 'or' in the blade tag and losing the if else endif
replace this
<div class="form-group" id="group_bio">
@if($bio)
<textarea name="Description" class="form-control textarea" id="bio" rows="4" placeholder="Keep Bio Short And Sweet" >{{$bio}}</textarea>
@else
<textarea class="form-control textarea" id="bio" name="bio" rows="4" placeholder="Keep Bio Short And Sweet"></textarea>
@endif
</div>
with the following
<div class="form-group" id="group_bio">
<textarea name="Description" class="form-control textarea" id="bio" rows="4" placeholder="Keep Bio Short And Sweet" >{{$bio or ''}}</textarea>
</div>
Level 1
many thanks. it's working. now what I think I'm gonna need is a website where I can learn serious javascript. because my level is what you get from w3schools. very elementary. I can google it but getting a recommendation from a pro can help cut through the chase. thanks in advance.
Please or to participate in this conversation.