Develop Reference

Swap data value based on query string

We inherited some old code which is in place and working. It is a simple pricing switch between £ GBP and $ USD - the price updates onChange as seen below in the pen.
PEN link
https://codepen.io/go6/pen/rNOgaee
$(function() {
$("#curr").on("change",function() {
var curr = this.value;
var prefix = curr=="500"; // or ["usd","yen",...].indexOf(curr); for more
var sign = curr=="500"?"":"";
$(".value").each(function(){
$(this).text(
(prefix?sign:"") +
$(this).data(curr) +
(prefix?sign:"")
);
})
}).change();
});
Question
The price by default is set to USD, as per the data-usd value when the page loads. We want to supply a page URL query string eg /pricing?curr=GBP which can toggle the pricing to GBP.
Tried so far but not working
I have tried a few combinations using this Answer:
Show / Hide elements based on query string value
but so far, none have worked. Please can someone assist in implementing a query string sitch of currency?

Just add this to your code:
if(document.URL.indexOf("curr=GBP") !== -1)
{
$(".value").each(function(){
$(this).text($(this).data("gbp"));
})
$("#curr").val("gbp");
}

how to add values from dynamically generated table row to one input box

function addTotal(){
var txtTotal = document.getElementById('txtTotal').value;
var txtGrandTotal = document.getElementById('txtGrandTotal');
txtGrandTotal.value += parseInt(txtTotal);
}
this is delete code
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
if the user deletes the row then the values from the Grand Total Should decrease. anything I should do any body
how to add values to the "Grand Total" to the Total input box Total is the dynamically created table data and I want to add values to that "Grand Total input box" but values are appending not the adding and also I have added an image of the screen or output. Thanks in advance.

Instead of
txtGrandTotal.value += parseInt(txtTotal);
as txtGrandTotal.value isn't converted to int, it is string
so you should do:
if (!txtGrandTotal.value)
txtGrandTotal.value = parseInt(txtTotal);
else
txtGrandTotal.value = parseInt(txtGrandTotal.value) + parseInt(txtTotal);

hey can I get your source code I need form IP billing master as you have? if you don't mind

How can I erase a section of my table to display a message without touching the rest?

I have basically created a table that is made of two rows, the first row checks if the user input is correct or not, and the second row is displaying a button.
I have used the following code inside my script function inside the first row of my table to display the output response:
function checkUserInput() {
var userInput = document.getElementById("textInput").value;
var stringToCheckAgainst = random_images_array[num].split('.');
//this splits the item at the array index into an array, like so.
If the item is "apple.gif", the array reads ["apple", "gif"]
if (userInput == stringToCheckAgainst[0]) {
//user has inputted the correct string
//window.alert("user gave correct response!");
document.write("<p>" + txt.fontsize(5) + "</p>"); document.close();
} else {
//user has inputted an incorrect string
//window.alert("user gave incorrect response!");
document.write("<p>" + txt1.fontsize(5) + "</p>"); document.close();
}
}
</script>
However this code will delete the entire page (document). Can anyone advise me how to write the message only the top section of my page (or table) and leave the second row of my table unchanged?

how to filter the contents of a listbox based on a text box value

i have a html form which contains the following elements
1) a list box (containing a list of filenames)
s1.txt2013
s2.txt2013
s3.txt2012
s4.txt2012
2) a text box (user enters a pattern say 2013)
3) a button
by default list box contains a the above mentioned 4 files names.
when a user enter a a text in the text box (say for example he eneters 2013 in the text box), and press the button, then the list box contents should be filtered out according to the text mentioned in the text box
so in this case after clicking the button, list box should only contain two values (i.e. only those values in which 2013 appears).
s1.txt2013
s2.txt2013
how can i do this.
i did the following way..
i am using a javascript function which will take all the option values of the list box in a javascript array. now i am not able to search the array for 2013 and populate the same list box with the values containing 2013 in in.
can anyone tell me how to do this?

