Example here: http://jsfiddle.net/67XDq/1/
I have the following HTML:
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/>
<textarea
onKeyDown="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500);"
onKeyUp="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500)"
class="scanwid" name="q17" id="q17" rows="5" cols="">
</textarea>
</td>
</tr>
And the following Javascript:
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
For some reason, which I am completely missing, this doesn't seem to be working as intended.
It should limited the number of characters in the textarea and also countdown the number within the label but it is doing neither.
There are two issues in the fiddle
no form element
script mode was onload, which means that window object didnt have textCounter function
see updated fiddle http://jsfiddle.net/67XDq/7/, markup:
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>
Questions? <i>Maximum of 500 characters -
<input style="color:red;font-size:12pt;font-style:italic;" readonly="readonly" type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500" /> characters left</i>
<br />
<textarea
onKeyDown="textCounter(this,'q17length',500);"
onKeyUp="textCounter(this,'q17length',500)"
class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea>
</td>
</tr>
and code
function textCounter(field, cnt, maxlimit) {
var cntfield = document.getElementById(cnt)
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
CHange your html to remove all that onkey stuff
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>Questions? <i>Maximum of 500 characters - <input id="charsLeft" style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea class="scanwid" name="q17" id="q17" rows="5" cols="" maxlength="500"></textarea></td>
</tr>
And the javascript is this:
$("#q17").keyup(function() {
$('#charsLeft').val(500 - $(this).val().length);
});
Here's a fiddle: http://jsfiddle.net/67XDq/11/
see fiddle: http://jsfiddle.net/abhiklpm/67XDq/15/
modified the function:
function textCounter(field, cntfield, maxlimit) {
if (document.getElementById(field).value.length > maxlimit) {
// if too long...trim it!
document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit);
}
// otherwise, update 'characters left' counter
else {
document.getElementById(cntfield).value = maxlimit - document.getElementById(field).value.length;
}
}
also you were missing id id="q17length" in your html
edited: also u were not passing the ids as string: textCounter('q17','q17length','500');
var tweet = prompt("Write Tweet:");
var tweetCount = tweet.length;
alert("You have written " + tweetCount + " characters, you have " + (140- tweetCount) + " Chartacters remaining")
Related
I would like to find and replace the text in my textbox.
this is my script
<script>
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var resultString = str.replace(find, replace);
var numreplace = new RegExp(find, 'g');
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
</script>
and here is my html code
<html>
<body>
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hello Testing
</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" onkeyup="replaceNum()" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" onkeyup="replaceNum()" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace"
onclick="findnReplace()" title="Fill in both textbox"/>
<span id="num"></span>
</table>
</body>
</html>
expected result:
however, this is what i am getting:
ALTHOUGH it says "3words replaced" but the text in the textbox didnt get replaced.
On your script, you have run str.replace function without regex. So it will replace the first match only.
You have defined numreplace regex but have not used it.
So to make it work, it is needed to place str.replace after numreplace variable definition and use that regex inside str.replace function as follows.
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var numreplace = new RegExp(find, 'g');
var resultString = str.replace(numreplace, replace);
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hi Hi Hi Hi Testing</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace" onclick="findnReplace()"
title="Fill in both textbox" />
<span id="num"></span>
</table>
I want to add start time and end time dynamically using JavaScript:
Below is the code:
HTML:
<table id="timeTable" style="border: 1px solid black">
<tr>
<td>
<input type="text" placeholder="Enter Start Time" value="" id="vTime" class="vTime" />
</td>
<td>
<input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" />
</td>
<td>
<input type="button" value="Delete" />
</td>
</tr>
</table>
JS:
$('#timeTable').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
});
$('#add-more').click(function () {
var vTime = $(".vTime:last-child").last().val();
$('#myTable').append('<tr><td><input type="text" placeholder="Enter Start Time" class="vTime" /></td><td><input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" /></td><td><input type="button" value="Delete" /></td></tr>');
});
If I enter start time and end time first time then end time should not be less that start time, when I enter second row for start and end time then it should not be less than previous time and so on....
Can anyone please help?
Here is jsFiddle: https://jsfiddle.net/pathik2012/45La1q0s/5/
I hope the below snippet will do you good. Read inline comments for the basics.
$('#myTable').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
});
$('#add-more').click(function () {
//add new entry form
$('#myTable').append('<tr class="t-row"><td><input type="time" onfocus="clearError(this)" class="vTimeStart" /></td><td><input onfocus="clearError(this)" type="time" value="" class="vTimeEnd" /></td><td><input type="button" value="Delete" /></td></tr>');
});
$('#submit').click(function () {
$('.t-row').each(function(i, obj) {
//Get first time entries
var currentStartTimeValue = $('#myTable .vTimeStart').eq(i).val();
var currentEndTimeValue = $('#myTable .vTimeEnd').eq(i).val();
if(i > 0){
//at this point we now have a previous input to validate
//hence we check for validity
var previousIndex = i - 1;
var lastEndTimeValue = $('#myTable .vTimeEnd').eq(previousIndex).val();
if(currentStartTimeValue < lastEndTimeValue){
$(this).css('background-color','#ff0000');
$(this).attr('title','Current StartTime must be lesser than current EndTime!');
alert('Current StartTime cannot be lesser than previous EndTime');
return false;
}
}
if(!currentStartTimeValue){
$(this).css('background-color','#ff0000');
$(this).attr('title','Enter value for Start Time!');
alert('Enter value for Start Time!');
return false;
}else if(!currentEndTimeValue){
$(this).css('background-color','#ff0000');
$(this).attr('title','Enter value for End Time!');
alert('Enter value for End Time!');
return false;
}else if(currentStartTimeValue >= currentEndTimeValue){
$(this).css('background-color','#ff0000');
$(this).attr('title','Current StartTime must be lesser than current EndTime!');
alert('Current StartTime must be lesser than current EndTime');
return false;
}
if(i === $('.t-row').length - 1){
//last item in the loop. all good!
alert('All good!');
}
});
});
function clearError(el){
//reset error state
$(el).parent().closest('tr').css('background','#ffffff');
$(el).parent().closest('tr').attr('title','');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
<thead>
<td>
Start Time
</td>
<td>
End Time
</td>
<td>
</td>
</thead>
<tr class="t-row">
<td>
<input type="time" onfocus="clearError(this)" class="vTimeStart" />
</td>
<td>
<input type="time" onfocus="clearError(this)" class="vTimeEnd" />
</td>
<td>
<input type="button" value="Delete" />
</td>
</tr>
</table>
<input id="add-more" type="button" value="Add more">
<input id="submit" type="button" value="Submit">
How could I get the Final Total based on the sum of a checkbox value and the contents of a textbox?
JSFiddle example
My HTML:
<table border="1">
<tr><td>10<input type="checkbox" class="tot_amount" value="10"></td><td>10<input id="os1" type="text"></td></tr>
<tr><td>20<input type="checkbox" class="tot_amount" value="20"></td><td>20<input id="os2" type="text" ></td></tr>
<tr><td>Total<input type="text" id="total1" readonly></td><td>Total2<input id="total2" type="text" readonly></td></tr>
</table>
Final Total<input type="text" id="final" readonly >
And Javascript:
$(".tot_amount").click(function(event) {
var total = 0;
$(".tot_amount:checked").each(function() {
total += parseInt($(this).val());
});
if (total == 0) {
$('#total1').val('');
}
else {
$('#total1').val(total);
}
});
$('#os1, #os2').on('input',function(){
var os1= parseFloat($('#os1').val()) || 0;
var os2= parseFloat($('#os2').val()) || 0;
$('#total2').val(os1 + os2);
});
Just bind a focus event and do it -
$('#final').bind('focus',function(){
$(this).val(parseInt($('#total1').val())+parseInt($('#total2').val()));
});
LIVE http://jsfiddle.net/mailmerohit5/h43te3z6/
<input type="number" id="nostorey" name="" class=' InputBox' />
<table id="floor">
<tr id="headtable">
<td>
<center>Floor Names</center>
</td>
<td>
<center>Floor wise Area</center>
</td>
</tr>
<tr>
<td>
<p>1st Floor</p>
</td>
<td>
<input type='text' id="firstfloor" name='' maxlength="10" value="" class=' InputBox' />
</td>
</tr>
<tr>
<td>
<p>2nd Floor</p>
</td>
<td>
<input type='text' id="secondfloor" name='' maxlength="10" value="" class=' InputBox' />
</td>
</tr>
<tr>
<td>
<p>3rd Floor</p>
</td>
<td>
<input type='text' id="thirdfloor" name='' maxlength="10" value="" class=' InputBox' />
</td>
</tr>
<tr>
<td>
<p>4th Floor</p>
</td>
<td>
<input type='text' id="fourthfloor" name='' maxlength="10" value="" class=' InputBox' />
</td>
</tr>
<tr>
<td>
<p>Total</p>
</td>
<td>
<input type='text' id="total" readonly name='' maxlength="10" value="" class=' InputBoxD' />
</td>
</tr>
</table>
$("#nostorey").bind('change', function() {
if ($.trim($(this).val()) < 5) {
if ($(this).val().match(/^\d*$/)) {
if ($(this).val() == 1) {
console.log("1");
console.log($(this).val());
$('#secondfloor').prop('disabled', true);
$('#thirdfloor').prop('disabled', true);
$('#fourthfloor').prop('disabled', true);
} else if ($(this).val() == 2) {
console.log("2");
console.log($(this).val());
$('#secondfloor').prop('disabled', false);
$('#thirdfloor').prop('disabled', true);
$('#fourthfloor').prop('disabled', true);
} else if ($(this).val() == 3) {
console.log("3");
console.log($(this).val());
$('#secondfloor').prop('disabled', false);
$('#thirdfloor').prop('disabled', false);
$('#fourthfloor').prop('disabled', true);
} else if ($(this).val() == 4) {
console.log("4");
console.log($(this).val());
$('#secondfloor').prop('disabled', false);
$('#thirdfloor').prop('disabled', false);
$('#fourthfloor').prop('disabled', false);
}
}
} else {
var newItemHTML = '<tr><td ><span>' + $(this).val() + 'th Floor</span></td><td><input type="text" name="" class="InputBox " id="floor' + $(this).val() + '"></td></tr>';
$("table#floor tr").last().before(newItemHTML);
}
});
This is my code to tell how many floor I have in my input text by default I have 4 floors. Onchange of onstorey input I want to add the remaining floors currently what i did is to set if else but this is not working the way i want it because this way if I reduce the number of floor it is not reducing the number of input to write the area. I want to ask idea on how to make this possible
Make it in a way that when the number in storey input is more than 4 it will add the remaining floors.
When the number is reduced the number of input in the table should also decrease, but not less than the default value which is 4
This is the Sample
UPDATED sample
here
see your updated fiddle: http://jsfiddle.net/fq42seff/3/
i first added the class="floor" to all your floor input boxes, to have a unique selector for these input boxes. the entry field for the amount of floors and the total field is excluded.
then i changed your js the following:
//created two functions addFloors() and removeFloors()
function addFloors(actual, target){
for(i = actual +1;i<=target;i++) //this loop creates the new floors
{
newItemHTML = '<tr><td ><p>' + i + 'th Floor</p></td><td><input type="text" name="" class="floor InputBox " id="floor' + i + '"></td></tr>';
//i also changed the html inside the first td from <span> to <p> to match your html markup
$("table#floor tr").last().before(newItemHTML);
}
}
function removeFloors(target){
if(target >= 4) //remove all floors except the base 4
{
$('.floor').slice(target).parent().parent().remove();
//since i select the .floor input box, i have to use the parent() function two times, to move the selector up to the <tr> element
}
}
next, we extend your change function:
$("#nostorey").bind('change', function() {
curVal = $.trim($(this).val()).match(/^\d*$/); //get the value from the first input box
curFloors = $('.floor').length; //get the current nbr of floors
if(curVal > curFloors) //if you want more floors, then currently available
{
addFloors(curFloors, curVal); //add floors
}else if(curVal < curFloors) //if you want less
{
removeFloors(curVal); //remnove them
}
last but not least, enable/disable the first 4 input boxes:
$('.floor').each(function(index){ //for each .floor input box
if(index >= curVal) //if it's index is greater then the needed floor count
{
$(this).prop('disabled', true); //disable it
}else
{
$(this).prop('disabled', false); //else enable it
}
});
the last part - the enabling/disabling could be splitted and extend the add/remove functions - this would make them get run only when needed. right now, it gets executed on every value change. but i guess, you can figure out the rest by yourself...
I added a grid of checkboxes depending on the number of floors also upon generating these checkboxes i put an attribute for each checkboxes depending on which row they are in. The span text or that row will be the value of the checkboxes for that row. With the help of
Guruprasad Rao
he came up with this fiddle
Fiddle
For code betterment feel free to update the fiddle to help others
Correct me if I am wrong. Here is my for loop.
else {
var floors = parseInt($("#nostorey").val()-4);
$("tr[id^=floor]").hide();
if(floors != NaN){
for(i=5;i<floors+5 ;i++){
var newItemHTML = '<tr id="floor'+i+'"><td ><span>' + i + 'th Floor</span></td><td><input type="text" name="" class="InputBox floor"' + i + '"></td></tr>';
$("table#floor tr").last().before(newItemHTML);
}
}
i'm writing an asp page using vb.net and i need to count the number of characters in my textarea and display the message:"X characters Remaining."
that's my asp code:
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
</td>
Here is a JSFiddle
HTML:
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<p id="message"></p>
JS:
var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 50;
var checkLength = function() {
if(area.value.length < maxLength) {
message.innerHTML = (maxLength-area.value.length) + " characters remaining";
}
}
setInterval(checkLength, 300);
I have a little but functional solution my friend, try this:
HTML CODE
<textarea name="message"placeholder="Reply message..." maxlength="155" onkeyup="counter(this);"></textarea>
<div id="counter_div">0/155</div>
JAVASCRIPT CODE
<script>
function counter(msg){
document.getElementById('counter_div').innerHTML = msg.value.length+'/155';
}
</script>
This case limit 155 characters.
this will return current length of the textarea using jquery var length = $('#content_txt').val().length; and rest of the logic you have to give it a try..
try this
function fix(dis)
{
var total=50; // ho many you want to show
var val = dis.value;
var count = val.length;
document.getElementById('remaining').innerHTML= total-count;
}
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50" onkeyup="fix(this)"></textarea>
</td>
<p><span id="remaining">0</span> Characters remaining</p>
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<span id="character-count">100</span> characters remaining.
</td>
var totallength = 100;
$('textarea#input').on('keydown, keyup', function(e) {
$('span#character-count').text((totallength - input.val().length));
});