Develop Reference

Dynamically Calculating field value with js and php

So ive been trying to calculate automatically exchange rates with a rate i get from php and send it to a js script. Unfortunates the first field is calculated correctly but the second stops at a limit. ive tried this approach
<fieldset>
<div class="col-12" style="margin-left: -1rem !important;">
<h6 class="py-50" for="paypal">Choose What You Sell</h6>
</div>
<div class="row mb-75">
<div class="col-12 d-flex">
<div class="cursor-pointer d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/btc.png" alt="BTC Logo">
<input type="radio" name="option" onchange="hideB(this)" id="btc" value="BTC" checked>
</label>
</div>
<div class="cursor-pointer pl-1 d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/eth.png" height="30" alt="ETH Logo">
<input type="radio" name="option" onchange="hideA(this)" id="eth" value="ETH">
</label>
</div>
</div>
<hr>
</div>
<div class="row" id="A">
<div class="col-sm-4">
<div class="form-group">
<label for="value_n">Enter Your amount in USD </label>
<input type="text" id="value_btc" name="value_btc" class="form-control required" onkeyup="mult(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in BTC</label>
<input type="text" class="form-control" id="btc_rate" name="btc_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (BTC - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_btc" name="receive_btc" readonly="readonly" placeholder="Amount in Naira" >
</div>
</div>
</div>
<div class="row" id="B" style="display:none">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName13">Enter Your amount in USD </label>
<input type="text" id="value_eth" name="value_eth" class="form-control required" onkeyup="mult2(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in ETH</label>
<input type="text" class="form-control" id="eth_rate" name="eth_rate" name="eth_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (ETH - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_eth" name="receive_eth" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
</div>
im using the js below to calculate the field value for btc and how much the client will recieve:
<script>
function mult(value_btc) {
var btc_rate = "<?php echo $btc_rate; ?>";
<!-- END: Theme JS-->
var x, y ;
x = value_btc / btc_rate ;
y = btc_rate * 4 ;
document.getElementById('btc_rate').value = x;
document.getElementById('receive_btc').value = y;
}
</script>
<script>
function mult2(value_eth) {
var eth_rate = "<?php echo $eth_rate; ?>";
var x, y ;
x = value_eth / eth_rate ;
y = eth_rate * 4 ;
document.getElementById('eth_rate').value = x;
document.getElementById('receive_eth').value = y;
}
</script>
the x values work correctly but the y value stops at a limit.
will really appreciate if someone can help out. thanks in advance

does not show error in my captcha code as security code does not match

<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Address</label>
<div class="col-sm-3">
<input id="address" class="address" type="text" name="address"
onchange="IsValidAddress(this.form.address.value)" required="required" >
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Zip Code :</label>
<div class="col-sm-3">
<input id="zipcode" class="zipcode" type="text" name="zipcode" onchange="IsValidZipCode(this.form.zipcode.value)" required="required" >
<br />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> City</label>
<div class="col-sm-3">
<input class="form-control" name="city" type="text" id="city" required="required" value="">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> State</label>
<div class="col-sm-3">
<input class="form-control" name="state" type="text" id="state" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Country</label>
<div class="col-sm-3">
<input class="form-control" name="country" type="text" id="country" value="" required="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> Fax</label>
<div class="col-sm-3">
<input class="form-control" name="fax" type="text" id="fax" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Captcha</label>
<div class="col-sm-2">
</div>
<div class="col-sm-3">
<form name="review" ACTION="playing-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000"></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit" class="btn1" name="submit" id="send">
</form>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</div>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
my javascript code is written above html code but in this code i m writing below html code ......
does it effect my calling my function of captcha
does not show me error like security does not match?
if i click n submit button it redirect me to the thank you page
what is the problem with captcha validation
why it is not validation the match not done correctly
why it is directly accepting the form without validating the capctha?
what is the problem n the code?
cannot identify the error pease help me

Issue with jQuery validate not working against element

