We Keep Coding

Ajax form required select and input fields

im new at this so i couldnt work this out with required fields on script.
html form
<form name="rezform" onsubmit="return validation()" id="loginForm" method="" action="" novalidate="novalidate">
javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function insertData() {
var rez_ad = $("#rez_ad").val();
var rez_saat = $("#rez_saat").val();
var rez_gsm = $("#rez_gsm").val();
var rez_tarih = $("#rez_tarih").val();
var rez_email = $("#rez_email").val();
var rez_tip = $("select#rez_tip").val();
var rez_sayi = $("select#rez_sayi").val();
var rez_aciklama = $("#rez_aciklama").val();
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "rez/insert-data.php",
data: {
rez_ad: rez_ad,
rez_saat: rez_saat,
rez_gsm: rez_gsm,
rez_email: rez_email,
rez_tarih: rez_tarih,
rez_tip: rez_tip,
rez_sayi: rez_sayi,
rez_aciklama: rez_aciklama
},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("#message").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
</script>
insert-data.php
/*
Developer: Ehtesham Mehmood
Site: PHPCodify.com
Script: Insert Data in PHP using jQuery AJAX without Page Refresh
File: Insert-Data.php
*/
include('db.php');
$rez_ad=$_POST['rez_ad'];
$rez_saat=$_POST['rez_saat'];
$rez_gsm=$_POST['rez_gsm'];
$rez_email=$_POST['rez_email'];
$rez_tarih=$_POST['rez_tarih'];
$rez_tip=$_POST['rez_tip'];
$rez_sayi=$_POST['rez_sayi'];
$rez_aciklama=$_POST['rez_aciklama'];
$stmt = $DBcon->prepare("INSERT INTO rezervasyon(rez_ad,rez_saat,rez_gsm,rez_email,rez_tarih,rez_tip,rez_sayi,rez_aciklama) VALUES(:rez_ad, :rez_saat,:rez_gsm,:rez_email,:rez_tarih,:rez_tip,:rez_sayi,:rez_aciklama)");
$stmt->bindparam(':rez_ad', $rez_ad);
$stmt->bindparam(':rez_saat', $rez_saat);
$stmt->bindparam(':rez_gsm', $rez_gsm);
$stmt->bindparam(':rez_email', $rez_email);
$stmt->bindparam(':rez_tarih', $rez_tarih);
$stmt->bindparam(':rez_tip', $rez_tip);
$stmt->bindparam(':rez_sayi', $rez_sayi);
$stmt->bindparam(':rez_aciklama', $rez_aciklama);
if($stmt->execute())
{
$res="Rezervasyonunuz tarafımıza ulaşmıştır. En yakın sürede girmiş olduğunuz GSM numaranıza dönüş yapılacaktır.";
echo json_encode($res);
}
else {
$error="Sistemsel bir hata meydana geldi lütfen bir süre sonra tekrar deneyiniz veya iletişime geçiniz.";
echo json_encode($error);
}
?>
So my problem is when i click my send button on html/php data is going mysql even if the inputs and select boxes are empty/not selected. So I have to do it required like in html input or select box. I dont know how to do it properly in javascript. I have found another script but couldnt work it same as like this one. So how can i put required field on this one and if you can explain it the logic it would be nice !
Also do we have a trick for bot protection on javascript form ?
Thanks !
And have a nice day.

You can do something like create a validation function for check whether input fields are empty or not.
function validation() {
submit = true;
var rez_ad = $("#rez_ad").val();
if ( rez_ad.trim() == "" ) {
//Do what ever you like with when empty submission.
alert('Input is empty.');
submit = false;
}
return submit;
}
Then in form on submit return this function.
<form action="" onsubmit="return validation()" method="POST">

function insertData() {
var rez_ad=$("#rez_ad").val();
var rez_saat=$("#rez_saat").val();
var rez_gsm=$("#rez_gsm").val();
var rez_tarih=$("#rez_tarih").val();
var rez_email=$("#rez_email").val();
var rez_tip=$("select#rez_tip").val();
var rez_sayi=$("select#rez_sayi").val();
var rez_aciklama=$("#rez_aciklama").val();
if(rez_ad == "" || rez_saat == "" || rez_gsm == "" || rez_tarih == "" || rez_email == "" || rez_tip == "" || rez_sayi == "" || rez_aciklama == "" ){
$("#message").html("some field is empty!!");
}else{
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "rez/insert-data.php",
data: {rez_ad:rez_ad,rez_saat:rez_saat,rez_gsm:rez_gsm,rez_email:rez_email,rez_tarih:rez_tarih,rez_tip:rez_tip,rez_sayi:rez_sayi,rez_aciklama:rez_aciklama},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("#message").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
}
<form name="rezform" onsubmit="return validation()" id="loginForm" method="POST" action="#" >

Since you are using jquery, use $('form').submit() method to return false if the validation is not success. other wise return true.
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
});
I have created a jsbin page for the reference given by jquery: https://jsbin.com/dokabod/1/edit?html,output

