Develop Reference

Populating a text box with the results of a calculation

I have this form where a user enters price and quantity, soon after the mouse leaves the 'Quantity' text box, I want the TotalPrice text box to be populated with result of Price * Quantity. The following is my jQuery code, however the TotalPrice text box does not get populated with the result. Hope someone can advise me on how to go about getting it right.
$("#quantity").mouseleave (function () {
var i = $("#price").val();
var k = $("#quantity").val();
var total = i*k;
$("#totalprice").val(total);
});

You need to use blur event handler of those two textboxes. Try this:
$(document).ready(function() {
$("#price").on("blur", calculate);
$("#quantity").on("blur", calculate);
//If you want to do the calculation when the page renders:
calculate();
});
function calculate(){
var i = $("#price").val();
var k = $("#quantity").val();
var total = i*k;
$("#totalprice").val(total);
}
As trincot mentioned in the comment below, you can merge the two events in one line since they call the same function:
$("#price, #quantity").on("blur", calculate);

I think you want this
jQuery(document).ready(function($) {
var price = $("#price");
var qty = $("#quantity");
var total = $("#totalprice");
/* CREATE VARIABLES ON DOCUMENT READY,
BECAUSE YOU WANT TO CACHE THE DOM SELECTION */
qty.on("blur", function(){
var i = price.val();
var k = qty.val();
total.val(i * k);
});
});
working fiddle ==> https://jsfiddle.net/tonysamperi/xqxm3900/

The problem with your code is that it is getting executed ONLY ONCE as soon as the ready function is called.
You need to attach a listner to the action element
$(document).ready(function() {
$("#quantity").mouseleave(function(){
var i = $("#price").val();
var k = $("#quantity").val();
var total = i*k;
$("#totalprice").val(total);
});
});
You can use various event listners such as onchange, onfocusout, blur, onkeyup depending on how and when you want the changes to happen. For more info on types of events and all for jquery only - https://api.jquery.com/category/events/

enter key event in javascript

Im using jQuery too. Im trying to call one method keyPressEvent on pressing enter button. Whats wrong in the code
var AplOperations = function() {
// this function i want to call when an enter button is pressed
this.keyPressEvent = function() {
// my code goes here
}
}
var myOpr = new AplOperations();
document.onkeyup = myOpr.keyPressEvent();

You don't need the () after myOpr.keyPressEvent, other wise the function will be executed intermediately.
Working example: (click first on the panel for the focus)
var AplOperations = function() {
// this function i want to call when an enter button is pressed
this.keyPressEvent = function() {
// my code goes here
var elem = document.getElementById("test");
elem.innerHTML += "key pressed<br>"
}
}
var myOpr = new AplOperations();
document.onkeyup = myOpr.keyPressEvent;
<div id="test"></div>

You have to wait for the keyup and execute your things in callback. Right now it executes when the script gets execute.
document.onkeyup = function () {
myOpr.keyPressEvent();
}
Updated Demo

This line is wrong:
document.onkeyup = myOpr.keyPressEvent();
Using brackets immediately calls the function and the result is assigned to the onkeyup handler. If you remove the brackets your function will be assigned as a handler

Change value of first iteration input with next iteration input value

Structure Concept:-
Basically, i am trying to create the modal window containing input and that modal window currently fires when the input on index page get focused for that I have used data attribute to make a link between them by assigning them same attribute value.
Javascript Concept:-
for the modal window, I have created the modal object. and model object contains a bindModal method which takes one argument and that argument is data attribute value. after taking that value bindModal method will search dom elements containing that particular value and after the search, I iterate over them using each loop.
Problem
So basically I want whenever user starts typing on the model input it should get written automatically in input on the index page.
I will appreciate you all if guys help me out to make my code more optimized and well structured and most important thing is that let me know what mistake I have done in overall work Thanks
JavaScript Code
var modal = function () {
this.toggleModal = function () {
$('#modal').toggleClass('content--inActive').promise().done(function () {
$('#modal__close').on('click',function(){
$('#modal').addClass('content--inActive');
});
});
}
this.bindModal = function (bindVal) {
var bindValue = $(document).find('[data-modal-bind = ' + bindVal + ']');
$.each(bindValue, function (index) {
var bind1 = $(this);
if(index === 1) {
var bind2 = $(this);
$(bind1).change(function (){
$(bind2).val(bind1.val());
});
}
});
}
}
var open = new modal();
$('#input_search').on('click',function(){
open.toggleModal();
open.bindModal('input');
});

