Trying to multiply values using jQuery -
i not able multiply price , quantity using jquery.
here complete custom.js file:
$(document).ready(function() { $("#frm1").validate({ rules: { tx1: { required : true, rangelength: [10, 10], digits: true } }, messages:{ tx1: { required: "mobile number needed." } } }); $("#add").click(function add_txt() { var ta = document.getelementbyid("ta1"); var tx = document.getelementbyid("tx1"); if(ta.value == "") ta.value += tx.value; else ta.value += ", " + tx.value; tx.value = ""; tx.focus(); }); $("#cross").bind('click',function product() { var price = document.getelementbyid("price"); var quantity = document.getelementbyid("quantity"); var fn = document.getelementbyid("cross"); fn.value=(price.value*quantity.value); }); var counter = 2; $("#addbutton").click(function () { var newtextboxdiv = $(document.createelement('div')).attr("id", 'textboxdiv' + counter); newtextboxdiv.after().html('<label>product name'+': </label>' + '<input type="textbox" name="pro" id="pro" class="red" placeholder ="product">'+ '<label> product price'+ ': </label>' + '<input type="textbox" name="price" id="price" class="red" placeholder ="price" >'+ '<label> product quantity'+ ': </label>' + '<input type="textbox" name="quantity" id="quantity" class="red" placeholder ="quantity" >'+' '+ '<input type ="textbox" id ="cross" size="10" class="red">'+' '+ '<input type="button" class = "blue" id ="cross" value="cross" onclick="product()"/>'); newtextboxdiv.appendto("#textboxesgroup"); counter++; }); $("#removebutton").click(function () { if(counter==1) { alert("no more textbox remove"); return false; } counter--; $("#textboxdiv" + counter).remove(); }); /*$("#getbuttonvalue").click(function () { var msg = 'test'; for(i=1; i<counter; i++) { msg += "\n test" + + " : " + $('#textbox' + i).val(); } alert(msg); document.write('test'); });*/ }); also "test.html":
<!doctype html> <html> <head> <title>addmore section</title> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body> <h1>addmore section</h1> <form id="frm1"> <label>mobile number:<input type="text" id="tx1" name="tx1" class="red" placeholder ="0123456789" /> <input type="button" class ="blue" id ="add" value="add" /> mobile number : <textarea id="ta1" style="height: 16px; width: 300px;"></textarea><br><br> <div id='textboxesgroup'> <div id="textboxdiv1"> <label>product name: </label><input type='textbox' class="red" id='pro' placeholder ='product' name ='pro', required> <label>product price: </label><input type='textbox' id='price' class="red" placeholder ='price' name ='price', required> <label>product quantity: </label><input type="textbox" id ="quantity" class="red" placeholder ='quantity' name ='quantity', required> <input type="textbox" size="10" id="cross" class="red" /> <input type="button" class = "blue" id ="cross" value="cross" /> </div> </div> </form><br> <input type='button' class="blue" value='add product' id='addbutton'> <input type='button' class="blue" value='remove product' id ='removebutton'> <input type='button' class="blue" value='total amount' id ='getbuttonvalue'> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src ="js/custom.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> </body> </html> i not able perform multiplication, though have defined in custom.js.
also, custom.css here in case:
div { padding:2px; } .red { background: pink; } .blue { background: #f7f3bc; } label.error { color: brown; background: url("../images/cross.png") no-repeat left center; padding-left: 20px; }
this happening because gave same id (cross) 2 elements(ex:textbox , button).
event $('#cross').bind('click',function(){...}) never called.
hope might helpful you.
Comments
Post a Comment