Posted By
Bajarangi soft ,
Posted On 11-01-2021
Lets start
Step 1:Create index.php file in xampp\htdocs\array\ folder and implement below html code in it.
<!doctype html>
<html lang="en">
<head>
<title>How To Save Data Without Form Using Jquery And PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="text-center">
<br> <br> <br> <br> <br> <br>
<h4>
How To Save Data Without Form Using Jquery And PHP
</h4>
</div>
</div>
<main class="py-4" style="margin-top: 80px">
<div class="flex-center position-ref full-height">
<div class="container">
<div class="row justify-content-center" id="main">
<div class="col-md-6">
<div class="form-group row">
<label for="name" class="col-md-4 parrot_label col-form-label text-md-right">
Name</label>
<div class="col-md-6">
<input id="bname" type="text" class="form-control " name="bname"
value=""
required=""
autocomplete="name" autofocus>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 parrot_label col-form-label text-md-right">
Phone
Number</label>
<div class="col-md-6">
<input id="phone_no" type="text" class="form-control"
data-mask="(999) 999-9999" name="phone_no"
autocomplete="new-password">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 parrot_label col-form-label text-md-right">
Email</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control " name="bemail" value=""
required=""
autocomplete="email" autofocus>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button class="btn btn-success" id="submit">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codeseven.github.io/toastr/build/toastr.min.js"></script>
<link href="http://codeseven.github.io/toastr/build/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#submit").click(function () {
var name = $('#bname').val();
var phone_no = $('#phone_no').val();
var email = $('#email').val();
if (name == '' || email == '' || phone_no == '') {
toastr.error('All fields required!');
return false;
}
var number = phone_no.replace(/[^\d]/g, '');
if (number.length <=0 || number.length > 10) {
// alert('Enter Vlaid phone number');
toastr.error('Please Enter valiad Phone number!');
console.log(phone_no.length);
return false;
}
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
toastr.error('Please Enter Valid Email!');
return false;
}
toastr.success('Successfully Registered!',name);
$.ajax({
url: 'yoururl',
type: "post",
data: {
"bname": name,
"phone_no": number,
"bemail": email,
},
success: function (data) {
console.log(data);
toastr.success('Successfully Registered!');
}
});
});
});
</script>
<?php
if(isset($_POST['name'])){
echo $_POST['name'];
}
?>