Here is one way to do what you want:
var modal = function() {
this.bindModal = function(bindVal) {
var bindValue = $('[data-modal-bind = ' + bindVal + ']');
bindValue.each(function(index) {
$(this).keyup(function() {
var value = $(this).val();
bindValue.each(function(i, e) {
$(this).val(value);
});
});
});
}
}
$('#input_search').on('click', function() {
var open = new modal();
open.bindModal('input');
});
Changes done:
I cached the inputs with same binding values in bindValue variable, and then bound the the keyup event for each of them. On keyup, the value of the current input is get in value, which is then assigned to each input using the inner loop.
This makes the inputs to be in sync while typing. Hope that solves your issue.

How can i optimize my Jquery code?

I've created some JavaScript using Jquery, for the page animation :
I trying to optimize it since i repeat the same thing for subtab1, subtab2, subtab3.
The same function is executed for all of them, and the only thing is changes is variable i iterating on?
Any suggestion?
<script type="text/javascript">
$(document).ready(function () {
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
var $fundosdiponiveis = $('#fundosdiponiveis');
var $fundosdiponiveisTab = $('#tabs1');
$defensivo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$defensivoSubTab.removeClass("hide");
$defensivoSubTab.show();
});
$equilibrado.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$equilibradoSubTab.removeClass("hide");
$equilibradoSubTab.show();
});
$activo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$activoSubTab.removeClass("hide");
$activoSubTab.show();
});
});
</script>
For a while:
var $fundosdiponiveis = $('#fundosdiponiveis');
This is my default div.
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
That divs apears when i clicking on one of the following tabs:
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
And that button hides and changes style"display" to none, on click, of my three #subtab's
var $fundosdiponiveisTab = $('#tabs1');
Any suggestion?

You could write a function that returns the proper function:
function createShowTabFunc(tab) {
return function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
tab.removeClass("hide");
tab.show();
}
}
Then assign your click handlers:
$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));

Have a common class attribute to all the tab's and you just need to write $('.class').click() and in this get the id of the corresponding tab and according to the id fetched by attr function, you can have an if else to define your variables inside the if else and execute your code block.

If the value of an input is greater than 0 dynamically populate other inputs on a page

Right now I'm using javascript to get the job done but i'm using onkeyup. This won't work for me because i'm using a button to populate the "var first". When a user pushes the button it populates the var first so there is no actual keyup/keydown.
<script>
window.onload = function () {
var first = document.getElementById('USERDEFINE1'),
//second = document.getElementById('ADDRESS2');
third = document.getElementById('PHONENIGHT');
fourth = document.getElementById('INTERNET');
fifth = document.getElementById('last_purchase');
sixth = document.getElementById('last_purchase_date');
first.onkeyup = function () { // or first.onchange
//second.value = '4444';
third.value = '111-111-1111';
fourth.value = 'NONE';
fifth.value = 'N/A';
sixth.value = 'N/A';
};
};
</script>
could i use something like:
if (document.getElementById(first.value) > 0
and if so how do i implement into my current javascript or should i rewrite it all together? Thanks in advance.

You will simply have to run the same population logic after pressing the button and after pressing a key in that input. You can also rely on other events like change, depending on how dynamic you want your interface to be.
Basically,
function populateInputs() {
//if we are in here, it means the value of first is > than 0
//at this point you can populate your other inputs
}
document.getElementById('your-button-id').addEventListener('click', function () {
first.value = 10; //init the value greater than 0
populateInputs(); //we know value is greater so populate
});
first.addEventListener('keyup', function () {
if (first.value > 0) {
populateInputs();
} else {
//first.value is not greater than 0
//reset input values to N/A or blank?
}
});