I have been able to make some progress on a program but am running into a problem that I can't quite figure out. In the script, when the text box loses focus it is supposed to update the total cost. At this point it retrieves the number from the html code, but it is not retrieving the number that is input.
function productCosts()
{
var totalMap = document.getElementById('qty1');
var quantity1 = parseFloat($("qty1").value);
var price1 = parseFloat($('price1').value);
var totalMapBlur = function()
{
var totalMapCost = $('cost1');
totalMapCost = (quantity1) * (price1);
alert(price1);
alert(quantity1);
alert(totalMapCost);
}
qty1.onblur = (totalMapBlur);
}
I have created a fiddle so that you can see all of the code. http://jsfiddle.net/KRFjd/1/
Any help is greatly appreciated.
P.S. If you feel my question is not written well enough, please let me know how to improve, don't just review the question negatively. I am trying.
The problem is that you only set quantity1when you call productCosts() when the document is first loaded. You don't update it when the user edits the input field. And if you want the Cost column to be updated, you have to assign to its value.
var totalMapBlur = function()
{
var quantity1 = $('qty1').value;
var totalMapCost = (quantity1) * (price1);
alert(price1);
alert(quantity1);
alert(totalMapCost);
$('cost1').value = totalMapCost;
}
FIDDLE
Related
I am trying to create an order form as a table, where a user enters a quantity required for a product in a row and the corresponding value is calculated by multiplying the user entry by the price held in another element of the same row of the table.
The form is loaded as a WebApp via Google and uses an Apps Script to retrieve the table values from a Google Sheet. The form loads OK with the data as expected but I just can't get the calculation part to work.
If I click the "place Order" button at the bottom of the form, the numberUsed values are included as parameters in the URL so it looks as though the values are updating in those elements but I haven't been able to access them to do the calculation and display it in the element called "value".
I am a novice programmer so I am sure it is something basic I am doing wrong (or not doing). I have created a JSBin https://jsbin.com/siwerat/edit?html,js,console,output and I have tried several variations of code derived from other answers and videos over the last couple of weeks without success so any help will be much appreciated.
//var numRows;
document.addEventListener('DOMContentLoaded', function() {
//new
var elems = document.querySelectorAll('cart');
var instances = M.FormSelect.init(elems);
// end new
document.getElementByname("cart").addEventListener("submit", getValues); //used to submit form - needs validation
//document.getElementByName("numberUsed").addEventListener("oninput",getValues);//used to submit form - needs validation
});
function test(event) {
"use strict";
event.preventDefault();
console.log("getValues function triggered");
}
function getValues() {
event.preventDefault();
var rows = document.querySelectorAll("package-row");
rows.forEach(function(currentRow) {
var numberUsed = Number(currentRow.querySelector('#numberUsed').value);
var price = Number(currentRow.querySelector('#price').value);
//var inPackage = Number(currentRow.querySelector('#inPackage').value);
var inPackage = 1;
var revenue = 1;
document.querySelectorAll('numberUsed');
if (numberUsed == "") {
if (isNaN(inPackage) || isNaN(price)) {
return;
}
revenue = price * inPackage;
} else {
if (isNaN(numberUsed) || isNaN(price)) {
return;
}
revenue = price * numberUsed;
}
var value = revenue * 5;
//currentRow.querySelector("#revenue").innerHTML = revenue;
currentRow.querySelector("#value").innerHTML = value;
});
}
Thanks Rafa for the guidance. After further reading/analysis I have got it working. The Event bubbling video by Learn Google Spreadsheets: [https://www.youtube.com/watch?v=fYpGe5ngujk][1] and an article on EncodeDNA.com (Dynamically create HTML table and Button using Javascript) helped narrow down the issues I had to get a solution.
Here code in edit.js :
checkmytime : function(form){
var thisInstance = this;
var accountName = thisInstance.getAccountName(form); // current time value
var cc = jQuery('select[name="assigned_user_id"]').prop('selected', true).trigger('change').val();
if(!cc =='selected',true){
var bb = jQuery('input[name="time"]').attr('value','0').val();
return bb;
}
},
I want to operate this function when i click on save button.
Basically i am trying to change my assigned user, and also when i select any and then press save button, in return i want nput field(time) value set to "0" ,
so to do this i wrote those lines in edit.js of my module. But still i need help to perform this process on save ,
any one please guide me if have any idea regarding this issue...
its pretty simple.. try with below.
$("button").click(function(){
var bb = $("#time").val(0);
});
And for more info related to value, text and html see below link
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set
Is it possible to make javascript to when you enter variables to add code to html..? I don't know English too good, so..I'm going to draw it!
Also, I don't want it to change everything, but I want it just to add that
info to the list..I have premade HTML page with linked CSS.
If you have any questions, please ask me, just help me.. :(
I know HTML and CSS, java..Not even a little bit.. :/
If you are here reading this, THANK YOU! <3
You have many options to add html to your page through JavaScript.
1) Simply create a div with an id
<div id="enterTextHere"></div>
2) Inside of your custom.js file or inside of <script></script>, you can use many different methods
Method 1 : Using innerHTML
var desiredElement = document.getElementById("enterTextHere");
desiredElement.innerHTML = "<p>I added text!</p>";
Method 2 : Using JQuery.append
$("#enterTextHere").append("I added text!");
I'm sure there are many more but without your specific code to reference this is the best I can do. Please use this link for your reference. It also has a lot of good information for the rest of your HTML journey. Enjoy! w3schools
Maybe something like this can help:
HTML:
<table class="table"><tr id="update-table"></tr></table>
<script>
(function(){
var updater = (function(){
function updater( options ){
this.table = options.table;
this.cells = this.table.querySelectorAll('.cell');
this.num_cells = this.cells ? this.cells.length : 0;
}
updater.prototype.update_element = function( index, value ){
this.cells[index].innerHTML = value;
};
updater.prototype.add_element = function(){
var td = document.createElement('td');
td.setAttribute('class','cell');
this.table.appendChild(td);
this.cells.push(td);
this.num_cells++;
};
return updater;
})();
window.updater = updater;
})();
var table, a, count = 0;
table = document.getElementById('update-table');
a = new updater({table:table});
for(var i = 0; i < 5; ++i){
a.add_element();
a.update_element(i,'info'+i);
}
</script>
Here is the HTML:
<form>
<textarea id="input1"></textarea>
<textarea id="input2"></textarea>
<span></span>
</form>
the js:
$("#input2").keyup{
var a = document.getElementById("input1").length;
var b = document.getElementById("input2").length;
var c=a+b;
$("span").html(c);
}
each time 'c' reach multiple 140, i need it to be added by 'b',
I've try to do this:
while(c%140 == 0){
c=c+b;
}
at 140th keyup, yes its added, but next keyup(141th) and so on 'c' back to it's value added by notihng. How to do this correctly?
thanks.
I can't be sure that I'm reading this question correctly, but if my jsfiddle of your code is a close approximation, the solution may be as simple as getting rid of the var in front of c when you add a+b. If you want c to have a persistant value, you need its scope to be outside the keyup event handler.
From the fiddle:
$(function() {
var c = 0;
$("#input2").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
if(c%140 == 0){
c=c+b;
}
$("span").html(b);
});
});
Notice that's an if, not a while. If it's supposed to be a while loop, that's an easy change to make.
Update
I think I have an idea what's going on here. You want to keep track of the total character count of your multi-page SMS messages. The updated jsfiddle has the answer to the question you wouldn't just come out and ask.
Here's the new code:
$(function() {
$("#input2, #input1").keyup( function() {
var a = $("#input1").val().length;
var b = $("#input2").val().length;
c=a+b;
c+=Math.floor(c/140)*b;
$("span").html(c);
});
});
Now, this of course assumes that input1 holds your actual message while input2 holds some text that needs to be displayed on each page. If it's the other way around, or if there's some other purpose for this code, please let me know.
I would like to ask you to find the point, why the site -I'm working on- is slow.
the conditions of the problem:
large row count (so I think maybe the problem is related to this.)
there is ajaxing event (I have tired to comment it out and the problem disappeared)
using not Mozilla (this freeze effect appear in IE and Chrome)
description of the problem (see the image):
I change the value of input
after there is an ajax call (in order to calculate prize) and it takes in FF about 30 ms otherwise more than 1 s
there is a freeze until the ajax finished (but ajax is not set to async:false)
only after that can I change the next input
I have tired to reproduce the error, but I could't. So see the original site:
site: foto/fotokidolgozas/elohivas-beallitasok.php
Log in and pass: d838292#rtrtr.com
Update: It works now fine, the trick is the following:
I use hidden input fields, their values are json_encode-d strings. I can process them anytime with js.
Thank you for any help!
Code:
$('#cikkek,#magic_bar').on("change","select,textarea,input[type!=hidden]",function(event_object){
if( $(this).attr('name') == "kijelolve" && !$(this).parents('#magic_bar').length)return true;
var cikk_id = $(this).parents('.cikk').attr('id');
var cikk_tipus = $("input[name=cikk_tipus]").val();
var tulajdonsag = $(this).attr('name');
var ertek = $(this).val();
if(ertek == "-1")return false;
if($(this).is('[type=checkbox]'))ertek = $(this).prop("checked")?'1':'0';
if(cikk_tipus=='fotokidolgozas' && (tulajdonsag=='meret'||tulajdonsag=='vagas'))
{
var sor = $(event_object.target).parents('.cikk');
var act_meret = sor.find('select[name=meret]').val();
var act_fill = sor.find('select[name=vagas]').val();
var act_zold_class = sor.find("input[name=zold_"+act_meret+"]").val()=="1" ?"zold":"feher" ;
var name = "src_"+act_meret+"_"+act_fill;
var name2 = "szoveges_uzenet_"+act_meret+"_"+act_fill;
sor.find(".img_cont").find("img").attr("src",sor.find("input[name="+name+"]").val());
sor.find(".szoveges_uzenet").text(sor.find("input[name="+name2+"]").val());
sor.find(".dpi_megfelel").text(sor.find("input[name=minoseg_"+act_meret+"]").val()+" ("+sor.find("input[name=dpi_"+act_meret+"]").val()+" dpi)");
sor.find("select[name=meret]").removeClass("feher zold").addClass(act_zold_class);
}
var before = now();
//this is the ajax part
if(ajax_modositaskor)
$.post('/_fn/cikk/mod.php',{
'cikk_tipus':cikk_tipus,
'cikk_id':cikk_id,
'tulajdonsag':tulajdonsag,
'ertek':ertek
},function(a){
var elapsed = now() - before;
if(a[0]!="1")
{
//error
alert(a[0]);
return;
}
if(a[1]!="-1")
{
//there is new price
$(event_object.target).parents('.cikk').find('.ar').text(a[1]);
}
if(a[2]!="-1")$('#cikkek_ara').text(a[2]);
osszegzest_frissit(a[3]);
var php_time = Math.round(a[4])
a_min = Math.min(a_min,elapsed);
p_min = Math.min(p_min,parseFloat(php_time));
a_max = Math.max(a_max,elapsed);
p_max = Math.max(p_max,parseFloat(php_time));
if(!a_avg)a_avg = elapsed;else a_avg= Math.round((a_avg+elapsed)/2);
if(!p_avg)p_avg = php_time;else p_avg = Math.round((p_avg+php_time)/2);
trace("ajax="+elapsed+"\tphp="+php_time+"\tajax_min="+a_min+"\tphp_min="+p_min+"\tajax_max="+a_max+" \tphp_max="+p_max+"\tajax_avg="+a_avg+" \tphp_avg="+p_avg);
},"json").error(function() { postHiba() });
});
The problem was that the hidden data was too large (see my other question), and it decreased the processing time. (Firefox seems to be well coded, because this does not mattered)
Now the problem is fixed.