Develop Reference

Can someone help me to display my filter search correctly and also i'm unable to find my error?

//this is my productContent1.php file,i want to display product filter search options to allow users to search product with filter.I included class Product.php and then call methods to display filter options values from MySQL database table vehicle
<div class="products">
<?php
include 'class/Product.php';
$product = new Product();
?>
<div class="container">
<div class="row">
<form class="form-inline" action=action.php" method="POST">
<label>Type:</label>
<select name="Type" id="type" required>
<?php
$type = $product->gettype();
foreach($Type as $typeDetails){
?>
<optgroup label="Type" value="<?php echo $typeDetails["type"]; ?>" > <?php echo $typeDetails["type"]; ?>
<option value="">-- All --</option>
<option value="">-- Motorcycles --</option>
<option value="">-- Mini-Trucks --</option>
<option value="">-- Vans --</option>
<option value="">-- Cars --</option>
</select>
<?php
}
?>
<label>Make:</label>
<select name="Make" id="make" required>
<?php
$make = $product->getmake();
foreach($Make as $makeDetails){
?>
<optgroup label="Make" value="<?php echo $makeDetails["make"]; ?>" > <?php echo $makeDetails["make"]; ?>
<option value="">-- All --</option>
<option value="">-- Suzuki --</option>
<option value="">-- Honda --</option>
<option value="">-- Yamaha --</option>
<option value="">-- Toyota --</option>
<option value="">-- Nissan --</option>
<option value="">-- Mitsubishi --</option>
<option value="">-- Mazda --</option>
</select>
<?php
}
?>
<label>Price:</label>
<select name="Price" id="price" required>
<?php
$price = $product->getprice();
foreach($price as $priceDetails){
?>
<optgroup label="Price" value="<?php echo $priceDetails["price"]; ?>" > <?php echo $priceDetails["price"]; ?>
<option value="">-- All --</option>
<option value="">-- 0-10000 --</option>
<option value="">-- 10000-50000 --</option>
<option value="">-- 50000-500000 --</option>
<option value="">-- >500000 --</option>
</select>
<?php
}
?>
<label> Size:</label>
<select name="Size" id="size" required>
<?php
$size = $product->getsize();
foreach($size as $sizeDetails){
?>
<optgroup label="Size" value="<?php echo $sizeDetails["size"]; ?>" > <?php echo $sizeDetails["size"]; ?>
<option value="">-- All --</option>
<option value="">-- Small --</option>
<option value="">-- Medium --</option>
<option value="">-- Large --</option>
</select>
<?php
}
?>
<label> Color:</label>
<select name="Color" id="color" required>
<?php
$color = $product->getcolor();
foreach($color as $ColorDetails){
?>
<optgroup label="Color" value="<?php echo $colorDetails["color"]; ?>" > <?php echo $colorDetails["color"]; ?>
<option value="">-- All --</option>
<option value="">-- Red --</option>
<option value="">-- Blue --</option>
<option value="">-- White --</option>
<option value="">-- Black --</option>
<option value="">-- Grey --</option>
<option value="">-- Silver --</option>
<option value="">-- Orange --</option>
</select>
<?php
}
?>
<button type="submit" class="filled-button btn-block">Search</button>
</form>
<div class="col md-6">
<div class="row">
<div class="col-md-3">
<div class="product-item">
<img src="images/Toyota allion.jpg" alt="Toyota Allion">
<div class="card-footer">
<div class="card-title"><h3>Toyota Allion</h3></div>
<div class="card-price"><h3>Rs 850 000</h3></div>
<p class="card-text"><small class="text-muted">Available in white only</small></p>
<small>
<strong title="Author"><i class="fa fa-dashboard"></i>53 000km</strong>
<strong title="Author"><i class="fa fa-cube"></i>1600cc</strong>
<strong title="Views"><i class="fa fa-cog"></i>Automatic</strong>
</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product-item">
<img src="images/Toyota axio.jpg" alt="Toyota Axio">
<div class="card-footer">
<div class="card-title"><h3>Toyota Axio</h3></div>
<div class="card-price"><h3>Rs 750 000</h3></div>
<p class="card-text"><small class="text-muted">Available in white only</small></p>
<small>
<strong title="Author"><i class="fa fa-dashboard"></i>25 453km</strong>
<strong title="Author"><i class="fa fa-cube"></i>1500cc</strong>
<strong title="Views"><i class="fa fa-cog"></i>Automatic</strong>
</small>
</div>
</div>
</div>
<div class="col-md-12">
<ul class="pages">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li></li>
</ul>
</div>
</div>
</div>
//in action.phpI included class Product.php and call method $product->searchProducts() to get search result HTML and passed as JSON response using json_encode.
<?php
include 'class/Product.php';
$product = new Product();
if(isset($_POST["action"])){
$html = $product->searchProducts($_POST);
$data = array(
"html" => $html,
);
echo json_encode($data);
}
?>
//Product.php to define method searchProducts(), to get product filter search data from MySQL database table.I created SELECT query with filter search options and get data. Then create result HTML with result data and return as complete search result HTML.
<?php
function searchProducts(){
$sqlQuery = "SELECT * FROM ".$this->productTable;
if(isset($_POST["type"])) {
$typeFilterData = implode("','", $_POST["type"]);
$sqlQuery .= "
AND type IN('".$typeFilterData."')";
}
if(isset($_POST["make"])){
$makeFilterData = implode("','", $_POST["make"]);
$sqlQuery .= "
AND make IN('".$makeFilterData."')";
}
if(isset($_POST["price"])) {
$priceFilterData = implode("','", $_POST["price"]);
$sqlQuery .= "
AND price IN('".$priceFilterData."')";
}
if(isset($_POST["size"])) {
$sizeFilterData = implode("','", $_POST["size"]);
$sqlQuery .= "
AND size IN('".$sizeFilterData."')";
}
if(isset($_POST["color"])) {
$colorFilterData = implode("','", $_POST["color"]);
$sqlQuery .= "
AND color IN('".$colorFilterData."')";
}
$sqlQuery .= " ORDER By price";
$result = mysqli_query($this->dbConnect, $sqlQuery);
$totalResult = mysqli_num_rows($result);
$searchResultHTML = '';
if($totalResult > 0) {
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$searchResultHTML .= '';
}
}
else {
$searchResultHTML = '<h3>No product found.</h3>';
}
return $searchResultHTML;
}
?>
//search.js to define a function filterSearch() to make Ajax request according to filter search option display search result. The Ajax request made to action.php to load search data from MySQL database table as JSON response.
function filterSearch() {
$('.searchResult').html('<div id="loading">Loading .....</div>');
var action = 'fetch_data';
var type = getFilterData('type');
var make = getFilterData('make');
var price = getFilterData('price');
var size = getFilterData('size');
var color = getFilterData('color');
$.ajax({
url:"action.php",
method:"POST",
dataType: "json",
data:{action:action, type:type, make:make, price:price, size:size, color:color},
success:function(data){
$('.searchResult').html(data.html);
}
});
}

