I'm very new to JQuery.
I already can, get the data from textbox and do some calculation and show it to other 'textbox' though I want to post it to 'div' or 'p' whatever it is as long as not textbox.
here's my code
<div id="result" style="display:none;">
<div class="col-sm-5 text-right"><label>Participant fee (IDR):</label></div>
<div class="col-sm-7"id="parcost" ></div>
<div class="col-sm-5 text-right"><label>Populi fee (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="popcost"></div>
<div class="col-sm-5 text-right"><label>Total Estimated Cost (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="totcost"></div>
</div>
$(document).ready(function(){
$('#calc').click(function(){
var num_participant = parseInt($("num_participant").val());
var reward = parseInt($("reward").val());
var esttime = parseInt($("esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
/*
document.getElementById("result").style.display = "block";
document.getElementById("parcost").value = parcost;
document.getElementById("popcost").value = popcost;
document.getElementById("totcost").value = totcost;*/
document.getElementById("result").style.display = "block";
$("#parcost").html(parcost);
$("#popcost").html(popcost);
$("#totcost").html(totcost);
return false;
});
});
Still wont work, if I change it from "document.getelementById" to "$".
and even using "document.getelementById" it won't showed on the "div".
any ideas?
I'm not sure if you're asking this but try something like this,
var totCost = document.getElementById("totcost").value;
$("#yourDivID").html(totCost);
I'm not sure what you are asking about but if you want to send the result to a div, just use $("#divId").html(result)
I think that you must use .text or .html in place .value.
look at this example using jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>
If you wish to add a result in a div try with:
jQuery("#divID").append("<p>" + data + "<p>");
To update the content of a <div> or <p> element, you would use innerHTML instead of value.
So in your sample code you would update this line:
document.getElementById("parcost").value = parcost;
into this:
document.getElementById("parcost").innerHTML= parcost;
Furthemore, since you are already using jQuery, you can simplify your click function:
$('#calc').click(function(){
var num_participant = parseInt($("#num_participant").val());
var reward = parseInt($("#reward").val());
var esttime = parseInt($("#esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
$("#result").css("display", "block");
$("#parcost").html(parcost);
$("#popcost").val(popcost);
$("#totcost").val(totcost);
});
Related
I have an element with encoded html content as shown below.
<div class="hasTooltip">
<html>........... //more html encoded text
</div>
When I click this element, I want the content to be shown in a new window and it works fine.
$('.hasTooltip').click(function() {
var win = window.open("", "Title", "toolbar=no");
win.document.body.innerHTML = $(this).html();
});
But the problem is that the window shows the html text with decoded values but not the actual html content with all styles.
I tried the below code but no luck as it shows no content. Any tips?
win.document.body.innerHTML = $(this).html().text();
Following code should work.
function unEscape( str ){
str = str.replace(/"/g,'"').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
return str;
}
var h = document.getElementById("hasTooltip").innerHTML;
console.log( unEscape(h) )
<div id="hasTooltip">
<html></html>
</div>
Here is your solution
if you you are unable to run your code over here please check jsfiddle
https://jsfiddle.net/sq3Ljwnt/
$('.hasTooltip').click(function() {
var win = window.open("", "Title", "toolbar=no");
win.document.body.innerHTML = $("textarea").val();
});
textarea{
height:200px;
width:100%;
border:none !important;
background:none;
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="hasTooltip">
<textarea>
<html>
<h1>
This is test
</h1>
<p>
More HTML ...
</p>
</html>
</textarea>
</div>
I want to modify the below code so that selected_users remains unique after append. That is, let's append a user U to selected_users only if selected_users does not already contain a U.
The below code you can copy and paste and it will work. All dependencies are on cdns.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
div { width : 200px }
.selected { background-color:blue; }
</style>
<script>
$(document).ready(function() {
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
selected_users.remove();
});
$("p").click(function() {
if( $(this).hasClass("selected") ) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
</head>
<div id="users">
<p class="1">User 1</p>
<p class="2">User 2</p>
<p class="3">User 3</p>
<p class="4">User 4</p>
<p class="5">User 5</p>
</div>
<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>
</div>
<div id="selected_users">
</div>
You could do something like this:
$("#add").on("click", function()
{
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
if(!selected_users.find(users).lenght())
{
selected_users.append(users.clone().removeClass("selected"));
}
});
Forms like this commonly remove the item from the source list when adding it to the target list.
This sort of behavior would prevent the need to do the check, as it would be impossible to add the duplicate to your selected_users list.
Your code would look something like this for selecting/deselecting a user:
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.remove();
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
var users = $("#users");
users.append(selected_users.clone());
selected_users.remove();
});
NOTE: I have not tested the above code.
If you wanted to maintain the order of users in each of your list, you could do a sort on either list when adding to it, or you could maintain the visibility property of each user rather than actually removing/adding them from either list.
Simple solution is to remove form the list on the left hand side.
If you don;t want to do that. Try this. The idea is to assign ids to be able to check.
$("#add").on("click", function() {
var users = $("#users > p.selected");
users.uniqueId();//assigns unique id if they don't have one
//you can do above step somewhere else also for performance reasons
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.each(function(user) {
var id = user.attr('id');
var exists = $("#selected_users > [selectedid="+id+"]);
if (! exists || exists.length <= 0 ) {
selected_users.append(
user.removeClass("selected").
removeAttr("id").
attr('selectedid',id));
}
});
});
Twitter's submit tweet textbox highlights the characters that are over the character limit:
As you can see, the characters that overrun the character limit are highlighted in red. How can I achieve something like this?
You'll find the necessary solution and required code here:
How to insert <em> tag when exceeding 140 limit i.e. going negative?
...and here:
REGEX - Highlight part over 19 chars
Your question appears to be duplicitous.
Note: I didn't have the option to post the above links as a comment (i.e. privilege contingent on reputation).
Here's the code as per Simon Kuang's recommendation (see comments):
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3>Your text here</h3>
<div contenteditable="true" id="myDiv">edit me
</div>
<p>
<h3>Stuff over 19 characters</h3>
<div id="extra">
</div>
<p>
<h3>Sample output</h3>
<div id="sample">
</div>
</body>
</html>
CSS:
.highlight {
color:red;
}
JavaScript:
$(document).ready(function() {
$('#myDiv').keyup(function() {
var content = $('#myDiv').html();
var extra = content.match(/.{19}(.*)/)[1];
$('#extra').html(extra);
var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>");
$('#sample').html(newContent);
});
});
Here is the example, show alert when the limit is reached and thereafter highlight all the characters entered.
$(document).ready(function() {
var input = $('#text_text');
var warning = $('#warning');
var char_limit = 30;
input.on('keyup', function() {
var val = $(this).val();
if (val.length > parseInt(char_limit)) {
alert("limit reached");
warning.html('hello').css('display', 'block');
l = val.length
var input = document.getElementById("text_text");
input.setSelectionRange(char_limit, l);
input.focus();
} else {
warning.css('display', 'none');
}
});
});
#warning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test_box">
<textarea name="msg" cols="50" rows="5" id="text_text"></textarea>
<div id="warning"></div>
</div>
Try this (pattern)
html
<data></data><br />
<textarea maxlength="20" placeholder="20 character limit"></textarea>
js
$(function () {
$(document).on("keyup", "textarea", function (e) {
if ($(e.target).val().length >= 20) {
$("data").text($(e.target).attr("placeholder"))
.fadeIn(1000).fadeOut(9000);
};
});
});
jsfiddle http://jsfiddle.net/guest271314/8RScd/
following is my template code :
<html>
<head>
<style>
.table
{
display:table;
border-collapse:separate;
border-spacing:2px;
}
.thead
{
display:table-header-group;
color:white;
font-weight:bold;
background-color:grey;
}
.tbody
{
display:table-row-group;
}
.tr
{
display:table-row;
}
.td
{
display:table-cell;
border:1px solid black;
padding:1px;
}
.tr.editing .td INPUT
width:100px;
}
</style>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script>
var counter = 0;
var txt1 = "group_save";
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "input";
newText.name = txt1+counter;
//newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
function edit(element){
var tr = jQuery(element).parent().parent();
if(!tr.hasClass("editing")) {
tr.addClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).text();
jQuery(this).text("");
jQuery(this).append('<input type="text" value="'+value+'" />');
} else {
jQuery(this).find("BUTTON").text("save");
}
});
} else {
tr.removeClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value1 = jQuery(this).find("INPUT").val();
alert(value1);
jQuery(this).text(value1);
jQuery(this).find("INPUT").remove();
} else {
jQuery(this).find("BUTTON").text("edit");
}
});
}
}
</script>
</head>
<body >
<form name="group" method="post" action="process.cgi">
<div id="mainContainer">
<div><input type="button" value="Add" onClick="addNew()"></div>
</div>
<div><input type = "submit" value = "Save"></div>
</form>
[% IF count > 0%]
<b>Details of Groups</b><br>
<div class= "table">
<div class = "thead">
<div class = "tr">
<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
</div>
</div>
<div class= "tbody">
[%- SET i = 0;
WHILE i < id.size; -%]
<form class = "tr">
<div class = "td"> [% id.$i %]<br/></div>
<div class = "td"> [% group_name.$i %]<br/></div>
<div class = "td"> [% group_desc.$i %]<br/></div>
<div class = "td">[% actv.$i %]<br/></div>
<div class = "td action" ><button type="button" onclick="edit(this);">edit</button> </div>
<form>
[%- SET i = i + 1;
END -%]
</div>
</body>
</html>
while i run my cgi code, i got the following template error.i checked my code and didn't find that evident, which gives the error.could any one please help me track this error.so that, i can go with the rest of the modifications in the file.that is i want to save the changed content in the database.???
updated :
error ---
Undefined subroutine &main::ThrowTemplateError called at /var/www/html/centralbugzilla/groups.cgi line 24.
line no 24 is : $template->process("list/group.html.tmpl",$vars)
|| ThrowTemplateError($template->error());
Firstly, you shouldn't assume that people will just know which templating system you are using. It looks to me like you are using the Template Toolkit, but there are many template engines for Perl.
Secondly, the template is a complete red herring here. The problem is in your Perl code. When the template can't be processed successfully, your code calls a function called ThrowTemplateError, but Perl can't find that function anywhere. Where is that function defined?
(Ok, I suppose it could look like the problem is in your template and not the code. There's some error in your template which means that TT can't process it and therefore the missing function is called. So fixing the error in your template will mean that the missing function no longer gets called. But it's still missing. And it will be a problem again the next time you accidentally break your template. So best to fix it now, I think.)
I want to make a textbook where it starts out as a given width/height. Then if users type more then the given amount of space, the textbox expands downward. How do I go about doing this? Do I use CSS?
The basic textbox just displays a scroll bar when users pass the number of rows allow. How do I make it so the textbox expands the rows by say 5 more?
<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>
How do I use the example that Robert Harvey mentioned? I never used JavaScript before..
jQuery AutoResize Plugin
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Steps to use:
You need jQuery. To add it to your page:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
Then, download the plugin and put it in the same folder as your web page. To reference it, add this to your web page:
<script type="text/javascript"
src="autoresize.jquery.js"></script>
Next, add a textbox to your page:
<textarea id="comment" style="width: 400px; padding: 10px; height: 50px;
display: block; font-family:Sans-serif; font-size:1.2em;">
Type something in here, when you get close to the end the box will expand!
</textarea>
Finally, in a script block, add the code that hooks up the plugin to the textbox:
<script type="text/javascript">
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
You can add a library if you care to, or just keep track of the textarea's scrollTop property.
If scrollTop is not zero, add your rows.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title>Expand textarea </title>
<style>
textarea{overflow-y:scroll}
</style>
<script>
onload=function(){
var who=document.getElementsByName('comments')[0];
who.onkeyup=function(){
if(who.scrollTop)who.rows=parseInt(who.rows)+5;
}
}
</script>
</head>
<body>
<textarea name="comments" cols="50" rows="5"></textarea>
</body>
</html>
Here is my solution using only vanilla javascript.
Tested to work in Chrome, Firefox & IE8 and up.
On load, or whack it in a function:
var element = document.getElementById('comments');
var retractsAutomatically = false;
var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;
var resize = function() {
var length = element.scrollHeight;
if (retractsAutomatically) {
if (element.clientHeight == length)
return;
}
else {
element.rows = 1;
length = element.scrollHeight;
}
element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};
//modern
if (element.addEventListener)
element.addEventListener('input', resize, false);
//IE8
else {
element.attachEvent('onpropertychange', resize)
retractsAutomaticaly = true;
}
CSS & HTML:
textarea#comments { overflow:hidden; }
<textarea id="comments" cols="50" rows="1"></textarea>