character counter - Form Progress Bar - Field

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

character counter - Form Progress Bar - Field

Post by avoosh »

I am trying to get the form below to use form field progress bar at this link
http://www.dynamicdrive.com/dynamicinde ... input2.htm

The php code for the category description field. How can I call in the javascript with the category_description code below?

Code: Select all

$fields['category_description']  = array('text' => NULL,
                               'field' => $form->makeTextAreaField('category_description', '75', '5',
                               setNULL($categoryAdmin->info['category_description']),
                               'style="width: 100%"'),
                               'enabled' => $categoryAdmin->displayForm,
                               'required' => true,
                               'notes' => NULL);
 
Thanks for your help
 
 

Code: Select all

<form>
 
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)"></textarea><br />
 
<div id="progressbar1" class="progress"></div>
 
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
 
</form>
 
 
 
 

Code: Select all

 
 
<script type="text/JavaScript">
 
 
/***********************************************
* Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/
* Modified by Dynamic Drive for minor changes
* Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/
 
function textCounter(field,counter,maxlimit,linecounter) {
    // text width//
    var fieldWidth =  parseInt(field.offsetWidth);
    var charcnt = field.value.length;        
 
    // trim the extra text
    if (charcnt > maxlimit) { 
        field.value = field.value.substring(0, maxlimit);
    }
 
    else { 
    // progress bar percentage
    var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
    document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px";
    document.getElementById(counter).innerHTML="Limit: "+percentage+"%"
    // color correction on style from CCFFF -> CC0000
    setcolor(document.getElementById(counter),percentage,"background-color");
    }
}
 
function setcolor(obj,percentage,prop){
    obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
 
</script>
 
 
 

Code: Select all

<style type="text/css">
 
.progress{
    width: 1px;
    height: 14px;
    color: white;
    font-size: 12px;
  overflow: hidden;
    background-color: navy;
    padding-left: 5px;
}
 
</style>
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: character counter - Form Progress Bar - Field

Post by avoosh »

Can anyone help with this one?
nshiell
Forum Newbie
Posts: 12
Joined: Mon Oct 19, 2009 12:20 pm

Re: character counter - Form Progress Bar - Field

Post by nshiell »

I'm not gonna build this for you,
What doesn't it do?
Is it working at all?
This is JavaScript why do you need to integrate PHP script here, I'm confused?
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: character counter - Form Progress Bar - Field

Post by avoosh »

The first code is for entering a short description. Yes it works but needs a script to limit the number of characters that can be entered into the field. The progress bar javascript code will show a bar and stop the ability to enter more characters once the limit is reached. I need to combine the two.
Post Reply