We Keep Coding

How to change button text by verifying data are same or not when edited

I need one help.
I need to change button text according to some condition using Javascript/Jquery. I will explain my code below.
Here, when a user is selects the drop-down list, the 3 input field is filled with some value. the JavaScript code is given below.
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
Here I need that when a user will click on the Check button it will check for the original value after the drop down select if all are as it was then the Add button text will remain as Add.
If any field value has changed after selecting that button text will change to Update.
Please help me.

Try this
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
function checkAll(){
var uname = $('#uname').val();
var email = $('#uemail').val();
var city = $('#ucity').val();
var count = 0;
if(uname!='Ram')
{
count++;
}
else if(email!='subhra#gmail.com')
{
count++;
}
else if(city!='cuttuck')
{
count++;
}
if(count>0)
{
$('#add').text('UPDATE');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button id="add" type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>

var arrField = new Array();
function setValue() {
if (document.getElementById('uinfo').value == 1) {
document.getElementById('uname').value = "Ram";
document.getElementById('uemail').value = "subhra#gmail.com";
document.getElementById('ucity').value = "cuttuck";
arrField.push({
'uname': document.getElementById('uname').value,
'uemail': document.getElementById('uemail').value,
'ucity': document.getElementById('ucity').value
});
} else {
document.getElementById('uname').value = "";
document.getElementById('uemail').value = "";
document.getElementById('ucity').value = "";
arrField = [];
}
$('#Save').text('Add');
}
$(document).ready(function() {
$('#uname, #uemail, #ucity').change(function() {
if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val())
$('#Save').text('Add');
else
$('#Save').text('Update');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="text" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save">
<i class="icon-user icon-white"></i> Add
</button>

The (additional) jQuery code you're looking for would be something like this. Note that I added the class "changebtn" to the target button to make it work:
$(document).ready(function(){
// Save original value when document is ready
var original = $("#uinfo").val();
// Update Button when current value is different
// from original as the selection changes
$("#uinfo").on("change", function(){
if ($(this).val() != original) {
$(".changebtn").html("Update");
} else {
// Reset Button when User switches back to original
$(".changebtn").html("Add");
}
});
});
JSFiddle demo: https://jsfiddle.net/0yj5y5sb/2/

Try this way
//Object, key based on select options
var popData= {
'user-info':
{uname: 'User1', uemail: 'user1#test.com', ucity: 'user city'}
,
'emp-info':
{uname: 'Emp1', uemail: 'emp1#test.com', ucity: 'emp city'}
};
//Select change that will update values
$('#uinfo').change(function(){
$.each(popData[$(this).val()], function( i, val ) {
$('#'+i).val(val);
});
});
//When input change check based on the conditions
$('button.check').click(function(){
//Check if any changes in the fields
if(
popData[$('#uinfo').val()].uname != $('#uname').val() ||
popData[$('#uinfo').val()].uemail != $('#uemail').val() || popData[$('#uinfo').val()].ucity != $('#ucity').val()
)
{
$('button.add').text('Update');
}
//Check if no changes in the fields
else if(popData[$('#uinfo').val()].uname == $('#uname').val() &&
popData[$('#uinfo').val()].uemail == $('#uemail').val() && popData[$('#uinfo').val()].ucity == $('#ucity').val())
{
$('button.add').text('Add');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uinfo">
<option value="">Select</option>
<option value="user-info">User Info</option>
<option value="emp-info">Emp Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn check">
<i class="icon-user icon-white"></i> Check
</button>
<button type="button" class="btn btn-success add">
<i class="icon-user icon-white"></i> Add
</button>

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.

Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>

You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>

You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here

function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

Dynamic TextFields in JSP with data from MYSQL database upon item selection

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks
He is what I am trying to do
<form method="post" action=".\Sale">
<div class= "form">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
<option>--Select Product--</option>
<% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
for(int i=0;i<kl.length;i++) {%>
<option><% out.println(kl[i]); %></option>
<% } %>
</select>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-bars"></i>
</span>
<input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-home" ></i>
</span>
<textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon">
<i class="fa fa-picture-o"></i>
</span>
<img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
</div>
<input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
<input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
</form>

You can do that using ajax.
Find the below links to get the data from database using Jsp and servlets and ajax.
http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html
How to use Servlets and Ajax?
http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html
Give it a try ;)

I will explain this into step by step with code.
step 1. in jsp file display all product into select option tag. and give select tag name and **id**.
step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){
var productid = jQuery(this).val();
jQuery.ajax({
async : false,
url : 'your servlet url',
type : 'POST',
dataType: 'json',
data : {'productid':productid},
success : function(response){
if (response.success == 'true' && response.html != '') {
$('#your price text box id').val(response.html)
}else{
jQuery("#user_role_parent").html("");
}
},
error : function(){
alert("Some thing went wrong!!!");
},
});
Step 3. response.html come from servlet
I hope you are understand this code and solve your problem.

Javascript results need to capture in php to email

I have a form where I have a total of 11 checkboxes for the user to select from. I want to be able to capture which particular checkbox the user has selected and be able to send that out via email. I am currently using php to do that.
I am able to capture the value and display it as an alert using Javascript. However, I am unable to figure out how I could possibly take that specific data captured using javascript and be able to pass it to PHP.
I am very unfamiliar with PHP and have tried to pass a variable through but have failed. See link for my code in further detail.
<!-- Modal Body -->
<div class="modal-body">
<p>Please fill out the information below.</p>
<form class="j-forms" style="box-shadow: none;"
id="TSCreatePackageForm" role="form" method="post"
action="php/customPackage.php">
<!-- Company Name -->
<div class="span6 unit">
<label class="label">Company Name</label>
<div class="input">
<label class="icon-right" for="tscpCompanyName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpCompanyName" name="tscpCompanyName"
placeholder="e.g XYZ Company">
</div>
</div>
<!-- Business Entity Type -->
<div class="span6 unit">
<label class="label">Business
Entity Type</label>
<div class="input">
<label class="icon-right" for="tscpBusinessType">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpBusinessType" name="tscpBusinessType"
placeholder="(I.E. Corporation, LLC,ETC)">
</div>
</div>
<!--Years in Business -->
<div class="span6 unit">
<label class="label">Years In Business</label>
<div class="input">
<label class="icon-right" for="tscpYears">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpYears" name="tscpYears" placeholder="e.g. 5">
</div>
</div>
<!-- Number of Units -->
<div class="span6 unit">
<label class="label">Number of units Owned/Managed</label>
<div class="input">
<label class="icon-right" for="tscpNumberOfUnits">
<i class="fa fa-briefcase"></i>
</label>
<input type="text" id="tscpNumberOfUnits" name="tscpNumberOfUnits"
placeholder="e.g. 525">
</div>
</div>
<!-- First Name -->
<div class="span6 unit">
<label class="label">First Name</label>
<div class="input">
<label class="icon-right" for="tscpFirstName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpFirstName" name="tscpFirstName"
placeholder="e.g John">
</div>
</div>
<!-- Last Name -->
<div class="span6 unit">
<label class="label">Last Name</label>
<div class="input">
<label class="icon-right" for="tscpLastName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpLastName" name="tscpLastName"
placeholder="e.g Doe">
</div>
</div>
<!-- Email -->
<div class="span6 unit">
<label class="label">Email</label>
<div class="input">
<label class="icon-right" for="tscpEmail">
<i class="fa fa-mail"></i>
</label>
<input type="text" id="tscpEmail" name="tscpEmail"
placeholder="e.g John#therrd.com">
</div>
</div>
<!-- Phone Number -->
<div class="span6 unit">
<label class="label">Phone</label>
<div class="input">
<label class="icon-right" for="tscpNumber">
<i class="fa fa-phone"></i>
</label>
<input type="text" placeholder="phone/mobile" id="tscpNumber"
name="tscpNumber">
<span class="tooltip tooltip-right-top">Your contact phone number</span>
</div>
</div>
<!-- Services -->
<div class="span12 unit">
<label class="label">Please Select Services You're Interested In:</label>
<div class="span6">
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService1"
value="Incident Reporting Database" checked>
<i></i>
Incident Reporting Database
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService2"
value="Rapsheet (National Criminal Background Search)">
<i></i>
Rapsheet (National Criminal Background Search)
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService3"
value="Social Security Number Validation">
<i></i>
Social Security Number Validation
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService4"
value="Sex Offender Database Check">
<i></i>
Sex Offender Database Check
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService5"
value="Evictions, Liens, and Judgment Search">
<i></i>
Evictions, Liens, and Judgment Search
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService6"
value="Trans Union And Equifax Credit Report">
<i></i>
Trans Union And Equifax Credit Report
</label>
</div>
<div class="span6">
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService7"
value="FICO Score">
<i></i>
FICO Score
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService8"
value="Bankruptcy Report">
<i></i>
Bankruptcy Report
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService9"
value="ID Mismatch Alert">
<i></i>
ID Mismatch Alert
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService10"
value="Equifax Credit Report">
<i></i>
Equifax Credit Report
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService11"
value="Sex Offender Search (Meagan’s Law)">
<i></i>
Sex Offender Search (Meagan’s Law)
</label>
</div>
</div>
<!-- Captcha -->
<div class="span12 unit">
<div class="captcha-group">
<div class="input">
<label class="icon-right" for="captcha_code">
<i class="fa fa-unlock-alt"></i>
</label>
<input type="text" id="captcha_code" name="human"
placeholder="solve the captcha">
<span class="tooltip tooltip-right-top">Enter sum of the digits</span>
</div>
<label class="captcha" for="captcha_code">
2 + 3 = ?
</label>
</div>
</div>
<!-- Buttons -->
<div class="span6 unit">
<button type="submit" name="submit" value="Send"
class="btn btn-lg btn-theme-bg">Send
</button>
<a class="btn btn-lg btn-primary" data-dismiss="modal">Close</a>
</div>
<!-- Last Name -->
<div class="span6 unit hidden">
<label class="label">Last Name</label>
<div class="input">
<label class="icon-right" for="vals">
<i class="fa fa-user"></i>
</label>
<input type="text" id="vals" name="vals">
</div>
</div>
</form>
<!-- Validation -->
<script>
var vals = [];
/**CheckBox Value Function **/
var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
var vals = $checkes.filter(':checked').map(function () {
return this.value;
}).get();
alert(JSON.stringify(vals));
});
$('#TSCreatePackageForm').validate({
/* #validation states + elements */
errorClass: 'error-view',
validClass: 'success-view',
errorElement: 'span',
rules: {
tscpCompanyName: {
required: true,
letterswithbasicpunc: true
},
tscpBusinessType: {
required: true,
letterswithbasicpunc: true
},
tscpYears: {
required: true,
digits: true,
min: 1
},
tscpNumberOfUnits: {
required: true,
digits: true,
min: 1,
max: 99999
},
tscpFirstName: {
required: true
},
tscpLastName: {
required: true
},
tscpEmail: {
required: true,
email: true
},
tscpNumber: {
required: true,
phoneUS: true
},
captcha_code: {
required: true
}
},
// Add class 'error-view'
highlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(validClass).addClass(errorClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(validClass).addClass(errorClass);
}
},
// Add class 'success-view'
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(errorClass).addClass(validClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(errorClass).addClass(validClass);
}
},
// Error placement
errorPlacement: function(error, element) {
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').append(error);
} else {
$(element).closest('.unit').append(error);
}
}
});
</script>
PHP Code
<?php
if ($_POST["submit"]) {
$companyName = $_POST['tscpCompanyName'];
$businessType = $_POST['tscpBusinessType'];
$yearsBusiness = $_POST['tscpYears'];
$numberOfUnits = $_POST['tscpNumberOfUnits'];
$firstName = $_POST['tscpFirstName'];
$lastName = $_POST['tscpLastName'];
$email = $_POST['tscpEmail'];
$number = $_POST['tscpNumber'];
$human = intval($_POST['human']);
$from = "From:senderEmail#senderEmail.com";
$to = "recieverEmail#recieverEmail.com";
$subject = 'Custom Package Request';
$body ="Company Name: $companyName\n\n Business Type: $businessType\n\n Years In Business: $yearsBusiness\n\n First Name: $firstName\n\n Last Name: $lastName\n\n Email: $email\n\n Number: $number\n\n Services: $selected\n\n";
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
header("Location: /thank-you/mortgage-lending.html");
} else {
header("Location: /Error.html");
}
}
else {
header("Location: /error.html");
}
}
?>

