So I am trying to make it when someone types in a "textarea" and while typing it displays the number of characters type so far. The code below is the field I am trying to have the counter for. I want the character counter by the work Troubleshooting. Any ideas how I can go about do it??
<tr>
<td width="70%">
<b>Troubleshooting</b><br />
</td>
<td width="30%">
<a href="javascript: validateHP()" onMouseover="buttonObject_HP.src='images/hp_1.png'" onMouseout ="buttonObject_HP.src='images/hp_0.png'">
<img name="buttonObject_HP" src="images/hp_0.png" border=0 alt="" width="75" height="20"/></a>
</td>
</tr>
</table>
<textarea class="normal" id="Reported" name="Reported" rows="12" cols="51" onchange="validateText();"></textarea>
I did the following to get what I wanted.
Placed the following in the head
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 10000) {
val.value = val.value.substring(50, 10000);
} else {
$('#charNum').text(2000 - len);
}
};
</script>
Then placed the following div under my Troubleshooting
<div id="charNum">Characters Left</div>
Lastly I added the following to my textarea
onkeyup="countChar(this)"
You can use this in your code. It uses AngularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>{{name.length}}</h1>
</div>
</body>
</html>
Related
I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
jquery #.js:
$document.ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
$("rembtn").click(function(){
$(this).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
$("#myTable tbody").append(blankRow);
}
});
}
else{
alert("Error: Please provide input for all fields")
}
});
});
I'd greatly appreciate any help on this matter.
I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.
$(document).ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
}
else{
alert("Error: Please provide input for all fields")
}
});
});
function remove(elem){
$(elem).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
I am trying to write a simple product management program. Basically, when users input a product name, it will be saved to an array and displayed on the table using a for loop.
I am having trouble with my codes here. It shows duplicate each time I click add a product. For example, the 1st time I add productA, it shows productA. The second time I add productB, it shows productA, productA, productB (duplicate productA).
I know the problem is within the loop I use, but have no idea how to fix.
I cannot paste HTML code here, but here is the link to my codes. https://github.com/minhle0105/functionPractice/tree/main/productManagement
Thanks everyone
You were displaying products array instead of the new product, that's what it was displaying the whole array.
TRY This
<!DOCTYPE html>
<html>
<head>
<title>Product List Management</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Add New Product</p>
<div class="add_product">
<input type="text" name="productAdd" id="productAdd" placeholder="New Product">
<button type="button" id="addbtn" onclick="addProductToList()">Add</button>
</div>
<p>Display All Products</p>
<div class="productDisplay" id="productDisplay">
<table class="table">
<thead>
<tr>
<th style="text-align: left; background-color: white;">Product Names</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<script>
let products = [];
let count = 0;
function addProductToList() {
let productAdd = document.getElementById("productAdd").value;
products.push(productAdd);
document.getElementById("result").innerHTML ="";
displayProduct(products)
}
function displayProduct(products) {
for(let i=0; i<products.length; i++){
document.getElementById("result").innerHTML +=`<tr>
<td>${i+1}</td>
<td>${products[i]}</td>
<td><button type="button" class="btn edit">Edit</button></td>
<td><button type="button" class="btn delete">Delete</button></td>
</tr>
`
}
}
</script>
</body>
</html>
Something like this
let products = [];
let count = 0;
function addProductToList() {
let productAdd = document.getElementById("productAdd").value;
products.push(productAdd);
document.getElementById("productAdd").value=''; document.getElementById("result").innerHTML ="";
displayProduct(products)
}
function displayProduct(products) {
for (var i = 0; i < products.length; i++) {
document.getElementById("result").innerHTML +=`<tr>
<td>${products[i]}</td>
</tr>
`
}
}
<div class="add_product">
<input type="text" name="productAdd" id="productAdd" placeholder="New Product" required>
<button type="button" id="addbtn" onclick="addProductToList()">Add</button>
</div>
<div class="productDisplay" id="productDisplay" style="margin-top: 15px;">
<table class="table">
<thead>
<tr>
<th>Product</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
i tried an html program for checking validation for empty field but it does't working?
please help me to show what is the error in my code?
the code snippet is below..
i tried an html program for checking validation for empty field but it does't working?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body
{
padding: 10px;
font-family:Calibri;
font-size:12pt;
}
td
{
padding:5px;
}
input
{
font-family:Calibri;
font-size:12pt;
}
span
{
font-family:Calibri;
font-size:9pt;
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<table>
<tr>
<td>First Name:
</td>
<td><input type='text' id='txtFName' class="required"/ >
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type='text' id='txtLName' class="required"/ >
</td>
</tr>
<tr>
<td>Age:
</td>
<td><input type='text' id='txtAge'/ >
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input type='text' id='txtEmail' class="required"/ >
</td>
</tr>
<tr>
<td colspan="2" style='text-align:center;'><input type="button" id="btnSubmit" value=" Submit ">
</td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function() {
$('#btnSubmit').click(function(e)
{
alert("hai");
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
else
alert('Thank you for submitting');
});
});
</script>
Add the Jquery library first before the plugin, check this fiddle.
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Include jQuery library in your head tag and try.
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Web application frameworks and tools are becoming smarter day by day, if the web-developers-community needs a change in framework/tools which is widely accepted and common, it gets adopted and rolled out, and all such tools have become so much web-developer's friendly today, specially Rails, jQuery etc, now you just need to google your wish, and you will find some plug-able, minimum setup/config libraries waiting for you to try out :)
So in this case just google for html form inputs validations.
I have below code to retrieve some text from a php document:
$.get("server/test.php", function(data){
$('#thumbdest').prepend(data);
// $('#thumbdest').html(data);
});
The commented line returns everything as expected, but the prepend data does not. It seems to strip HTML tags when inserted. I can't use the commented line because I have to insert multiple items after each other. $('#thumbdest').html(data); replaces everything in the thumbdest div as expected.
Below is the HTML I should get when using prepend
<tr>
<td>
<a href="#modal" class="thumbnail tableimg" role="button" class="btn" data-toggle="modal">
<img src="assets/img/huvudbilder/thumbs/img.png" class="tableimg" alt="">
</a>
</td>
<td>Test1</td>
<td>Test2</td>
</tr>
This is what I actually get from using prepend
<a href="#modal" class="thumbnail tableimg" role="button" class="btn" data-toggle="modal">
<img src="assets/img/huvudbilder/thumbs/img.png" class="tableimg" alt="">
</a>
Test1
Test2
Which in turn screws up the whole table. All the table elements disappear, why is that?
EDIT:
When testing alert(data) after the prepend I get below:
<tr>
<td>
<a href="#editImage_1222866094" class="thumbnail tableimg" role="button" class="btn" data-toggle="modal">
<img src="assets/img/huvudbilder/thumbs/favicon32.png" class="tableimg" alt="">
</a>
</td>
<td>Test1</td>
<td>Test2</td>
</tr>
Structure of the #thumbdest:
<table class="table table-hover">
<p> </p>
<thead>
<tr>
<th></th>
<th>Namn</th>
<th>Tid</th>
</tr>
</thead>
<tbody id="thumbdest"></tbody>
<tbody>
<?php getImageList($conn); ?>
</tbody>
</table>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Script Test</title>
<script src="jquery.min.js"></script>
<script>
// example
$(function() {
$('.button').click(function(e) {
e.preventDefault();
var $mytext = "Test";
$("#key").prepend($mytext);
});
});
</script>
</head>
<body>
Test
<div id="key"></div>
</body>
</html>
Here, prepend() is working as it is supposed to, not to strip tags.
What you need to do is to place the <tbody> inside the <div id="thumbdest"> and then change your following script line from $('#thumbdest').prepend(data); to $('#thumbdest tbody').prepend(data);
Source: http://forum.jquery.com/topic/prepend-stripping-out-html-table-tags
i'm trying to replicate what you can see in the image here in jquery to make a touch enabled version of an existing application:
I'm using jquery-ui sliders and i'd like to keep using them because i have a lot of business logic tied to them, actually they have this look:
I need help for the css and html part, i don't know how to make the effect where the "slider" gets filled when the user click on the "plus" button and on how i should organize my HTML to achieve that look.
My markup is as follows:
<table>
<tr>
<td>
<div id="timeName">
Tempo a disposizione
</div>
<div id="travelTime">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Architecture and Heritage
</div>
<div id="Architecture_and_Heritage" class="param" data-id="3">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Culture
</div>
<div id="Culture" class="param" data-id="5">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Fairs Performances and Special Events
</div>
<div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Food and Drink
</div>
<div id="Food_and_Drink" class="param" data-id="1">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
</table>
Is this any help? It's not really styled but sort of gives the idea: http://jsfiddle.net/TU95t/
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
var select = $( "#demo" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
value: 1,
range: "min",
change: function(event, ui) {
var sliderValue = $( "#slider" ).slider( "option", "value" );
$('#sliderPosition').html(sliderValue);
}
});
$('#increase').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue + 1 );
});
$('#decrease').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue - 1 );
});
});
</script>
<div id="demo">
<div id="sliderPosition">1</div>
</div><!-- End demo -->
<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
+ Increase Slider Value
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
- Decrease Slider Value
</div>
</body>
</html>
<!-- End demo -->