I am having an issue using jQuery validate against a form in a current project.
I am sure it is a typo I am missing or something small, but can't sem to figure out why it is occurring.
The error I am getting in the console debugger is: Object doesn't support property or method 'validate'
The bundle configuration file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/ContactForm.js"));
The code snippets are below:
<form action="#Url.Action("UpdateContactInformation", "ContactController")" method="post" role="form" class="form-horizontal" id="contactForm">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<!-- First Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input class="form-control" id="id_firstName" maxlength="75" name="txtFirstName" placeholder="First Name" required="required" title="" type="text" />
</div>
</div>
<!-- Last Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input class="form-control" id="id_lastName" maxlength="75" name="txtlastName" placeholder="Last Name" required="required" title="" type="text" />
</div>
</div>
<!-- Title Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-4">
<input class="form-control" id="id_title" maxlength="75" name="txtTitle" placeholder="Title" required="required" title="" type="text" />
</div>
</div>
<!-- Address Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Address</label>
<div class="col-md-4">
<input class="form-control" id="id_address" maxlength="75" name="txtAddress" placeholder="Address" required="required" title="" type="text" />
</div>
</div>
<!-- City Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">City</label>
<div class="col-md-4">
<input class="form-control" id="id_city" maxlength="75" name="txtCity" placeholder="City" required="required" title="" type="text" />
</div>
</div>
<!-- State Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuStates" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="statesDropDownMenu" aria-labelledby="dropdownMenuStates">
</ul>
</div>
</div>
</div>
<!-- Zip Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">ZipCode</label>
<div class="col-md-4">
<input class="form-control" id="id_zipCode" maxlength="75" name="txtZipCode" placeholder="ZipCode" required="required" title="" type="number" />
</div>
</div>
<!-- Email Primary Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Email Primary</label>
<div class="col-md-4">
<input class="form-control customEmail" id="id_emailPrimary" maxlength="75" name="txtEmailPrimay" placeholder="Email Primary" required="required" />
</div>
</div>
<!-- Email Secondary (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailSecond" maxlength="75" name="txtEmailSecond" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<!-- Email Third (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailThird" maxlength="75" name="txtEmailThird" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span> Submit Contact Info
</button>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval");
#Scripts.Render("~/bundles/custom"); //contains the file I am trying to add $.validate.AddMethod() to
Here is the code for Contact.js
$.validator.addMethod(
"customEmail",
function (value, element) {
var re = new RegExp("/^#{0,2}\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*#{0,2}​‌‌​​$/");
return this.optional(element) || re.test(value);
},
"Please enter a valid email address."
);
$(document).ready(function () {
console.log("Were here.........");
// populateStatesDropDown();
$('#contactForm').validate({ // initialize the plugin
rules: {
txtZipCode: {
required: true,
numeric: true
},
txtEmailPrimay: {
required: true,
customEmail:true
},
txtEmailSecond:{
required:false,
customEmail:true,
},
txtEmailThird: {
required: false,
customEmail:true
}
}
});
populateStatesList();
});
function populateStatesList() {
var url = "Contact/GetStates"; // Don't hard code your url's!
//$("#province_dll").change(function () {
var $statesDropDownMenu = $("#statesDropDownMenu"); // Use $(this) so you don't traverse the DOM again
var listItems = '';
$.getJSON(url, function (response) {
$statesDropDownMenu.empty(); // remove any existing options
console.log(response);
$.each(response, function (index, item) {
console.log("Now - " + item);
listItems += "<li>" + item + "</li>";
});
$statesDropDownMenu.html(listItems);
});
//});
}

You have an extra comma.
txtEmailSecond:{
required:false,
customEmail:true, // Here
},

After submit form using post method form data appends to url in php why?

I am developing an application in which I send form data using ajax. After success function data add into the database but it does not display any messages and complete form data appends to url.
In this I am using "POST" method.
Why this data appends to form and not showing any messages to result field.
This is my html code
<form class="form-horizontal form-label-left" id="myForm" novalidate>
<span class="section">Personal Info</span>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="fname"> First Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="fname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="fname" placeholder="First Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="lname"> Last Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="lname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="lname" placeholder="Last Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="username"> Username <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="username" class="form-control col-md-7 col-xs-12" data-validate-length-range="0,25" data-validate-words="1" name="username" placeholder="Username" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Email <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12" placeholder="abc#gmail.com">
</div>
</div>
<div class="item form-group">
<label for="password" class="control-label col-md-3">Password <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Repeat Password</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telephone <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="tel" id="telephone" name="telephone" required="required" data-validate-length-range="8,20" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="status" name="status" class="form-control col-md-7 col-xs-12">
<option>Select Status</option>
<option value="ACTIVE" >Active</option>
<option value="INACTIVE">Inactive</option>
<option value="VACATION">Vacation</option>
</select>
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="role">Role</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="role" name="role" class="form-control col-md-7 col-xs-12">
<option value="ACTIVE" >Select Role Name</option>
<option value="Manager" >Manager</option>
<option value="Operator">Operator</option>
<option value="Admin">Admin</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="reset" id="reset" class="btn btn-primary">Cancel</button>
<button id="send" type="submit" class="btn btn-success">Submit</button>
</div>
</div>
<div id="result"></div>
</form>
After submit I call js file in which I am using ajax.
ajax function
function processForm( e ){
alert(e);
$.ajax({
url: 'add_user_check.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr )
{
alert(data);
var split = data.split(',');
var display = split[0];
var msg = split[1];
$('#result').html( msg );
},
error: function( jqXhr, textStatus, errorThrown ){
$('#result').html( "Connection error :"+errorThrown);
}
});
e.preventDefault();
}
$('#myForm').submit( processForm );
If data is submitted successfully it returns success message and will display to result field. But message is not display and complete data appends to the url. As shown in fig.
Why this happens? and why it does not display proper message to result field.
Thanks in advance.

In short because there is no real error. PHP is not processing your request and so goes about its normal business. The URL has the POST data stuck in there as it normally would, only it isnt being flushed out since it isnt being redirected.
This is because you haven't actually specified a method for the form.
You need to use
<form method="post" ....

use method="post" in html form .

jquery validation is not working don't know why

please help me to know what is wrong with this code !!
I searched much but it looks like I have no errors , even that it works when I try less inputs
this is the script code
$(document).ready(function(){
$("#patient-form").validate({
rules:{
pfname:{
required:true
},
plname:{
required:true
},
pemail:{
required:true,
email:true
},
ppass:{
required:true,
minLength:6
},
pcpass:{
minLength:6,
equalTo:"#ppass"
},
pcity:{
required:true
},
pbirthdate:{
required:true,
dateFormat: true
}
}
});
});
And this is the html code
I use some bootstrap classes but sure they aren't the reason for stopping the validation , I removed the input file and plname and pcity and it was working well , I don't know why it doesn't work really .
I hope somebody help me I need that because I'm working on my graduation project ,I'll be thankful really.
<form id="patient-form" method="post" action="" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pfname">First Name</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control sel" name="pfname" id="pfname" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="plname">Last Name</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="plname" id="plname" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pemail">Email</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="pemail" id="pemail" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="ppass">Password</label>
<div class="col-md-6 col-sm-9">
<input type="password" class="form-control" name="ppass" id="ppass" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pcpass">Confirm Password</label>
<div class="col-md-6 col-sm-9">
<input type="password" class="form-control" name="pcpass" id="pcpass" placeholder="Re-enter Password">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pcity">City</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="pcity" id="pcity" placeholder="Enter Your City">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pbirthdate">Birth Date</label>
<div class="col-md-6 col-sm-9 form-inline">
<input type="date" name="pbirthdate" id="pbirthdate" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-2 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<input type="submit" class="form-control" value="Sign Up">
<input type="hidden" name="sign-up-check" value="1">
</div>
</div>
</form>

minlength rule is not supposed to be spelled minLength.
....
ppass: {
required: true,
minLength: 6 // <- spelled 'minlength' wrong
},
....
Otherwise, it's working: http://jsfiddle.net/psmdogsn/