Why don't you use a hidden field form and send data to hidden field value.
`<input type="hidden" name="sth" id="sth">
now you can send the javascript value to this input field
as you described above you have grabbed value of check box
let's suppose you have taken checkbox value to a variable named vals in js
now you can do
<script>
//if your value from checkbox is placed on variable vals
$('#sth').val(vals)
</script>
using this what you can do is you can grab your value using any of post method

I figured out a way to obtained the value and be able to email it out using PHP.
Here is the code:
<!-- Checkbox Value -->
<script>
var vals = [];
document.getElementsByName('vals').value = vals;
/**CheckBox Value Function **/
var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
var vals = $checkes.filter(':checked').map(function () {
return this.value;
}).get();
alert(JSON.stringify(vals));
document.getElementById('vals').value = JSON.stringify(vals);
});
<!-- Checkbox Value -->

Javascript - Difference between two dates

I want calculate the difference between two dates write in two filed of form page. Below the html code:
<!-- CALENDARIO -->
<script src="js/datetimepicker_css.js"></script>
<!-- CALENDARIO -->
Altro codice html
<tr>
<td width="306" valign="top">
<div class="col-xs-8">
Data inizio<br>
<div class="input-group">
<input type="text" class="form-control" name="data_inizio" id="date_validation1" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation1','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Data fine<br>
<div class="input-group">
<input type="text" class="form-control" name="data_fine" id="date_validation2" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation2','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Numro giorni<br>
<input type="text" class="form-control" name="numero_giorni"></div>
</td>
</tr>
How to calculate the difference between two dates and write the difference in the filed name="days"?
Thanks

to calculate difference between 2 dates and assign the value to another textbox
<input type="text" id="val1"/>
<input type="text" id="val2"/>
<input type="text" id="val3" />
<script>
function myFun() {
var x2=document.getElementById("val1").value;
var x3=document.getElementById("val2").value;
var msPerDay = 1000*60*60*24;
d1=new Date(x2);
d2=new Date(x3);
var x4=document.getElementById("val3");
var dd=( ((d1 - d2) / msPerDay).toFixed(0)+"days" );
x4.value=dd;
}
</script>
<input type="submit" id="myid" onclick="myFun()" value="get difference"/>