<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btnAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
function getAllEmpData() {
var data = [];
$('tr.data-contact-person').each(function () {
var sname = $(this).find('.sourcename01').val();
var saddress = $(this).find('.sourceaddress01').val();
var sincome = $(this).find('.sourceincome01').val();
var alldata = {
'mySource': sname,
'mySAddress': saddress,
'mySIncome': sincome
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function () {
var data = JSON.stringify(getAllEmpData());
//console.log(data);
$.ajax({
url: 'closures.aspx/SaveData',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Forms</h2>
<table class="table" id="maintable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Income</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" style="width:200px;" name="sourcename" class="form-control sourcename01" /></td>
<td>
<input type="text" style="width:200px;" name="sourceaddress" class="form-control sourceaddress01" /></td>
<td>
<input type="text" style="width:200px;" name="sourceincome" class="form-control sourceincome01" /></td>
<td style="width:200px;">
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit</button>
</div>
</form>
</body>
</html>
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Linq
Imports System.Web
Imports System.Web.Services
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports Newtonsoft.Json
Partial Public Class disclosures
Inherits System.Web.UI.Page
Public Shared Constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function SaveData(empdata As String) As String
Dim serializedData = JsonConvert.DeserializeObject(Of List(Of Employee))(empdata)
Using con = New SqlConnection(Constr)
If con.State = ConnectionState.Closed Then
con.Open()
End If
For Each data As Employee In serializedData
Using cmd = New SqlCommand("INSERT INTO SourceDetails(sourcename, sourceaddress, sourceincome, createDate) VALUES(@sname, @saddress,@sincome,@CreatedDate)")
cmd.CommandType = CommandType.Text
cmd.Parameters.AddWithValue("@sname", data.mySpouse)
cmd.Parameters.AddWithValue("@saddress", data.mySAddress)
cmd.Parameters.AddWithValue("@sincome", data.mySIncome)
cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now)
cmd.Connection = con
cmd.ExecuteNonQuery()
End Using
Next
con.Close()
End Using
Return Nothing
End Function
End Class
Public Class Employee
Public Property mySpouse() As String
Get
Return m_mySpouse
End Get
Set(value As String)
m_mySpouse = value
End Set
End Property
Private m_mySpouse As String
Public Property mySAddress() As String
Get
Return m_mySAddress
End Get
Set(value As String)
m_mySAddress = value
End Set
End Property
Private m_mySAddress As String
Public Property mySIncome() As String
Get
Return m_mySIncome
End Get
Set(value As String)
m_mySIncome = value
End Set
End Property
Private m_mySIncome As String
Public Property CreatedDate() As DateTime
Get
Return m_CreatedDate
End Get
Set(value As DateTime)
m_CreatedDate = Value
End Set
End Property
Private m_CreatedDate As DateTime
End Class
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
},
error: function () {
alert("Error while inserting data");
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btnAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
function getAllEmpData() {
var data = [];
$('tr.data-contact-person').each(function () {
var sname = $(this).find('.sourcename01').val();
var saddress = $(this).find('.sourceaddress01').val();
var sincome = $(this).find('.sourceincome01').val();
var alldata = {
'mySource': sname,
'mySAddress': saddress,
'mySIncome': sincome
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function () {
var data = JSON.stringify(getAllEmpData());
//console.log(data);
$.ajax({
url: 'closures.php',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Forms</h2>
<table class="table" id="maintable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Income</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" style="width:200px;" name="sourcename" class="form-control sourcename01" /></td>
<td>
<input type="text" style="width:200px;" name="sourceaddress" class="form-control sourceaddress01" /></td>
<td>
<input type="text" style="width:200px;" name="sourceincome" class="form-control sourceincome01" /></td>
<td style="width:200px;">
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit</button>
</div>
</form>
</body>
</html>
$("#btnSubmit").click(function () {
// USE jQuery serializeArray TO GATHER ALL FORM DATA
var formData = (this.form).serializeArray();
var data = JSON.stringify(formData);
//console.log(data);
$.ajax({
url: 'closures.php',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
That leads to my question, any reason it was removed?No that was a typo - to do a test here I had to change that to point to one of my own scripts when I pasted it back I did not copy the url in correctly. Should be
$("#btnSubmit").click(function () {
// USE jQuery serializeArray TO GATHER ALL FORM DATA
var formData = (this.form).serializeArray();
var data = JSON.stringify(formData);
//console.log(data);
$.ajax({
url: 'closures.aspx/SaveData',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
First, when I tried your solution Julian, I am getting the following error:You need to show us the code where you tried to do this. serializeArray is a valid jQuery function and will serialize your form variables into an array that can then be stringified into JSON
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Forms</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btnAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" placeholder="Name of income source..." class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" placeholder="Address of income source..." class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" placeholder="Income..." class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
function getAllEmpData() {
var data = [];
$('tr.data-contact-person').each(function () {
var sname = $(this).find('.sourcename01').val();
var saddress = $(this).find('.sourceaddress01').val();
var sincome = $(this).find('.sourceincome01').val();
var alldata = {
'mySource': sname,
'mySAddress': saddress,
'mySIncome': sincome
}
data.push(alldata);
});
console.log(data);
return data;
}
$("#btnSubmit").click(function () {
// USE jQuery serializeArray TO GATHER ALL FORM DATA
var formData = (this.form).serializeArray();
var data = JSON.stringify(formData);
//console.log(data);
$.ajax({
url: 'closures.aspx/SaveData',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ 'empdata': data }),
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
});
});
</script>
<style type="text/css">
.bs-example{
margin-left: 250px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="bs-example">
<form id="form1" runat="server">
<div class="container">
<h2>Forms</h2>
<table id="maintable">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Income</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" style="width:200px;" name="sourcename" class="form-control sourcename01" placeholder="Name of income source..." /></td>
<td>
<input type="text" style="width:200px;" name="sourceaddress" class="form-control sourceaddress01" placeholder="Address of income source..." /></td>
<td>
<input type="text" style="width:200px;" name="sourceincome" class="form-control sourceincome01" placeholder="Income..." /></td>
<td style="width:200px;">
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table><br />
<button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm">Submit</button>
</div>
</form>
</div>
</body>
</html>
error: function(xhr, status, error) {
alert(xhr.responseText);
}
and got the following error messages: cmd.Parameters.AddWithValue("@sname", data.mySpouse)
That's your code I copied boss.Which I got from your opening post.
I am also receiving [object Object] which tells me that a certain form field is not getting stringrified.Breaking your code down
var data = JSON.stringify(getAllEmpData());
data now contains a JSON stringdata: JSON.stringify({ 'empdata': data }),
So now you have a sringified object that has one property empdata that contains a string that is another stringified JavaScript object.Dim serializedData = JsonConvert.DeserializeObject(Of List(Of Employee))(empdata)
So it appears that it is expecting empdata to be a normal POST $("#btnSubmit").click(function () {
var data = JSON.stringify(getAllEmpData());
//console.log(data);
$.ajax({
url: 'closures.aspx/SaveData',
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
// ***** DON'T STRINGIFY THE data PROPERTY *****
data: { 'empdata': data },
success: function () {
alert("Data Added Successfully");
},
error: function () {
alert("Error while inserting data");
}
});
$(document).ready(function () {
$(document).on("click", "#btnAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" style="width:200px;" name="sourcename' + rowCount + '" placeholder="Name of income source..." class="form-control sourcename01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceaddress' + rowCount + '" placeholder="Address of income source..." class="form-control sourceaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="sourceincome' + rowCount + '" placeholder="Income..." class="form-control sourceincome01" /></td>' +
'<td style="width:200px;"><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
$(document).on("click", "#btnAdd2", function () { //
var rowCount = $('.data-contact-person2').length + 1;
var contactdiv = '<tr class="data-contact-person2">' +
'<td><input type="text" style="width:200px;" name="spousename' + rowCount + '" placeholder="Name of income source of spouse..." class="form-control spousename01" /></td>' +
'<td><input type="text" style="width:200px;" name="spouseaddress' + rowCount + '" placeholder="Address of income source of spouse..." class="form-control spouseaddress01" /></td>' +
'<td><input type="text" style="width:200px;" name="spouseincome' + rowCount + '" placeholder="Income..." class="form-control spouseincome01" /></td>' +
'<td><button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete2" class="deleteContact btn btn btn-danger btn-xs">Add More</button></td>' +
'</tr>';
$('#maintable2').append(contactdiv); // Adding these controls to Main table class
});