#alex also post the samething. I just corrected some of the errors he had. like return submit. below code working perfectly.
<form action="index.php" onsubmit="return insertData()" method="POST">
<input type="text" name="name" id="rez_ad">
<input type="text" name="name" id="rez_saat">
<input type="text" name="name" id="rez_gsm">
<input type="text" name="name" id="rez_tarih">
<input type="text" name="name" id="rez_email">
<input type="text" name="name" id="rez_tip">
<input type="text" name="name" id="rez_sayi">
<input type="text" name="name" id="rez_aciklama">
<input type="submit" name="" value="Send">
</form>
<div id="message"></div>
function insertData() {
submit = true;
var rez_ad=$("#rez_ad").val();
var rez_saat=$("#rez_saat").val();
var rez_gsm=$("#rez_gsm").val();
var rez_tarih=$("#rez_tarih").val();
var rez_email=$("#rez_email").val();
var rez_tip=$("#rez_tip").val();
var rez_sayi=$("#rez_sayi").val();
var rez_aciklama=$("#rez_aciklama").val();
if(rez_ad == "" || rez_saat == "" || rez_gsm == "" || rez_tarih == "" || rez_email == "" || rez_tip == "" || rez_sayi == "" || rez_aciklama == "" ){
$("#message").html("some field is empty!!");
submit = false;
return submit;
}else{
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "rez/insert-data.php",
data: {rez_ad:rez_ad,rez_saat:rez_saat,rez_gsm:rez_gsm,rez_email:rez_email,rez_tarih:rez_tarih,rez_tip:rez_tip,rez_sayi:rez_sayi,rez_aciklama:rez_aciklama},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("#message").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
}

Click function won't update information on page

I want my submit button to pull the value from the input box next to it, change the '#' to a '-' and then pass it on so that I can pull information respective to that user and then populate the field in HTML. But the page just refreshes and a '?' gets added to the url.
$("#usernameBtn").click(function() {
var unTouchedID = $("#userid").val();
var usrID = unTouchedID.replace("#", "-");
$.ajax({
url: "https://owapi.net/api/v3/u/" + usrID + "/stats",
dataType: 'json',
data: "",
success: function (data) {
$('#heroStats_elims').html('<h2>'+ data.us.stats.competitive.average_stats.eliminations_avg + '</h2>');
//var avgElims = //data.us.stats.competitive.average_stats.eliminations_avg
}
}); });
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Battle.net Tag" id="userid">
</div>
<button type="submit" class="btn btn-default" id="usernameBtn">Submit</button>

You need to use event.preventDefault(); as #Andrew mentioned to prevent the default behavior of submitting the page.
$("#usernameBtn").click(function(e) {
e.preventDefault();
var unTouchedID = $("#userid").val();
var usrID = unTouchedID.replace("#", "-");
$.ajax({
url: "https://owapi.net/api/v3/u/" + usrID + "/stats",
dataType: 'json',
data: "",
success: function (data) {
$('#heroStats_elims').html('<h2>'+ data.us.stats.competitive.average_stats.eliminations_avg + '</h2>');
//var avgElims = //data.us.stats.competitive.average_stats.eliminations_avg
}
});
});
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Battle.net Tag" id="userid">
</div>
<button type="submit" class="btn btn-default" id="usernameBtn">Submit</button>

Form Validation laravel

Alright , I made a form with a validation , okay , when I want to connect the validation in laravel I use this way
this is pages controller
public function getContact(){
self::$data['title'] = 'Contact us';
return view('content.contact',self::$data);
}
public function postContact(test $request){
}
}
this is the routes :
Route::get('contact','PagesController#getContact');
Route::post('contact', 'PagesController#postContact');
and this is the form
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" href="{{asset('js/class.FormValidation.js')}}"></script>
<script type="text/javascript" href="{{asset('js/landin_validation.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{asset ('js/style.css')}}"/>
</head>
<body>
<form action="" method="post" class="landing-form">
{!! csrf_field() !!}
<label>Fill your details here - </label><br/><br/>
<input placeholder="Full name:" type="text" name="name" class="field-name" />
<input placeholder="Email:" type="text" name="email" class="field-email" />
<input placeholder="Phone Number:" type="text" name="phone" class="field-phone" />
<input type="submit" name="submit" value="Send" />
Okay so , I tried a lot to connect the validation with the form , but since it's laravel so I know the requests way but I tried a lot to connect it with this validation but doesnt work ,
this is landin_validation.js
var formValidate = new FormValidation();
$(document).ready(function () {
$('form.landing-form').submit(function () {
// Collect client info from fields
var name = $.trim( $('input[type="text"].field-name').val() );
var email = $.trim( $('input[type="text"].field-email').val() );
var phone = $.trim( $('input[type="text"].field-phone').val() );
// Reset input fields error class
$('input[type="text"]').removeClass('error');
// Form validation
if (!formValidate.testName(name) ) {
$('input[type="text"].field-name').addClass('error');
$('input[type="text"].field-name').val('');
$('input[type="text"].field-name').attr('placeholder', '* Valid full name is required!');
} else if ( !formValidate.testEmail(email) ) {
$('input[type="text"].field-email').addClass('error');
$('input[type="text"].field-email').val('');
$('input[type="text"].field-email').attr('placeholder', '* Valid email is required!');
} else if ( !formValidate.testPhone(phone) ) {
$('input[type="text"].field-phone').addClass('error');
$('input[type="text"].field-phone').val('');
$('input[type="text"].field-phone').attr('placeholder', '* Valid phone is required!');
} else {
// Open ajax call to save client details + send mail to customer
$.ajax({
url: "form_handler.php",
type: "POST",
dataType: "html",
async: "false",
data: {name: name, email: email, phone: phone},
beforeSend: function () {
var messege = '<img src="ajax-loader.gif" border="0">';
messege += ' Sending... ';
$('form.landing-form label').html(messege);
},
success: function (response) {
if (response == true) {
setTimeout(function(){
$('div.form-wrapper').html('<label>Your details has been send!</label>');
}, 2000);
} else {
$('div.form-wrapper').html('<label>Something went wrong, please try again later...</label>');
}
}
});
}
// Stop form submission
return false;
});
});
And this is FormValidation.js
function FormValidation(){
this.nameReg = [
/^([a-zA-Z\s]+){2,255}$/
];
this.emailReg = [
/^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/
];
this.phoneReg = [
/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/i,
/^[0-9]{3}.[0-9]{3}.[0-9]{4}$/i,
/^\([0-9]{3}\)-[0-9]{3}-[0-9]{4}$/i,
/^[0-9]{9,10}$/i
];
this.testName = function( nameInput ){
return this.inputCheck(this.nameReg, nameInput);
};
this.testEmail = function( emailInput ){
return this.inputCheck(this.emailReg, emailInput);
};
this.testPhone = function( phoneInput ){
return this.inputCheck(this.phoneReg, phoneInput);
};
this.inputCheck = function( regArray, inputData ){
var valid = false;
$.each( regArray, function( key, val ){
if( val.test( inputData ) ){
valid = true;
}
});
return valid;
};
}
I just want to know the way to connect the form with this validation.