Maybe you need two listboxes (select tags), one of them be hidden as main data source and one of them visible for users, you can use following code and add onclick="buttonClicked()" to you button attributes.
function buttonClicked () {
var textbox = document.getElementById('YOUR TEXTBOX ID'),
listbox = document.getElementById('YOUR SELECT ID'),
mainListbox = document.getElementById('YOUR MAIN SELECT ID');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++) {
var child = mainListbox.children[childIndex];
if (child.innerHTML.search(textbox.value) != -1) {
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
}
};

Have you tried using .test? To me this would be a good approach.
http://www.w3schools.com/jsref/jsref_regexp_test.asp
<script>
var str="Hello world!";
//look for "Hello"
var patt=/Hello/g;
var result=patt.test(str);
document.write("Returned value: " + result);
//look for "W3Schools"
patt=/W3Schools/g;
result=patt.test(str);
document.write("<br>Returned value: " + result);
</script>

Calculation using jquery onkeypress

I have this type of exercise in jquery. Go here http://jsfiddle.net/LAntL/3/
For Item 1, if I add #no of quantity of Size 7, it should be multiplied by Item 1's Price displayed in text box and the result should be shown in Item 1's Ext textbox.
then if I do same for size 8.5 of Item 1, it should perform the same.
But the Ext will have (Price x Size 7 Qty) + (Price x Size 8.5 Qty)
Same will happen for Item 2. And along with this, Total quantity and Total price will be updated on keypress event of each textbox.
I'm a beginner in jquery and got this killing exercise.
Please help someone.
Thanks in advance.

I'd suggest that you assign some classes to your fields so that jQuery can easily find them:
"lineQty" - add this class to all the qty fields
"lineTotal" - add this class to all the line total fields
"linePrice" - I think you can see where I'm going with this
"lineExt" - add to all ext fields
Then the following .keyup function will do the updates on all lines automatically.
$(document).ready(function() {
$(".lineQty").keyup(function() {
// 'this' is the field the user is typing in
// so find the tr that it belongs to
var $row = $(this).closest("tr"),
total = 0,
// get the price for the current row:
price = $row.find(".linePrice").val();
// loop through every qty field for the current row and add
// the entered value to the total, using unary plus to convert
// to a number, and a default of 0 if non-numeric data is entered
$row.find(".lineQty").each(function() {
total += +this.value || 0;
});
// set the total for the current row
$row.find(".lineTotal").val(total);
// set the price for the current row
$row.find(".lineExt").val(total * price);
// now add up the grand totals
var grandTotal = 0,
grandPrice = 0;
$(".lineTotal").each(function() {
grandTotal += +this.value || 0;
});
$(".lineExt").each(function() {
grandPrice += +this.value || 0;
});
$("[name='data[totalQuantity]']").val(grandTotal);
$("[name='data[totalPrice]']").val(grandPrice);
});
});
Working demo: http://jsfiddle.net/LAntL/5/ (only works on the first line because I couldn't be bothered assigning classes to all your fields - you would need to add the classes I talk about above to every field as per what I did for the first line).

Okay, you want to learn something, so I will describe a possible way, and don't give you the finished solution.
First of all, you should mark the tables which contains items with class="item". Now you can write a selector in jQuery which gets every item separately. Then you should mark all cells (<td>) which have a special function. Total, Price, Disc and Ext. Your table should look like this:
<table class="item">
<tr>
<td>...</td>
<td class="total">...</td>
<td class="price">...</td>
<td class="disc">...</td>
<td class="ext">...</td>
</tr>
</table>
Now you can write a selector for all input fields inside of the table with class "item".
$('.item input').change(function(){});
Inside of this function you can handle the calculation. At first I would recommend to get the item:
$('.item input').change(function(){
var item = $(this).closest('table.item');
var totalInput = $(item).find('.total input');
var priceInput = $(item).price('.price input');
// ...
var allWriteableInputs = $(item).find('input[readonly!="readonly"]');
// do the calculation
var sum = 0;
$(allWriteableInputs).each(function(i, input){
sum += $(input).val();
});
$(totalInput).val(sum);
});
If you go this way, you don't need:
The onkeypress="return isNumberKey(event);" and
the id="product1Total" for every inputbox
I hope this thought-provoking impulse helps you a little bit. You have still a long way to go, my young padawan ;-)