I have a site and iam using saleforce.com .
This is my code:
function salesforce() {
var first_name = $("#first_name_new").val();
var last_name = $("#last_name_new").val();
var coupon_code = $("#coupon_code_new").val();
var phone = $("#phone_new").val();
var email = $("#email_new").val();
var state = $("#state_new").val();
var oid = "00DU0000000HB32";
var retURL = "http://www.testsite.com";
var debug = "1";
var debugEmail = "arnold#gmail.com";
//alert(first_name_new+"/"+last_name+"/"+coupon_code+"/"+phone+"/"+email+"/"+state);
$.ajax({
type: "POST",
dataType: 'jsonp',
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: { first_name: first_name, last_name: last_name, phone: phone, email:email, state:state, oid:oid, debug:debug, debugEmail:debugEmail },
success:function(data){
contactSent = "true";
},
error:function(data){
contactSent = "true";
}
});
}
I called this function onclick of a button:
$(function(){
$('.next-product').click(function(){
salesforce();
});
});
This is the button:
<button class="next-product">Next</button>
When i clicked on the button it displays error in bug as:
SyntaxError: unexpected end of XML source
<BR><BR>Your request has been queued.<BR><BR>Record Information:<BR><BR>_: 1345203119160<BR>callback: jQuery172007126272654237087_1345203087782<BR>debug: 1<BR>debugEmail: arnold#gmail.com<BR>email: mariya#galtech.org<BR>encoding: UTF-8<BR>first_name: ttt<BR>last_name: tttteee<BR>oid: 00DU0000000HB32<BR>phone: 1234567896<BR>state: kerala<BR>
How can i solve this?
EDIT:
This is the whole code in the page iam using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TradeYourWreck.com | Wrecked Car? Don't sell it… Fix it</title>
<link href="tyw.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<script type="text/javascript" src="http://www.carqueryapi.com/js/carquery.0.3.3.js"></script>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(
function()
{
//Create a variable for the CarQuery object. You can call it whatever you like.
var carquery = new CarQuery();
//Run the carquery init function to get things started:
carquery.init();
//Optionally, you can pre-select a vehicle by passing year / make / model / trim to the init function:
//carquery.init('2000', 'dodge', 'Viper', 11636);
//Optional: Pass sold_in_us:true to the setFilters method to show only US models.
carquery.setFilters( {sold_in_us:true} );
//Optional: initialize the year, make, model, and trim drop downs by providing their element IDs
carquery.initYearMakeModelTrim('car-years', 'car-makes', 'car-models', 'car-model-trims');
//Optional: set the onclick event for a button to show car data.
$('#cq-show-data').click( function(){ carquery.populateCarData('car-model-data'); } );
//Optional: initialize the make, model, trim lists by providing their element IDs.
carquery.initMakeModelTrimList('make-list', 'model-list', 'trim-list', 'trim-data-list');
//Optional: set minimum and/or maximum year options.
carquery.year_select_min=1980;
carquery.year_select_max=2012;
//Optional: initialize search interface elements.
//The IDs provided below are the IDs of the text and select inputs that will be used to set the search criteria.
//All values are optional, and will be set to the default values provided below if not specified.
var searchArgs =
({
body_id: "cq-body"
,default_search_text: "Keyword Search"
,doors_id: "cq-doors"
,drive_id: "cq-drive"
,engine_position_id: "cq-engine-position"
,engine_type_id: "cq-engine-type"
,fuel_type_id: "cq-fuel-type"
,min_cylinders_id: "cq-min-cylinders"
,min_mpg_hwy_id: "cq-min-mpg-hwy"
,min_power_id: "cq-min-power"
,min_top_speed_id: "cq-min-top-speed"
,min_torque_id: "cq-min-torque"
,min_weight_id: "cq-min-weight"
,min_year_id: "cq-min-year"
,max_cylinders_id: "cq-max-cylinders"
,max_mpg_hwy_id: "cq-max-mpg-hwy"
,max_power_id: "cq-max-power"
,max_top_speed_id: "cq-max-top-speed"
,max_weight_id: "cq-max-weight"
,max_year_id: "cq-max-year"
,search_controls_id: "cq-search-controls"
,search_input_id: "cq-search-input"
,search_results_id: "cq-search-results"
,search_result_id: "cq-search-result"
,seats_id: "cq-seats"
,sold_in_us_id: "cq-sold-in-us"
});
carquery.initSearchInterface(searchArgs);
//If creating a search interface, set onclick event for the search button. Make sure the ID used matches your search button ID.
$('#cq-search-btn').click( function(){ carquery.search(); } );
});
</script>
<script type="text/javascript">
var contactSent = "false";
$(function(){
//$("#tabVPhoto").hide();
$("#tabPkg").hide();
$('#tabs').tabs({
fx: {
opacity: 'toggle'
}
});
});
function lookupVIN() {
//console.log("lookup vin");
var car_vin = $("#car-vin").val();
$.ajax({
type: "GET",
url: "vin.php",
data: { car_vin: car_vin },
success:function(data){
//console.log(data);
$("#vinDet").html(data);
//vinDet
},
error:function(data){
}
});
}
function salesforce() {
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var state = $("#state").val();
var oid = "00DU0000000HB32";
var retURL = "http://www.tradeyourwreck.com";
var debug = "1";
var debugEmail = "arnold#vemark.com";
$.ajax({
type: "POST",
dataType: 'jsonp',
url: "https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data: { first_name: first_name, last_name: last_name, phone: phone, email:email, state:state, oid:oid, debug:debug, debugEmail:debugEmail },
success:function(data){
contactSent = "true";
},
error:function(data){
contactSent = "true";
}
});
}
$(function(){
$('.next-product').click(function(){
var index = jQuery('#tabs').data('tabs').options.selected;
//console.log(contactSent);
var pkg = $('input:radio[name=pkg]:checked').val();
/*
if(pkg=="self") {
$("#tabVPhoto").show();
$("#tabVCond").show();
$("#self").show();
$("#inspect").hide();
}else {
$("#tabVPhoto").hide();
$("#tabVCond").hide();
$("#self").hide();
$("#inspect").show();
//alert('inspect');
}
*/
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected+1);
if(index==0) {
if(contactSent == "false"){
salesforce();
}
}
})
$('.previous-product').click(function(){
var index = jQuery('#tabs').data('tabs').options.selected;
//console.log(index);
var pkg = $('input:radio[name=pkg]:checked').val();
if(pkg=="self") {
$("#tabVPhoto").show();
$("#tabVCond").show();
}else {
$("#tabVPhoto").hide();
$("#tabVCond").hide();
//alert('inspect');
}
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected-1);
})
$( '.next-product').button({
text: true,
icons: {
primary: "ui-icon-seek-next"
}
});
$( '.previous-product' ).button({
text: true,
icons: {
primary: "ui-icon-seek-prev"
}
});
});
$(function(){
var cntUp = 0;
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
alert('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('image uploaded');
cntUp++;
//console.log(cntUp);
//Add uploaded file to list
if (response.toLowerCase().indexOf("success") >= 0 ) {
//alert('success');
$('<li></li>').appendTo('#files').html('<img src="uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
//alert('error');
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<nav id="access" role="navigation">
<div class="menu-top-menu-container">
<ul id="menu-top-menu" class="menu">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-25 current_page_item menu-item-30">Home</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">About TradeYourWreck.com</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">Inquiries</li>
</ul>
</div>
</nav>
<img src="images/header1.jpg" width="1000" height="163" alt=""> </div>
<?php include 'inc/sidebar.php'; ?>
<div class="content">
<div style="width:675px; margin: 0 auto; margin-top:10px; font-size:12px;" id="tabs">
<ul>
<!--<li id="tabPkg">Select Your Package</li> -->
<li id="tabVInfo">Contact Information</li>
<li id="tabVCond">Vehicle Information</li>
<li id="tabVPhoto">Additional Vehicle Information</li>
<li id="tabVCheck">Check Out</li>
</ul>
<div id="tabs-2">
<input type=hidden name="oid" value="00DU0000000HB32">
<input type=hidden name="retURL" value="http://www.tradeyourwreck.com">
<input type="hidden" name="debug" value=1>
<input type="hidden" name="debugEmail" value="arnold#vemark.com">
<!--<input type="hidden" name="debugEmail" value="jweeks#thoughtwm.com">-->
<table cellpadding="3">
<tr>
<td>First Name</td>
<td><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input id="phone" maxlength="40" name="phone" size="20" type="text" /></td>
</tr>
<tr>
<td>Email Address</td>
<td><input id="email" maxlength="80" name="email" size="30" type="text" /></td>
</tr>
<tr>
<td>State/Province</td>
<td><input id="state" maxlength="20" name="state" size="20" type="text" /></td>
</tr>
<tr>
<td> </td>
<td><button class="previous-product">Previous</button>
<button class="next-product">Next</button></td>
</tr>
</table>
</div>
<div id="tabs-3">
<!-- -->
<table cellpadding="3">
<tr>
<td valign="top">VIN</td>
<td>
<!-- test VINS:
1GDGG31Z4RF513458<br/>
KMHCG45C31U211444<br/>
2MEFM75W7YX721741<br/>
-->
<input class="frmIn" size="30" value="" name="car-vin" id="car-vin" type="text" value="" />
<input onclick="lookupVIN()" name="btnVin" type="button" value="Lookup" />
<br/>
<div id="vinDet"></div></td>
</tr>
<tr>
<td>Year</td>
<td><select name="car-years" id="car-years">
</select></td>
</tr>
<tr>
<td>Make</td>
<td><select name="car-makes" id="car-makes">
</select></td>
</tr>
<tr>
<td>Model</td>
<td><select name="car-models" id="car-models">
</select></td>
</tr>
<!--<tr>
<td>Trims</td>
<td><select name="car-model-trims" id="car-model-trims"></select></td>
</tr>
<tr>
<td>Color</td>
<td><input class="frmIn" name="car-color" type="text" value="" /></td>
</tr>
<tr>
<td>Mileage</td>
<td><input class="frmIn" name="car-mileage" type="text" value="" /></td>
</tr>
<tr>
<td>Repair Estimate</td>
<td><input class="frmIn" name="car-estimate" type="text" value="" /></td>
</tr>
<tr>
<td>Reserve Price</td>
<td><input class="frmIn" name="car-reserve" type="text" value="" /></td>
</tr>
<tr>
<td>Secondary Damage</td>
<td><input class="frmIn" name="car-damage" type="text" value="" /></td>
</tr>
<tr>
<td>Comments</td>
<td><textarea class="frmIn" name="car-comment" cols="20" rows="5"></textarea></td>
</tr>-->
<tr>
<td> </td>
<td><button class="previous-product">Previous</button>
<button class="next-product">Next</button></td>
</tr>
</table>
</div>
<div id="tabs-4">
<table cellpadding="3">
<tr>
<td>Repair Estimate</td>
<td><input class="frmIn" name="car-estimate" type="text" value="" /></td>
</tr>
<tr>
<td>Reserve Price</td>
<td><input class="frmIn" name="car-reserve" type="text" value="" /></td>
</tr>
<tr>
<td>Primary Damage</td>
<td><select name="car-damage">
<option value="Center Rear">Center Rear</option>
<option value="Chemical Spill">Chemical Spill</option>
<option value="Dash Fire">Dash Fire</option>
<option value="Engine">Engine</option>
<option value="Engine Fire">Engine Fire</option>
<option value="Fallen Tree">Fallen Tree</option>
<option value="Fresh Water">Fresh Water</option>
<option value="Hail Damage">Hail Damage</option>
<option value="Hard Roll">Hard Roll</option>
<option value="Interior Fire">Interior Fire</option>
<option value="Left Front">Left Front</option>
<option value="Left Rear">Left Rear</option>
<option value="Left Side">Left Side</option>
<option value="Lite Fire Damage">Lite Fire Damage</option>
<option value="Lite Roll">Lite Roll</option>
<option value="Medium Roll">Medium Roll</option>
<option value="None">None</option>
<option value="Right Front">Right Front</option>
<option value="Right Rear">Right Rear</option>
<option value="Right Side">Right Side</option>
<option value="Rolled">Rolled</option>
<option value="Roof">Roof</option>
<option value="Salt Water">Salt Water</option>
<option value="Theft Heavy Strip">Theft Heavy Strip</option>
<option value="Theft Lite Strip">Theft Lite Strip</option>
<option value="Theft Recovery">Theft Recovery</option>
<option value="Total Burn">Total Burn</option>
<option value="Undercarriage">Undercarriage</option>
<option value="Vandalized">Vandalized</option>
<option value="Transmission">Transmission</option>
<option value="Center Front">Center Front</option>
<option value="Mechanical">Mechanical</option>
</select></td>
</tr>
</table>
<div style="margin-top:15px;" id="mainbody" >
<div id="upload" style="margin-bottom:10px;" ><span>Upload Photos<span></div>
<!--<span id="status" >status</span> -->
<ul id="files" >
</ul>
<button class="previous-product">Previous</button>
<button class="next-product">Next</button>
</div>
</div>
<div id="tabs-5">
<div id="self">
<!-- <table border="0">
<tr>
<td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="U3XMXN3S94BB6">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></td>
</tr>
<tr>
<td><img src="images/packages_img1.png" width="286" height="95" alt="Let us Do The work" /></td>
</tr>
</table> -->
</div>
<div id="inspect">
<table border="0" cellpadding="0">
<tr>
<td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="U3XMXN3S94BB6">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></td>
<td><img src="images/packages_img1.png" width="286" height="95" alt="Let us Do The work" /></td>
</tr>
<tr>
<td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XEEB6CNLRWJAJ">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></td>
<td><img src="images/packages_img2.png" width="286" height="95" alt="Let us Do The work" /></td>
</tr>
</table>
<!-- <table border="0">
<tr>
<td align="center"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XEEB6CNLRWJAJ">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></td>
</tr>
<tr>
<td><img src="images/packages_img2.png" width="286" height="95" alt="Let us Do The work" /></td>
</tr>
</table>
--> </div>
</div>
</div>
</div>
<p> </p> </div>
<?php include 'inc/footer.php'; ?>
</body>
</html>
Related
iam trying to update image through on change event in codeigniter
and want to update with different id each time when i select the image different. please help with the solution thanks in advance
Each time the product_image_id should change according to db table
$(document).ready(function(){
$('.images').on('change',function(){
var link = '<?php echo site_url('menu_management_con/editimage');?>';
var product_image_id = $('.id').val();
var formData= new FormData();
var file = this.files[0];
formData.append('file', file);
formData.append('product_image_id',product_image_id);
$.ajax({
type:'POST',
url: link,
data : formData,
cache: false,
processData:false,
contentType:false,
success:function(data){
alert(data);
}
});
});
});
this is my html code
am trying to update image through on change event in codeigniter
<form id="add_produc" method="post" class="addProduct" name="add_produc" action="<?=base_url()."menu/product_edit/".$data['product_id'].'/'.$data['category_id'] ?>" enctype="multipart/form-data" >
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<tr>
<th class="head" colspan="2">Edit</th>
</tr>
<tr>
<td><label for="Name">Name:</label></td>
<td>
<input type="text" name="product_name" value="<?= $data['product_name']?>" id="product_name" class="form-control" placeholder="Name">
</td>
</tr>
<tr>
<td> <label for="Description">Description:</label> </td>
<td>
<input type="text" name="product_description" value="<?= $data['product_description']?>" id="product_description" class="form-control" placeholder="description">
</td>
</tr>
<tr >
<td><label for="Photo">Photo:</label> </td>
<td>
<div id="addField0">
<input type="file" name="product_photo[]" multiple id="product_photo" class="form-control" accept="image/*"><br>
</div>
<button id="add-more-edit" name="add-more-edit" class="btn btn-primary">Add More</button>
</td>
</tr>
<?php
if(!empty($image)){
foreach ($image as $result){
?>
<tr class='imagelocation<?= $result->product_image_id ?>'>
<td colspan="2" align='center'>
<input type="text" name="product_image_id" value="<?= $result->product_image_id?>" id="product_photo" class="form-control id" >
<input type="file" name="image" id="image" class="form-control images" accept="image/*">
<img class='img-rounded' height="50" width="50" src="<?= base_url('/assets/uploads/products/'.$result->product_photo)?>" style="vertical-align: middle;">
<span style="cursor:pointer;" onclick="javascript:deleteimage(<?php echo $result->product_image_id ?>)">X</span>
</td>
</tr>
<?php
}
}else{
echo '<div class="empty">No Products Found...!</div>';
}
?>
<tr>
<td colspan="2">
<input type="hidden" name="sub_category_id" value="<?= $data['sub_category_id']?>" id="sub_category_name" class="form-control">
<input type="submit" name="update_product" id="update_product" class="btn btn-info btn-small" value="Update">
</td>
</tr>
</table>
</div>
</div>
</form>
I am trying to validate the mobile number, email, firstname and etc.. field by using required and pattern keyword but its not responding anything.
In my program there is one input field for mobile number if user has entered mobile number which is not stored in database, then registration page pops up and user should registered for further process and if they entered mobile number which is stored in database then random number is displayed, but when I am entering the values in registration form but it is not validating like I have return required keyword in input field but still its not responding.
Please help me out of this.
Below us my code:
HTML
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<body>
<div>
<form action = "#" method = "post" >
<div>
<legend >Login</legend>
<table id="verify_table" cellpadding="2" cellspacing="2" >
<tr>
<td> Mobile No. </td>
<td><input id="mob" type="tel" name="mobile" required pattern="\[7-9]{1}[0-9]{9}\" /></td>
<td><input type="button" name="verify" class="verify" value="Verify"></td>
</tr>
</table>
</div>
<div id="random" style="display: none;" >
<table id='random_table'>
<tr>
<td>Random Number generated</td>
<td id='rand'>
</tr>
</table>
</div>
<!--Register pop up-->
<div id="reg_light" class="white_content">
<div id="register-title">
<div id="reg-title">
<h6>Register</h6>
</div>
<div id="close">
<a href="javascript:void(0)" onclick="document.getElementById('reg_light').style.display='none';
document.getElementById('fade').style.display='none'; $('#firstname').val('');
$('#lastname').val('');
$('#mobile_number').val('');
$('#email').val('');">X</a>
</div>
</div>
<?php //echo form_open('register'); ?>
<div id="register-inner">
<form id="reg_form" method="POST">
<table id="register_table">
<tr><td><font color="red">* Fields are mandatory</font></td></tr>
<!--<form id="reg_form" onSubmit="return formValidation();">-->
<tr>
<table id="name">
<tr>
<td>First Name<font color="red">*</font></td>
<td><input id="firstname" type="text" placeholder="First Name" name="firstname" required pattern="[A-Za-z]+" ></td>
<td>Last Name<font color="red" >*</font></td>
<td> <input id="lastname" type="text" placeholder="Last Name" name="lastname" required pattern="[A-Za-z]+"></td>
</tr>
</table>
</tr>
<tr><td>  </td></tr>
<tr>
<table id="gen">
<tr>
<td>Gender<font color="red">*</font></td>
<td><input type="radio" name="gender" value="Male"> Male</td>
<td><input type="radio" name="gender" value="Female"> Female</td>
</tr>
</table>
</tr>
<tr>
<table id="mob">
<tr>
<td>Mobile No.<font color="red">*</font></td>
<td><input id="mobile_number" type="text" placeholder="Mobile number" name="mobile_number" required pattern="[7-9]{1}[0-9]{9}" /></td>
<td>Email id<font color="red">*</font></td>
<td> <input id="email" type="email" placeholder="Email-id" name="email" required pattern="[A-Za-z]+[0-9]+#[A-Za-z]+.[A-Za-z]+"> </td>
</tr>
</table>
<table id="submit">
<tr>
<td id="errorBox"></td>
<td><input class="reg_data" id="submit" type="button" name="submit" value="Register"></td>
</tr>
</table>
</tr>
</table>
</form>
</div>
</body>
</html>
Here is my jQuery code
$(document).ready( function() {
$('.verify').click(function(){
var mob = $('#mob').val();
//alert(mob);
$.ajax({
url: "<?php echo base_url(); ?>/login/verify",
data: {'mob_no': mob},
type: "post",
cache: false,
success: function (data)
{
//alert(data);
var obj = $.parseJSON(data);
var fi="";
var otp="";
var rand="";
rand+=Math.floor(100000 + Math.random() * 99999);
$.each(obj, function()
{
fi=this['id'];
});
if(!fi=="")
{
//document.getElementById("random").innerHTML=random_number;
$('#rand').val(rand);
document.getElementById("rand").innerHTML=rand;
document.getElementById('random').style.display='block';
}
else
document.getElementById('reg_light').style.display='block';
document.getElementById('fade').style.display='block';
//alert(fi);
}
},
error: function (xhr, ajaxOptions, thrownError) {
//alert(thrownError);
}
});
});
});
Reset the form validation, after making the form visible
function resetFormValidator(formId) {
$(formId).removeData('validator');
$(formId).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(formId);
}
For Dynamically created dom
Use
$(document).on('click','#id',function(){
// do somethings
})
I'm trying to send text from my <td> with my simple ajax to my controller (I'm using Codeigniter).
Here is my HTML
<table class="table table-striped col-md-9 cstm">
<thead>
<tr>
<td> <strong>Transaction No</strong> </td>
<td> <strong> Line No </strong> </td>
<td> <strong>Item Code</strong> </td>
<td> <strong>Item Name</strong> </td>
<td> <strong>Extra Remark</strong> </td>
<td> <strong>Extra Remark 2</strong> </td>
<td width="10%"> <strong>Item QTY</strong> </td>
<td width="10%"> <strong>Receive QTY</strong> </td>
<td width="10%"> <strong>UOM Code</strong> </td>
<td width="10%"> <strong>Extra Remark Receipt</strong> </td>
</tr>
</thead>
<tbody>
<tr>
<td class="notrans">DORD-DK-M-TAM-69</td>
<td>1000 <input value="1000" type="hidden" name="LineNo[]" /> </td>
<td>S160291 <input value="S160291" type="hidden" name="ItemCode[]" /> </td>
<td>SMALL BAG <input value="SMALL BAG" type="hidden" name="ItemName[]" /> </td>
<td> <input value="" type="hidden" name="ExtraRemark[]" /></td>
<td> <input value="" type="hidden" name="ExtraRemark2[]" /></td>
<td>2 <input value="2.00000000000000000000" type="hidden" name="Quantity[]" /> </td>
<td><input required="required" type="text" value="2" name="recv_qty[]" /> </td>
<td> PCS<input type="hidden" value="PCS" name="uom[]" /> </td>
<td><input type="text" value="" name="ext_rmrk[]" /></td>
</tr>
<tr>
<td class="notrans">DORD-DK-M-TAM-70</td>
<td>2000 <input value="2000" type="hidden" name="LineNo[]" /> </td>
<td>S160288 <input value="S160288" type="hidden" name="ItemCode[]" /> </td>
<td>SMALL BAG <input value="SMALL BAG" type="hidden" name="ItemName[]" /> </td>
<td> <input value="" type="hidden" name="ExtraRemark[]" /></td>
<td> <input value="" type="hidden" name="ExtraRemark2[]" /></td>
<td>2 <input value="2.00000000000000000000" type="hidden" name="Quantity[]" /> </td>
<td><input required="required" type="text" value="2" name="recv_qty[]" /> </td>
<td> PCS<input type="hidden" value="PCS" name="uom[]" /> </td>
<td><input type="text" value="" name="ext_rmrk[]" /></td>
</tr>
</tbody>
</table>
<a class="pull-right btn btn-warning" id="update" href="#"> Update </a>
and here is my Jquery
$("#update").click(function(){
$this = $(this).val()
$.ajax({
data : { DetTrans : $('.notrans').text() },
url : "<?=base_url();?>dr_mutasi/updateEditItem",
type : "POST",
dataType: 'JSON',
success: function(data) {
console.log(data);
}
})
});
and here is my PHP
function updateEditItem(){
extract(populateform());
echo $DetTrans;
}
So, With my script abobve . I get this from my console.log
DORD-DK-M-TAM-69DORD-DK-M-TAM-70
As you can see, from my table there are .notrans and both of them has different value. Can you tell me how to send via ajax with this format ?
DORD-DK-M-TAM-69;DORD-DK-M-TAM-70
so i can explode it later with my PHP. Thanks in advance.
$("#update").click(function(){var value="";
$(document).find('.notrans').each(function(){
value += (value.length > 0) ? ';' + $(this).text():$(this).text();
});
$.ajax({
data : { DetTrans : value},
url : "<?=base_url();?>dr_mutasi/updateEditItem",
type : "POST",
dataType: 'JSON',
success: function(data) {
console.log(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped col-md-9 cstm">
<thead>
<tr><td> <strong>Transaction No</strong> </td> </tr>
</thead>
<tbody>
<tr><td class="notrans">DORD-DK-M-TAM-69</td></tr>
<tr><td class="notrans">DORD-DK-M-TAM-70</td></tr>
<tr><td class="notrans">DORD-DK-M-TAM-71</td></tr>
<tr><td class="notrans">DORD-DK-M-TAM-72</td></tr>
</tbody>
</table>
<a class="pull-right btn btn-warning" id="update" href="#"> Update </a>
You can update your jquery to get the value of all td containing notrans class.
<script type="text/javascript">
$(function(){
var value = '';
$('.notrans').each(function(){
if(value.length > 0)
value = value + ';' + $(this).text(); // will give you the value.
else
value = $(this).text();
});
});
</script>
Use value to send the data through ajax.
I save picture files on a server.
I want to use this file names to save them in a existing database.
The database name is "sob" and the table is "items". The field name is "PicturesFilenames". It is a medium text field. I would like to save there all file names of the just some seconds before uploaded files, separated with a #.
I stack and have no idea how to do that.
Some code would be fantastic. I tried many ways and had no success.
File: "upload_bodyarticles.php"
<?php session_start();
$_db_host = "xxx.xxx.com:3306";
$_db_username = "admin0";
$_db_passwort = "xxx0";
$_db_datenbank = "sob";
$_db_currentID ="";
# Verbindung zur Datenbank herstellen
$_link = mysql_connect($_db_host, $_db_username, $_db_passwort);
# Pr�fen ob die Verbindung geklappt hat
if (!$_link)
{
# Nein, also das ganze Skript abbrechen !
die("Keine Verbindung zur Datenbank m�glich: " .
mysql_error());
}
# Datenbank ausw�hlen
mysql_select_db($_db_datenbank, $_link);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>SoB - Administration</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/producttemplate.js"></script>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.uploadfile.min.js"></script>
<script type="text/javascript">
$(function()
{
$(document).on('click', 'a.ajaxify', function (e) {
e.preventDefault(); // prevent normal link navigation
var $this = $(this),
url = $this.attr('href');
$('#main-content').empty();
$("#main-content").load(url);
return false;
});
}
);
</script>
<style type="text/css">.buttonarea: (\a)</style>
<script type="text/javascript">
<!--
var js_string;
document.getElementById("recordWrite").disabled = true;
var ArrivalDateShownYN = "";
var CurrentPreviousNext = "";
var date = new Date();
var mysqlDateTime;
var yyyy = date.getFullYear();
var mm = date.getMonth() + 1;
var dd = date.getDate();
var hh = date.getHours();
var min = date.getMinutes();
var ss = date.getSeconds();
mysqlDateTime = yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + min + ':' + ss;
var frm = $('#form_articles');
frm.submit(function (ev) {
alert(form_articles.ID.value);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
elem = document.getElementById('buttonID');
function stop(e) {
e.preventDefault(); // browser - don't act!
e.stopPropagation(); // bubbling - stop
return false; // added for completeness
}
elem.addEventListener('click', stop, false);
// this handler will work
elem.addEventListener('click', function() { alert('I still work') }, false);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function jsRecordUpdateWrite()
{
var strTimestring = new Date().toISOString().slice(0, 19).replace('T', ' ');
var jsObject = {
"ID": document.form_articles.ID.value,
"Item": document.form_articles.Item.value,
"ItemNo": document.form_articles.ItemNo.value,
"Material": document.form_articles.Material.value,
"Age": document.form_articles.Age.value,
"ItemSize": document.form_articles.ItemSize.value,
"Price": document.form_articles.Price.value,
"Info": document.form_articles.Info.value,
"InfoRed": document.form_articles.InfoRed.value,
"ArrivalDate": document.form_articles.ArrivalDate.value,
"ArrivalDateShown": document.form_articles.ArrivalDateShown.value,
"MainPicLink": document.form_articles.MainPicLink.value,
"ItemCondition": document.form_articles.ItemCondition.value,
"ItemTimestamp": strTimestring,
"ItemCategory": document.form_articles.ItemCategory.value
};
$.ajax({
url : 'updatearticle.php',
dataType : 'json',
contentType: 'application/x-www-form-urlencoded',
data : jsObject,
type : 'POST'
});
}
function jsRecordCurrent() {
// ... the AJAX request is successful
var updatePage = function (response) {
json_string = JSON.stringify(response);
jsBlankArticle();
jsShowArticle();
};
// ... the AJAX request fail
var printError = function (req, status, err) {
alert("reading record failed");
};
// Create an object to describe the AJAX request
var ajaxOptions = {
url: 'currentarticle.php',
dataType: 'json',
success: updatePage,
error: printError
};
// Initiate the request!
$.ajax(ajaxOptions);
}
function jsShowArticle() {
js_articles = JSON.parse(json_string);
$('[name="recordNext"]').attr("id",js_articles[0]);
$('[name="recordCurrent"]').attr("id",js_articles[0]);
$('[name="recordPrevious"]').attr("id",js_articles[0]);
document.form_articles.ID.value = js_articles[0];
document.form_articles.Item.value = js_articles[1];
document.form_articles.ItemNo.value = js_articles[2];
document.form_articles.Material.value = js_articles[3];
document.form_articles.Age.value = js_articles[4];
document.form_articles.ItemSize.value = js_articles[5];
document.form_articles.Price.value = js_articles[6];
document.form_articles.Info.value = js_articles[7];
document.form_articles.InfoRed.value = js_articles[8];
document.form_articles.ArrivalDate.value = js_articles[9];
if (js_articles[10] = "Y") {
document.form_articles.ArrivalDateShown.checked = true;
}
else {
document.form_articles.ArrivalDateShown.checked = false;
}
document.form_articles.MainPicLink.value = js_articles[11];
document.form_articles.ItemCondition.value = js_articles[12];
document.form_articles.ItemCategory.value = js_articles[14];
var message_text = "Article Database Item-ID = ";
var message_array = js_articles[0];
$("#formheadline").html("<h2>" + message_text + message_array + "</h2>");
$("#hiddenID").html(message_array);
}
// -->
</SCRIPT>
</head>
<body class="page page-id-11505 page-template-default" onload="jsRecordCurrent();">
<div id="page-wrap">
<?php
include('includes/header.html');
?>
<div id="hiddenID" style="display: none;"></div>
<div id="container-main">
<div id="main-content">
<div class="post" id="post-11505">
<title>SoB - Administration</title>
<div class="entry">
<form class="formarticles" id="form_articles" method="post" action="<?= $_SERVER['PHP_SELF'] ?>" name="form_articles">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td align="right" width="120">
</td>
<td align="left">
<span id="formheadline"></span><span id="recordID"></span>
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<span style="padding-right:20px"><font color="orangered" size="+1"><tt><b>*</b></tt></font>indicates a required field</span>
</td>
</tr>
<br>
<tr>
<td align="right">
<span style="padding-right:20px">Item</span>
</td>
<td>
<input id="id" name="ID" type="hidden" name="ID">
<input id="Item" name="Item" type="text" maxlength="100" size="25"/>
<font color="orangered" size="+1"><tt><b>*</b></tt></font>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Item Category</span>
</td>
<td>
<input name="ItemCategory" type="text" maxlength="100" size="25" />
<font color="orangered" size="+1"><tt><b>*</b></tt></font>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Item No.</span>
</td>
<td>
<input name="ItemNo" type="text" maxlength="100" size="25" />
<font color="orangered" size="+1"><tt><b>*</b></tt></font>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Arrival Date</span>
</td>
<td>
<input name="ArrivalDate" type="date" />
<font color="orangered" size="+1"><tt><b>*</b></tt></font>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Show Arrival</span>
</td>
<td>
<input name="ArrivalDateShown" type="checkbox" />
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Material</span>
</td>
<td>
<input name="Material" type="text" maxlength="100" size="25" />
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Condition</span>
</td>
<td>
<input id="ItemCondition" name="ItemCondition" type="text" maxlength="100" size="25" />
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Age</span>
</td>
<td>
<input name="Age" type="text" maxlength="100" size="25" />
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Item Size</span>
</td>
<td>
<input name="ItemSize" type="text" maxlength="100" size="25" />
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Price</span>
</td>
<td>
<input name="Price" type="text" maxlength="100" size="25" />
<font color="orangered" size="+1"><tt><b>*</b></tt></font>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">Info Red</span>
</td>
<td>
<input name="InfoRed" type="text" maxlength="100" size="25" />
</td>
</tr>
<tr valign="top">
<td align="right">
<span style="padding-right:20px">Infos</span>
</td>
<td>
<textarea wrap="soft" name="Info" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td align="right">
<span style="padding-right:20px">MainPicLink</span>
</td>
<td>
<input type="hidden" name="ItemTimestamp" value="">
<input id="MainPicLink" name="MainPicLink" type="text" maxlength="100" size="50" />
<input type="hidden" name="timestamp">
</td>
</tr>
<br><br><br>
<tr>
<td align="right">
<span style="padding-right:20px"></span>
</td>
<td>
<img src='sobimages/frame01.jpg' alt='' />
<input type="file" name="picture01" id="picture01" />
</td>
</tr>
<tr id="buttonarea">
<td align="left" colspan="2">
<hr noshade="noshade" />
<input type="button" name="recordPrevious" value=" < " onclick="jsRecordPrevious()"/>
<input type="button" name="recordNext" value=" > " onclick="jsRecordNext()"/>
<input id="recordDelete" type="submit" name="recordDelete" value="Delete Data" onclick="jsRecordDeleteWrite()" />
<input id="recordInsertEditCancel" type="button" name="recordInsertEditCancel" value=" Cancel New/Edit Data " onclick="jsRecordInsertEditCancel()"/>
<input id="recordEditWrite" type="submit" name="recordEditWrite" value="Save Edited Data" onclick="jsRecordUpdateWrite()" />
<input id="recordInsert" type="button" name="recordInsert" value="Create New Rec." onclick="jsRecordInsert()"/>
<input id="recordInsertWrite" type="button" name="recordInsertWrite" value="Save New Rec." onclick="jsRecordInsertWrite()" />
</td>
</tr>
</table>
<select id="lstCategories" name="Choose a Category" size="38" style="position: absolute; top: 145px; left: 160px; width: 210px; height: 670px;" onclick="lstCategorySelected()">
<option disabled="TRUE" style="background-color: #C0C0C0;">0200 Japanese Armor Yoroi & Yoroi Parts</option>
<option>0201 Yoroi</option>
<option>0202 Cuirass - Dou</option>
<option>0203 Kusazuri</option>
<option>0204 Haidate</option>
<option>0205 Suneate</option>
<option>0206 Kōgake</option>
<option>0207 Sode</option>
<option>0208 Kote</option>
<option>0209 Helmet - Kabuto</option>
<option>0210 Jingasa</option>
<option>0211 Maedate</option>
<option>0212 Menpō</option>
<option>0213 Yodare-kake</option>
<option>0214 Armor Box - Bitsu</option>
<option>0215 Kabuto Box</option>
<option>0216 Japanese Weapons</option>
<option>0217 Other Collectibles</option>
<option disabled="TRUE" style="background-color: #C0C0C0;">0300 Reacting</option>
<option>0301 Tsuka Ito</option>
<option>0302 Idoshi Ito</option>
<option>0303 Fabric</option>
<option>0304 Buttons</option>
<option>0305 Urushi</option>
<option>0306 Other (2)</option>
<option>0307 Other (3)</option>
<option>0308 Other (4)</option>
<option disabled="TRUE" style="background-color: #C0C0C0;">0400 Japanese Antique</option>
<option>0401 Ceramic</option>
<option>0402 Kakejiku - Kakemono Scroll</option>
<option>0403 Metal Work</option>
<option>0404 Painting - Ukiyo-e</option>
<option>0405 Taiko Drum</option>
<option>0406 Wood Carving</option>
<option>0407 Other Collectibles</option>
<option disabled="TRUE" style="background-color: #C0C0C0;">0500 Chinese & Vietnamese Antiques</option>
<option>0501 Various (1)</option>
<option>0502 Various (2)</option>
</select>
<select id="lstMaterial" name="Choose Materials" size="12" multiple="TRUE" style="position: absolute; top: 345px; left: 840px; width: 210px; height: 200px;">
<option>Kaki(Persimmons wood)</option>
<option>Hinoki(Cypress)</option>
<option>Sugi(Cedar)</option>
<option>Keyaki(Zelkova)</option>
<option>Bronze</option>
<option>Kiri (Paulownia wood)</option>
<option>Kuri(Chestnut wood)</option>
<option>Maki-e</option>
<option>Forged Iron Hardware</option>
<option>Coral</option>
<option>Bamboo</option>
<option>Jade Stone</option>
</select>
<input id="lstMaterialToString" type="button" name="materialToString" value="Add Selection to Material" onclick="lstMaterialSelected()" style="position: absolute; top: 545px; left: 840px;"/>
</form>
<div id="mulitplefileuploader" title="">
<br>
Upload
</div>
<div id="status"></div>
<script>
$(document).ready(function()
{
var settings = {
url: "upload.php",
method: "POST",
allowedTypes:"jpg,png,gif",
fileName: "myfile",
multiple: true,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload successful</font>");
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload failed</font>");
}
}
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
</div>
</div>
</div>
<div id="aside">
</div>
<br class="clearfloat" />
</div> <!-- End of main container -->
</div><!-- END Page Wrap -->
<div id="footer">
<br class="clearfloat" />
<?php
if(isset ($_SESSION['name']))
{
$loginTitle="Logout";
$loginLink="body_logout.php";
}
else
{
$loginTitle="Login";
$loginLink="body_login.php";
}
?>
<p id="copyright">© 2015 by XXX | Terms of Use & Privacy Policy | <?php echo $loginTitle;?></p>
</div>
</body>
</html>
File: "upload.php"
//If directory doesnot exists create it.
$output_dir = "sobimages/";
if(isset($_FILES["myfile"]))
{
$ret = array();
$error =$_FILES["myfile"]["error"];
{
if(!is_array($_FILES["myfile"]['name'])) //single file
{
$fileName = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
//echo "<br> Error: ".$_FILES["myfile"]["error"];
$ret[$fileName]= $output_dir.$fileName;
}
else
{
$fileCount = count($_FILES["myfile"]['name']);
for($i=0; $i < $fileCount; $i++)
{
$fileName = $_FILES["myfile"]["name"][$i];
$ret[$fileName]= $output_dir.$fileName;
move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName );
}
}
}
echo json_encode($ret);
}
?>
1. Use mysqli_connect, mysqli object or pdo
mysql_connect is deprecated as of PHP 5.5.0
2. In your code
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
(a) Good Practice is modifying the provided filename with system generated filename :: you may use time() or microtime() functions
i.e. Use
$_filename = rand().time().end(explode('.', $_FILES['myfile']['name']));
(b) Fetch your database-table-field for the picture data and append the new file name with '#' as concatenation string.
i.e. $_filename = $dbfiles.'#'.$_filename
(c) This filename is to be saved to database with the query
'UPDATE `items` SET `PicturesFilenames` = \''.$_filename.'\' WHERE foo_id='.$_id
I prefer logic than code as coding methodology varies person to person
Thanks & Regards
Bellow is the code to create fields Dynamically. it uses j query to create fields dynamically...
image to describe it more :- http://i44.tinypic.com/33a3qzn.png
i want to calculate the entry of grand total on the basis of previous inputs...
i wan't it to display the result on the basis of onclick() event...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="nietsms.css" rel="stylesheet" type="text/css" />
<title> NIET Store Management System BY SDC </title>
<script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(function(){
var newRowNum = 0;
$('#addnew').click(function(){
newRowNum += 1;
var addRow = $(this).parent().parent();
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html(newRowNum);
$('input', newRow).each(function(i){
var newID = newRowNum + '_' + i;
$(this).attr('id',newID).attr('name',newID);
});
addRow.before(newRow);
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
newRowNum -= 1;
return false;
});
$('#go').click(function(){
var numRows=$('#tabdata tbody tr').length;
$('#myHiddenInput').val(numRows);
});
return false;
});
});
</script>
</head>
<body id="bo" >
<div id="site">
<div id="header">
<img src="logo.png" align="left" />
</div>
<div id="content">
<font color="white" style="font-family: serif; font-size: xx-large;">Welcome, Admin</font>
<div style="margin-left: 20px;" id="register"><br /><br /><br />
<br /><br />
<form action="back.php" method="POST" target="_new">
<fieldset style="width: 1714px;">
<legend style="font-family: fantasy; font-style: !important; color: teal; font-size:30px ;">Add Items</legend><br /><br />
<p>Category :-
<select size="1" name="cat">
<option value="0">Choose Item Category</option>
<option value="1">Stationary</option>
<option value="2">House Keeping</option>
<option value="3">Electrical Equipments</option>
<option value="4">Sanitary Items</option>
<option value="5">Hardware</option>
<option value="6">Paint</option>
<option value="7">Other Items</option>
</select></p>
<table id="tabdata" align="left" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<td>S.No.</td>
<td align="center">Date</td>
<td align="center">Bill No.</td>
<td align="center">Name Of Item</td>
<td align="center">Quantity</td>
<td align="center">Rate</td>
<td align="center">Discount</td>
<td align="center">Amount</td>
<td align="center">VAT %</td>
<td align="center">Other Charges</td>
<td align="center">Grand Total</td>
<td align="center">Vendor Name</td>
<td align="center">Vendor Contact No.</td>
</tr>
</thead>
<tbody>
<tr>
<td><a id="addnew" href="">Add</a></td>
<td><input type="text" name="0_0" style="width: 120px;"/></td>
<td><input type="text" name="0_1" style="width: 160px;"/></td>
<td><input type="text" name="0_2" style="width: 280px;"/></td>
<td><input type="text" name="0_3" style="width: 80px;"/></td>
<td><input type="text" name="0_4" style="width: 65px;"/></td>
<td><input type="text" name="0_5" style="width: 105px;"/></td>
<td><input type="text" name="0_6" style="width: 105px;"/></td>
<td><input type="text" name="0_7" style="width: 75px;"/></td>
<td><input type="text" name="0_8" style="width: 135px;"/></td>
<td><input type="text" name="0_9" style="width: 125px;"/></td>
<td><input type="text" name="0_10" style="width: 195px;"/></td>
<td><input type="text" name="0_11" /></td>
</tr>
<tr>
<td>
<input type="hidden" id="myHiddenInput" name="myHiddenInput" value="1"/>
</td>
</tr>
</tbody>
</table>
<tr><td><input id="go" name="go" type="submit" value="Submit And Print Result" /></td></tr>
</fieldset>
</form>
<br />
</div>
</div>
<div id="footer">
<p style="float: left; color: white; margin-left: 25%;" > Copyright #2012 SDC NIET(Mayank Sachan And Tushar Kesarwani) | All Rights Reserved</p>
</div>
</div>
</body>
</html>
Add the code to your
$('#addnew').click(function(){})
Select current rows and calculate total (I'd add classes to the amount and total fields) before adding the new row
total = 0;
$('#tabdata td input.amount').each(function() {
total += parseInt($(this).val());
})
Then update after adding it
$('#tabdata td input.total').val(total);