jQuery set and trigger option value based on the input

i am using https://www.geodata.solutions/ for getting country,state,city list
And everything is working fine and i am able to save the data to databse
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
Now i have to show the user to selected option
if $country , $state, $city are the details i fetched from the data base
so i change the html to following
<select name="country" class="countries" id="countryId">
<?php if($country!==""){?>
<option value="<?php echo $country; ?>" selected><?php echo $country; ?></option>
<?php } else { ?>
<option value="">Select Country</option>
<?php } ?>
</select>
<select name="state" class="states" id="stateId">
<?php if($state!==""){?>
<option value="<?php echo $state; ?>" selected><?php echo $state; ?>
</option>
<?php } else { ?>
<option value="">Select State</option>
<?php } ?>
</select>
<select name="city" class="cities" id="cityId">
<?php if($city!==""){?>
<option value="<?php echo $city; ?>" selected><?php echo $city; ?>
</option>
<?php } else { ?>
<option value="">Select City</option>
<?php } ?>
</select>
But Now the this is they are not ablue to change the dropdown . How can i solve this
i tried this also
<script>
jQuery(function($){
<?php if($country!==""){?>
var mySelect=$("#countryId");
mySelect.append(
$('<option value="<?php echo $country;?>" selected><?php echo
$country;?></option>'));
$('#countryId').trigger('change');
<?php } ?>
});
</script>
2) Question
I am checking for something that can integrate the country flag with the phone number field and i found https://intl-tel-input.com/. But now i have to select the country phone code automatically as per user change the country dropdown list in the fist select box . If there is any way we can make these each related ?

Get data from Select box

I have a select box in html and Ajax which calls a php page that returns the values of the selected option.
The problem is that when I want to send data to another php page the selection that I got from the ajax call does not get sent.
Index code:
<!DOCTYPE html>
<html>
<head>
<title>Booking - Online Belt</title>
</head>
<body>
<center><h3>Book Your Private Transfer</h3>
<form action="./elabora.php" method="POST" id="formregservizio">
<p>DATA
<input type="date" name="data"/>
HOURS <select name="ore">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="vuoto"></option>
</select>
Minuti:<select name="minuti">
<option value="00" selected>00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
Passeggeri:<select name="pax">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
Large Bag<select name="large_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Small Bag<select name="small_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></p>
<!-- SEZIONE FROM -->
<p>FROM <select name="FROM" id="from">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_FROM -->
<select name ="subfrom" id="subfrom">
<option value="vuoto">Select...</option>
</select>
</p>
<!-- SEZIONE TO -->
<p>FROM
<select name="to" id="to">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_TO -->
<select name="subto" id="subto">
<option value="vuoto">Select...</option>
</select>
</p>
<input type="submit" name="submit" value="NEXT">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#from').on('change',function(){
var scelta = $(this).val();
if(scelta){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'scelta='+scelta,
success:function(html){
$('#subfrom').html(html);
}
});
}else{
$('#subfrom').html("<option>Errore</option>");
}
});
});
$(document).ready(function(){
$('#to').on('change',function(){
var sceltadestinazione = $(this).val();
var sceltadopo = $('#subfrom').val();
if(sceltadestinazione){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'sceltadestinazione='+sceltadestinazione,
success:function(html){
$('#subTO').html(html);
}
});
}else{
$('#subto').html("<option>Errore</option>");
}
});
});
</script>
</center>
</body>
</html>
Then the PHP page that is called by the Ajax Request:
update_status.php
<?php
include('./includedb.php');
$area = $_POST['scelta'];
if($area == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$area'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
$areadestinazione = $_POST['sceltadestinazione'];
$sceltadopo = $_POST['sceltadopo'];
if($areadestinazione == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$areadestinazione'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
?>
And now from Index.php I want to send the data to another page in php called Elabora.php that should display all data sent.
Elabora.php
<center>
<h3>Configure Service</h3>
Dati Inseriti:<br>
Date: <?php echo $_POST['data']; ?>
Hours: <?php echo $_POST['ore']; ?>
Minutes: <?php echo $_POST['minuti']; ?>
Px: <?php echo $_POST['pax']; ?>
Large Bags: <?php echo $_POST['large_bag']; ?>
Small Bags: <?php echo $_POST['small_bag']; ?><br>
From: <?php echo $_POST['from'] . $_POST['subfrom'];?><br>
To: <?php echo $_POST['to'] . $_POST['subto'];?><br>
</center>
Now the problem is that the select boxes with the IDs: From and To are not sent to the elabora.php page.

Your Select need a name-attribute, if you want to get it through POST.
<select id="subTO">
<option value="vuoto">Select...</option>
</select>
should be:
<select id="subTO" name="subTo">
<option value="vuoto">Select...</option>
</select>
I also noticed:
<select name=TO id=to>
You're missing the "" here.

Filter data $this->db->like or $this->db->or_like not working with kecamatan dropdown menu

I was stuck in my feature for my web application, I have 4 menu filters for filtering data, fungsi_bangunan, jenis_bangunan is perfectly working, and desa/kelurahan is good to because I'm using javascript in json for populated that data when I select kecamatan and then select desa/kelurahan is working to, but when I use kecamatan filter data does not showing, the query builder I think is correctly but I cannot find the something wrong about this my problem, so maybe you guys can help me, what the solution, I use php and codeigniter framework for my project,
here the model code:
public function filter_data($filter) {
$this->db->like('jenis_kegiatan',$filter);
$this->db->or_like('fungsi_bangunan',$filter);
$this->db->or_like('kecamatan',$filter);
$this->db->or_like('desa_kel',$filter);
$query = $this->db->get('permo_pdrt');
return $query->result();
}
and controller :
public function filterkeyword() {
$filter = $this->input->post('filter');
$data['results'] = $this->model->filter_data($filter);
$this->load->view('result_view',$data);
}
and this view filter :
<div class="row">
<form action="<?php echo base_url();?>pdrtcrud/filterkeyword" method="post">
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_kecamatan" name="filter">
<option selected="selected" disabled="disabled" value="">Pilih Kecamatan</option>
<option value="Babakan Madang">Babakan Madang</option>
<option value="Bojonggede">Bojonggede</option>
<option value="Caringin">Caringin</option>
<option value="Cariu">Cariu</option>
<option value="Ciampea">Ciampea</option>
<option value="Ciawi">Ciawi</option>
<option value="Cibinong">Cibinong</option>
<option value="Cibungbulang">Cibungbulang</option>
<option value="Cigombong">Cigombong</option>
<option value="Cigudeg">Cigudeg</option>
<option value="Cijeruk">Cijeruk</option>
<option value="Cileungsi">Cileungsi</option>
<option value="Ciomas">Ciomas</option>
<option value="Cisarua">Cisarua</option>
<option value="Ciseeng">Ciseeng</option>
<option value="Citereup">Citereup</option>
<option value="Dramaga">Dramaga</option>
<option value="Gunung Putri">Gunung Putri</option>
<option value="Gunung Sindur">Gunung Sindur</option>
<option value="Jasinga">Jasinga</option>
<option value="Jonggol">Jonggol</option>
<option value="Kemang">Kemang</option>
<option value="Klapanunggal">Klapanunggal</option>
<option value="Leuwiliang">Leuwiliang</option>
<option value="Leuwisadeng">Leuwisadeng</option>
<option value="Megamendung">Megamendung</option>
<option value="Nanggung">Nanggung</option>
<option value="Pamijahan">Pamijahan</option>
<option value="Parung">Parung</option>
<option value="Parung Panjang">Parung Panjang</option>
<option value="Ranca Bungur">Ranca Bungur</option>
<option value="Rumpin">Rumpin</option>
<option value="Sukajaya">Sukajaya</option>
<option value="Sukamakmur">Sukamakmur</option>
<option value="Sukaraja">Sukaraja</option>
<option value="Tajur halang">Tajur halang</option>
<option value="Tamansari">Tamansari</option>
<option value="Tanjungsari">Tanjungsari</option>
<option value="Tenjo">Tenjo</option>
<option value="Tenjolaya">Tenjolaya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_desa_kel" name="filter">
<option>Pilih Desa/Kelurahan</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Jenis Kegiatan</option>
<option value="Rumah Tinggal">Rumah Tinggal</option>
<option value="Apartemen">Apartemen</option>
<option value="Hotel">Hotel</option>
<option value="Kantor Swasta">Kantor Swasta</option>
<option value="Kantor Pemerintah">Kantor Pemerintah</option>
<option value="Gedung Badan Usaha Pemerintah">Gedung Badan Usaha Pemerintah</option>
<option value="Rumah Kantor">Rumah Kantor</option>
<option value="Bank">Bank</option>
<option value="Toko">Toko</option>
<option value="Rumah Toko">Rumah Toko</option>
<option value="Rumah Makan">Rumah Makan</option>
<option value="Restoran">Restoran</option>
<option value="Warung">Warung</option>
<option value="Kios">Kios</option>
<option value="Pasar Tradisional">Pasar Tradisional</option>
<option value="Minimarket">Minimarket</option>
<option value="SuperMarket">SuperMarket</option>
<option value="Fasilitas Rekreasi">Fasilitas Rekreasi</option>
<option value="SPBU">SPBU</option>
<option value="SPBG">SPBG</option>
<option value="Bengkel">Bengkel</option>
<option value="Showroom">Showroom</option>
<option value="Pool Kendaraan">Pool Kendaraan</option>
<option value="Gedung Parkir">Gedung Parkir</option>
<option value="Gudang">Gudang</option>
<option value="Instalasi Pengolahan">Instalasi Pengolahan</option>
<option value="Instalasi Jaringan Listrik">Instalasi Jaringan Listrik</option>
<option value="Instalasi Telekomunikasi">Instalasi Telekomunikasi</option>
<option value="Instalasi Jaringan Gas">Instalasi Jaringan Gas</option>
<option value="Sarana Pendidikan">Sarana Pendidikan</option>
<option value="Sarana Ibadah">Sarana Ibadah</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Rumah Sakit">Rumah Sakit</option>
<option value="Klinik">Klinik</option>
<option value="Balai Pengobatan Lainnya">Balai Pengobatan Lainnya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Fungsi Bangunan</option>
<option value="Hunian">Hunian</option>
<option value="Usaha">Usaha</option>
<option value="Keagmaan">Keagamaan</option>
<option value="Sosial Budaya">Sosial Budaya</option>
<option value="Campuran">Campuran</option>
</select>
</div>
<div class="col-md-1">
<input class="btn btn-success" type="submit" name="btnsubmit" value="filter">
</div>
</form>

When adding name in input field of form and click on submit ajax reloads form

I am opening a form in magento admin popup when i add name to form fields and click on save. form reloads and ajax post get failed without any error.
This is my html code
<form enctype="multipart/form-data">
<table cellspacing="0" id="" class="form-list">
<tbody><tr>
<td class="label"><label for="authnetcim_cc_type">Credit Card Type <span class="required">*</span></label></td>
<td class="value">
<select id="<?php echo $_code ?>_cc_type" class="<?php echo $require.$_code; ?>_require" name="karan">
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="AE">American Express</option>
<option value="DI">Discover</option>
<option value="JCB">JCB</option>
<option value="MC">Mastercard</option>
<option value="VI">Visa</option>
</select>
</td>
</tr>
<tr>
<td class="label"><label for="authnetcim_cc_number">Credit Card Number <span class="required">*</span></label></td>
<td class="value">
<input type="text" id="<?php echo $_code ?>_cc_number" title="<?php echo $this->__('Credit Card Number') ?>" class="input-text <?php echo $require.$_code; ?>_require validate-cc-number" autocomplete="off" value="" />
</td>
</tr>
<tr>
<td class="label"><label for="authnetcim_expiration">Expiration Date <span class="required">*</span></label></td>
<td class="value">
<select id="<?php echo $_code ?>_expiration" class="month <?php echo $require.$_code; ?>_require">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="<?php echo $_code ?>_expiration_yr" class="year <?php echo $require.$_code; ?>_require">
<option value="">Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class="buttons-set">
<button class="button submit-addccbtn" id="addccbtn" title="Submit"><span><span>Submit</span></span></button>
</div>
</form>
This is my js code..
<script type="text/javascript">
//<![CDATA[
var id = '<?php echo $recordId ?>';
var url = '<?php echo $saveUrl ?>';
function closePopup() {
Windows.close('browser_window');
}
document.getElementById("addccbtn").onclick = function() {saveccard()};
function saveccard() {
var dataString ='id='+id;
new Ajax.Request(url, {
method: 'POST',
parameters: dataString,
onSuccess: function(response) {
var json = response.responseText.evalJSON(true);
if(json.success){
window.parent.closePopup();
}
},
onFailure: function(response) {
//location.reload();
}
});
}
//]]>
</script>
and this is my ajax request failure image.
and if i remove name from the field ajax request working fine.
Please help
i tried it with jquery and its working but i want to implement it with plain js

add attribute to your addccbtn button type="button" . Because if you do not specify type attribute , default it will act like submit button.
And other way to prevent form submit and reloading of page is to use event.preventDefault function.
document.getElementById("addccbtn").addEventListener("click", function(event){
event.preventDefault();
// your savecard() code here
})