I think it's not good idea to validate form data with js.Аccording to me you should validate from the server-side.If you want to have good user experience you can use this javascript lib - http://t4t5.github.io/sweetalert/

my data is not saving in database using ajax

this is javacript and ajax dont know what is error i tried this without ajax its working but with ajax not working.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#User_Name").val();
var email = $("#User_Email").val();
var mobno = $("#User_Email").val();
var landlineno = $("#user_MobileNo").val();
var proprTd = $("#propertyids").val();
var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
if(name=='' || email=='' || mobno=='' || landlineno=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "SaveContactDetails.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
this is html code
dont know what is error i tried this without ajax its working but with ajax not working.
<form method="post" name="form" >
<input type="hidden" name="propertyid" id="propertyids" value="<?php echo $Propid ?>" >
<input id="individual" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Individual
<input id="Agent" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Agent
<input id="builder" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Builder <span id="ReqTypeErrorDiv12968081_left" class="span-41-ieo"></span> </li>
<li class="li-42-ieo">
<label class="label-43-ieo">Name<span class="span-37-ieo">*</span></label>
:
<input type="text" id="User_Name" name="User_Name" maxlength="30" class="input-45-ieo11">
<input type="text" class="input-276-ieo11" id="Mobileno" name="user_MobileNo" maxlength="12">
<input type="text" class="input-276-ieo11" id="userLandlineno" name="userLandlineno" maxlength="12">
</form>
and this is php file
<?php
include 'config.php';
$iam ="";
$User_Name="";
$User_Email="";
$user_MobileNo="";
$user_LandlineNo="";
$txtMessage="";
if (isset($_POST['rdoiam']))
{
$iam =$_POST['rdoiam'];
}
if (isset($_POST['User_Name']))
{
$User_Name=$_POST['User_Name'];
}
if (isset($_POST['User_Email']))
{
$User_Email=$_POST['User_Email'];
}
if (isset($_POST['user_MobileNo']))
{
$user_MobileNo=$_POST['user_MobileNo'];
}
if (isset($_POST['userLandlineno']))
{
$user_LandlineNo=$_POST['userLandlineno'];
}
if(isset($_POST['txtMessage']))
{
$txtMessage=$_POST['txtMessage'];
}
$Propid=$_POST['propertyid'];
$iam =trim($iam);
$User_Name=trim($User_Name);
$User_Email=trim($User_Email);
$user_MobileNo=trim($user_MobileNo);
$user_LandlineNo=trim($user_LandlineNo);
$txtMessage=trim($txtMessage);
$str="Call sp_SaveContactDetails('".$iam."','".$User_Name."','".$User_Email."','".$user_MobileNo."','".$user_LandlineNo."','".$txtMessage."','".$Propid."')";
// $sql=mysql_query($str);
if(!mysql_query($str))
{
die('Error:'.mysql_error());
}
else
{
}
?>

You are missing & in your data string:
var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
It has to be:
var dataString = 'User_Name='+ name + '&User_Email=' + email + '&User_Email=' + mobno + '&user_MobileNo=' + landlineno + '&propertyids=' + proprTd;
Thats why its not sending proper data, as you want. Of course, you can serialize all your data...
Also you should be using encodeURIComponent because if the user adds a & or =, your string is going to break.

var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
That is not how you build a querystring
The string looks like User_Name=nameUser_Email=email...., you are missing the & between each. Also you should be using encodeURIComponent because if the user adds a & or =, your string is going to break.
Look at jQuery serialize() it does all of it for you.

Or just use serialize function, you are using jQuery anyway.
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var formData = $( this ).serialize();
$.ajax({
type: "POST",
url: "SaveContactDetails.php",
data: formData,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
});
Before sending ajax you can always add your validation.

You can use this
<script>
$(function () {
$('form#person').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'show.php',
data: $('form').serialize(),
success: function (data) {
alert(data);
}
});
e.preventDefault();
});
});
</script>

