The problem I'm having is i'm working on an invoicing system. Which uses this,
$(document).ready(function() {
$('#add').click(function() {
JQuery('#lineItems').append('<input type="text" name="description[]"
class="ui-corner-all text invDesc" />
<input type="text" name="qty[]" class="ui-corner-all text invQty" />
<input type="text" name="amount[]" class="ui-corner-all text invAmount"
title="Amount" />
<input type="hidden" name="rowTotal[]" class="row-total-input" />');
});
});
to create new line item. The hidden input named rowTotal[] is meant to hold the totals of each row so they can be added up. The Code i am using to get the row total of qty * amount is,
$(function(){
$('.row-total-input').each(
function( intIndex ){
$('.invAmount').livequery('blur', function() {
var $this = $(this);
var amount = $this.val();
var qty = $this.parent().find('.invQty').val();
if ( (IsNumeric(amount)) && (amount != '') ) {
var rowTotal = qty * amount;
$this.css("background-color", "white").parent().find(".row-total-input").val(rowTotal);
} else {
$this.css("background-color", "#ffdcdc");
};
calcProdSubTotal();
calcOrderTotal();
});
}
);
});
However it updates all the rowTotal[] input fields to the last row total so the final sum isn't correct.
I am assuming I need to create some sort of unique ID for each rowTotal[] so only the correct one is updated. I just don't know how to do it.
Thanks in advance.
Ah the problem is here:
var qty = $this.parent().find('.invQty').val();
If each row would have a distinct parent it would be fine, but all the 'rows' are contained within the same parent - #lineItems. What should help is changing your current row creation code to this:
$(document).ready(function() {
$('#add').click(function() {
JQuery('#lineItems').append('<div><input type="text" name="description[]"
class="ui-corner-all text invDesc" />
<input type="text" name="qty[]" class="ui-corner-all text invQty" />
<input type="text" name="amount[]" class="ui-corner-all text invAmount"
title="Amount" />
<input type="hidden" name="rowTotal[]" class="row-total-input" /></div>');
//notice the extra div tag that wrapps around all the input fields
});
});
Related
So im making this inventory website, so the forklift drivers can add or remove weight from our inventory we measure our products in weight.
So basically I need to be able to fetch the weight (in kg) from mongo db and add it to it and save it
//edit
the problem I'm having is the current code is returning "NaN kg" in html
kg is defined by a number inserted into the db and i cant seem to get the kg value without my code running into a error
The Html
<form class="add-pro">
<input type="text" class="form-control" name="namn" required="true" placeholder="Produkt Name"/>
<br />
<input type="text" class="form-control" name="id" required="true" placeholder="Produkt code"/>
<br />
<input type="number" class="form-control" placeholder="KG" name="kg" />
<input id="btnModal" type="submit" value="add" class="btn btn-primary"/>
</form>
<form class="add-data">
<input type="number" class="form-control" id="add-data-control" name="g" placeholder="how much">
<button class="glyphicon glyphicon-plus" type="submit" id="add-data-plus" aria-hidden="true"></button>
</form>
Javascript
"submit .add-data": function(event){
var g = event.target.g.value;
var x = produkter.find().fetch();
var k = kg;
produkter.update(this._id, {$set: {kg: +k + +g }});
},
Template.produkter.events({
"submit .add-pro": function(event){
var namn = event.target.namn.value;
var id = event.target.id.value;
var kg = event.target.kg.value;
produkter.insert({
namn: namn,
id: id,
kg: kg
});
return false;
},
There are a few problems with your code, see comments:
"submit .add-data": function(event){
var g = event.target.g.value;
var x = produkter.find().fetch();
// Where is kg defined?
var k = kg;
// The expression +k + +g does not compute - do you mean k+g ?
produkter.update(this._id, {$set: {kg: +k + +g }});
},
You may also be running into trouble with strings versus numbers. Even though your HTML input tag says type="number", the value will be a string, and will need to be converted to a number before saving it to the database.
I suspect you are also intending to save the value as something like "2.7 kg", which is useful for displaying the weight, but it's a bad idea, because if you do that you will need to strip off the " kg" every time you want to calculate a new value.
I have two radio buttons with label name A & B and two groups of text boxes with class names groupA and groupB.My requirement is When user checks radiobutton A then all the values from Group B text boxes will clear and when user checks Radiobutton B then GroupB text boxes again fill with their original values and Group A textboxes values will clear vice versa. For this i am able to clear textboxes values based on class.But i how to fill all the previous values when user checks one of the radiobutton?Below is my code.
jQuery(function(){
jQuery("#id1").click(function() {
jQuery(".groupB").each(function()
{
jQuery('input.groupB[type="text"]').val('');
});
}
});
jQuery("#id2").click(function() {
jQuery(".groupA").each(function()
{
jQuery('input.groupA[type="text"]').val('');
});
}
});
});
Any help would be greatly appreciated.
You didn't show your HTML, so I'm not sure I have the fields right. But here is what I came up with:
<body>
<form>
<input id="id1" type="radio" name="test" value="A" />Group A
<input type="hidden" name="hidden_a1" />
<input type="hidden" name="hidden_a2" />
<input class="groupA" type="text" name="text_a1" disabled="disabled" />
<input class="groupA" type="text" name="text_a2" disabled="disabled" />
<br />
<input id="id2" type="radio" name="test" value="B" />Group B
<input type="hidden" name="hidden_b1" />
<input type="hidden" name="hidden_b2" />
<input class="groupB" type="text" name="text_b1" disabled="disabled" />
<input class="groupB" type="text" name="text_b2" disabled="disabled" />
</form>
</body>
and here is the JavaScript code:
$(document).ready(function() {
$('#id1').on('click', {
show: 'A',
hide: 'B'
}, choose_group);
$('#id2').on('click', {
show: 'B',
hide: 'A'
}, choose_group);
});
function choose_group(event) {
$('.group' + event.data.show).each(function(index) {
$(this).prop('value', $('[name="' + $(this).prop('name').replace('text', 'hidden') + '"]').prop('value'));
$(this).prop('disabled', false);
});
$('.group' + event.data.hide).each(function(index) {
$('[name="' + $(this).prop('name').replace('text', 'hidden') + '"]').prop('value',
$(this).prop('value'));
$(this).prop('value', '');
$(this).prop('disabled', true);
});
}
i am trying to processing a form in lift frame work. my form is having one checkbox and radiobuttons. how could i check whether the checkbox is checked or not and the selected radio button.the following code i used to get other elements value.
the view:
<form class="lift:MySnippet?form=post">
From:<input type="text" name="source" /><br />
To: <input type="text" name="destination" /><br />
Age: <input type="text" name = "age"/><br />
Return: <input type="checkbox" name="needreturn" value="Return Ticket" /><br />
<input type="radio" name="sex" value="male" />Male<br />
<input type="radio" name="sex" value="male" />Female<br />
<input type="submit" value="Book Ticket"/>
</form>
and MySnippet scala code is:
object MySnippet {
def render = {
var from = ""
var to = ""
var age = 0
def process() {
S.notice("in process function")
}
"name=source" #> SHtml.onSubmit(from = _) &
"name=destination" #> SHtml.onSubmit(to = _) &
"name=age" #> SHtml.onSubmit(s => asInt(s).foreach(age = _)) &
"type=submit" #> SHtml.onSubmitUnit(process)
}
}
in this how could i process the checkbox and radio button. can anyone help me...thanx in advance.
Do you need to specify the choices in your HTML? If not, the easiest way is:
Return: <input type="checkbox" name="needreturn" /><br />
Sex: <input type="radio" name="sex" />
and the CSS Transform:
val radioChoices = List("male", "female")
var sex:Box[String] = None
var needReturn:Boolean = false
"#sex" #> SHtml.radio(radioChoices, sex, (resp) => sex = Full(resp)) &
"#needreturn" #> SHtml.checkbox(needReturn, (resp) => needReturn = resp)
You could replace SHtml.radio with SHtml.ajaxRadio and SHtml.checkbox with SHtml.ajaxCheckbox if you want your selection to be sent to the server every time the value is changed, instead of when the form is submitted
I believe you can also use the SHtml.onSubmit as you do above for the checkbox and radio, but I'd have to do some testing to figure out exactly how.
With regards to the radio button, you can find some information about changing the way the label is output here if you need to: https://groups.google.com/forum/?fromgroups=#!topic/liftweb/rowpmIDbQAE
Use SHtml.checkbox, SHtml.radio
By the way, the <input>-s should be SHtml.text, I think. So, they're not buttons -- they're inputs. Don't forget to check the resulting html in the web page with firebug. (You'd see that using the current code you have input=text deleted.)
This js script select the value of inputfield with name: id_add_to_cart and pass to ParseProductId that parse the value:
$("input[id='add-extra']").live("click",function () {
var product_id = $("input[name='id_add_to_cart']").value;
parseProductId(product_id);
return false;
});
The parsed value is undefined for this HTML:
<form action="" method="POST">';
<input type="hidden" name="id_add_to_cart" value="100" />
<input type="submit" id="add-extra" value="Add" />';
</form>
What am I missing?
$("input[id='add-extra']").live("click",function() {
var product_id = $("input[name='id_add_to_cart']").val();
alert(product_id);
});
change .value to .val().
Demo: http://jsbin.com/egiwor/2
var product_id = $("input[name='id_add_to_cart']").val();
Does this change anything?
while i create textbox dynamically i can able to add any no
of textbox while i delete only last textbox got deleted after it
an throws exception.
<html>
<head>My page </html>
<body>
<div id="firstdiv">
<input type="text" id="text" id="text1" value=""/>
<input type="button" id="butt" name="it's okay" value="+" onclick="text_add()"/>
<input type="button" id="butt1" name="it's okay" value="-" nclick="text_remove()"/>
</div>
</body>
<script type="text/javascript">
var i=0;
function text_add()
{
++i;
var bal=document.createElement("input")
bal.setAttribute("type","text");
bal.setAttribute("id","text"+i);
bal.setAttribute("name","bala");
firstdiv.appendChild(bal);
}
function text_remove()
{
try{
var a="\"";
a+="text"+(i);
a+="\"";
alert(a);
var bal=document.getElementById(a);
firstdiv.removeChild(bal);
--i;
}catch(e)
{
alert("Echo"+e);
}
}
</script>
</html>
chorme throws error: after deleting one text box like
EchoError: NOT_FOUND_ERR: DOM Exception 8
so you whant to add and remove textboxes.
and the latest textbox added shuld be removed?
so first you alreddy have a textbox in the dom witch will colide with your
naming
<input type="text" id="text" id="text1" value=""/>
is this an atemt to manualy add qoutes ? becus thats not part of the id
of the element
var a="\"";
a+="text"+(i);
a+="\"";
just give it the name normaly
var bal = document.getElementById("text" + i);
and you dont have to mess around with dom ids you can store
dom elements as normal objects so
something like this works fine
var textElements = [];
var firstdiv = document.getElementById("firstdiv");
function text_add() {
var bal = document.createElement("input");
bal.setAttribute("type","text");
bal.setAttribute("name","bala");
firstdiv.appendChild(bal);
textElements.push(bal);
}
function text_remove() {
firstdiv.removeChild(textElements.pop());
}
the pop method removes the last added item in the array