We Keep Coding

Javascript Addition calculator

enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.

It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})

How to use Struts1 tag in JavaScript?

I need to display a form having flowing requirements.
The first element is a drop down with four values.
Based on the value selected from the first drop down ,I have to display either drop down or text filed (dynamically) as a second element.
My project is in Struts 1.1 and view is JSP. I have to use struts text filed and drop down. How do I achieve this?
<tr>
<td width="50%">
<bean:message key="edec.declaration.permit_detail_key" />
</td>
<td>
<html:select property="permit_detail_key" onchange="permitDetail.alignControl();">
<html:option value="">
<bean:message key="prompt.selectone" />
</html:option>
<html:options filter="false" collection="<%= option373_userName %>" property="code" labelProperty="<%=code_list_option%>" />
</html:select>
</td>
<!-- <td width="50%" align="left"><input id="textboxstyle" type="text" name="permit_detail_key" size="30" maxlength="70"> </td> -->
</tr>
<logic:present name="<%= option374_userName %>" scope="application">
<tr>
<td width="50%">
<bean:message key="edec.declaration.permit_detail_value" />
</td>
<td>
<div id="temp">
<html:select property="permit_detail_value">
<html:option value="">
<bean:message key="prompt.selectone" />
</html:option>
<html:options filter="false" collection="<%= option374_userName %>" property="code" labelProperty="<%=code_list_option%>" />
</html:select>
</div>
</td>
</tr>
</logic:present>
permitDetail.alignControl = function() {
var permit_detail_key_selected = document.forms[0].permit_detail_key.value;
// alert(permit_detail_key_selected);
if (permit_detail_key_selected == "1" || permit_detail_key_selected == "2") {
document.getElementById("temp").innerHTML = ""
} else {
document.getElementById("temp").innerHTML = "";
}
}
How to make these inner html as struts textbox or conmbobox?

There are two options:
1. Create two divs initially set the display:none style. On change of first drop down value, call a java script function and depending on value, make either div with style display:block.
2. If you do not want to do in java script, call ajax function and in struts action class, decide which div to be displayed.
Hope this helps.

Creating and submitting a form in tiptip

I just implemented tiptip and found it fantastic to use. Now i want to make a form and use it in tiptip tool tip so that user can fill and submit it.
I have created tiptip as
$('.div').tipTip({
maxWidth: 1000,
defaultPosition: 'right',
content: function (e) {
$.ajax({
url: 'tets.php',
datatype: JSON,
success: function (response) {
$('#tiptip_content').html(response);
$('body').append(response).fadeIn('1000');// the var e is the callback function data (see above)
}
});
return 'Please wait...'; // We temporary show a Please wait text until the ajax success callback is called.
}
});
I get a form in my tooltip. Now as soon as i take my mouse in it, it disappears (obviously, its a tooltip at the end). Is there any way to do what i am trying to achieve??
My html
<div class="div">Hover on Me</div>
tets.php
<form id = "testForm" method="post" action="newEmptyPHP.php">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Username</td>
<td width="250"><input name="username" type="text" class="textfield" /></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" class="textfield" /></td>
</tr>
<tr>
<td> </td>
<td><input name="remember" type="checkbox" value="d"> Remember me</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
</form>

http://code.drewwilson.com/entry/tiptip-jquery-plugin
"keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it."
Try adding this property and set it to true
Update:
Example here: http://jsbin.com/imeqes/2/
Appears to work fine when you hover over image, then hover over tip, it stays there.

Get value from a textarea and place it in a new textarea with some added texts

I have a textarea (txtar1) that will be filled up by a user with HTML codes.
I have a 'generate' button;
When the 'generate button is clicked, the value from txtar1 will be placed in a another textarea (txtar2). But with some added css code.
here's what I've done:
HTML:
<table>
<tr>
<td valign="top"><label>Enter HTML Code : </label></td>
<td><textarea id="htmlcode_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="submit_btn" value="Generate" /></td>
</tr>
<tr id="new_html">
<td><label>New HTML</label></td>
<td><textarea id="new_htmlcode_txtarea"></textarea></td>
</tr>
javascript/jquery:
jQuery('#submit_btn').click(function(){
var newVal = jQuery('#htmlcode_txtarea').attr('value');
var addVal = "#af-form-1031686823 .af-element{float:left;}" +
"#af-form-1031686823 .af-clear{display:none}:" +
"#af-form-1031686823 .af-body input.text{width: 150px!important;margin0right:15px!important}" +
"#af-form-1031686823 .buttonContainer{margin-top:-6px!important}";
jQuery('#new_html').show();
jQuery('#new_htmlcode_txtarea').attr('value',newVal);
});
What should i Do?

easy wato achieve is make use of .val() function
$("#textarea2").val($("#textarea1").val() + "text to append ")

edit in place

I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.

There's a nice plugin for this

Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});

Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});