Using ajax to send form data to php

I want to send form data from ajax to php. My ajax retrieves the form data but it doesnt send it i dont see anything wrong with the code maybe i need a much more professional help. Thanks in advance
HTML5 syntax
<div align="center"><a id="hi">Header</a></div>
<a id="signup" data-add-back-btn="true" style="float:right;" data-icon="arrow-r">Sign- In</a>
</div>
<form class="check-user" action="php/sup.php" method="POST">
<label>Username</label>
<input id="Susername" name="username" placeholder="username" type="text" >
</div>
<div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
<label>Email</label>
<input id="Semail" name="email" placeholder="email" type="email" >
</div>
<div align="center" data-role="fieldcontain" style="width:100%;overflow:hidden" data-position="static">
<label>Password</label>
<input id="Spassword" name="password" placeholder="password" type="password" >
</div>
<!---input type="submit" style="visibility:hidden;" id="send"/-->
</form>
Ajax syntax
$('#signup').live('click', function(){
//var name = document.getElementById('Susername').value;
//var email = document.getElementById('Semail').value;
//var pass = document.getElementById('Spassword').value;
var that = $('form.check-user'),
urls = that.attr('action'),
methods = that.attr('method'),
data = {};
that.find('[name]').each(function(index, element) {
var that = $(this),
name = that.attr('name'),
element = that.val();
alert(name+'='+element+' '+methods);
data[name] = element;
});
$.ajax(
{
url: urls,
type: methods,
data : data,
beforeSend: function(response){alert('Sending');},
success: function(response){ alert('success');},
error: function(response){alert('failed');},
complete: function(response){alert('finished');},
}
);
return false;
});
PHP syntax
session_start();
$name = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
if(isset($name) && isset($email) && isset($password))
{
echo $name;
$_SESSION['username'] = $name;
}
else
{
die('data not set');
}

You can use serialize method on form, it will gather everything correct.
$('#signup').live('click', function(){
var that = $('form.check-user'),
urls = that.attr('action'),
methods = that.attr('method'),
data = that.serialize();
$.ajax(
{
url: urls,
type: methods,
data : data,
beforeSend: function(response){alert('Sending');},
success: function(response){ alert('success');},
error: function(response){alert('failed');},
complete: function(response){alert('finished');},
}
);
return false;
});

Try this,
$('#signup').live('click', function(){
$.ajax({
url:’’,//url to submit
type: "post",
dataType : 'json',
data : {
'Susername' : $('#Susername').val(),
'Semail' : $('#Semail').val(),
'Spassword' : $('#Spassword').val()
},
success: function (data)
{
}
});
return false;
});

I solved it works this way on the php side you do this
$name = isset(json_decode($_POST['username']));//htmlentities($values[0]);
$email = isset(json_decode(($_POST['email'])));//htmlentities($values[1]);
$password = isset(json_decode($_POST['password']));//htmlentities($values[2]);
The Ajax side
$(document).ready(function(e) {
$('#signup').live('click', function(){
//var name = document.getElementById('Susername').value;
//var email = document.getElementById('Semail').value;
//var pass = document.getElementById('Spassword').value;
var that = $('form.check-user'),
urls = that.attr('action'),
methods = that.attr('method'),
data = {};
data = that.serialize();
console.log(data);
$.ajax(
{
url: urls,
type: methods,
dataType:'json',
data : data,
beforeSend: function(response){$.mobile.showPageLoadingMsg(true);},
success: function(response){ $.mobile.showPageLoadingMsg(false);},
error: function(xhr, textStatus, errorThrown){alert(textStatus);},
complete: function(response){},
}
);
return false;
});
});