I use multiple contact forms in modal windows. I am using Bootstrap, PHP and some JS. I cant find out why it`s not working. Please help.
My html for ONE form (I have 15 same forms):
<div class="modal-container">
<div class="modal" id="modal-24">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center">LEDENICA<sup>TM</sup><br>ШАМПИНЬОНЫ</h2>
<img src="images/line.png" alt="line" class="img-responsive heading-line">
</div>
<div class="modal-body">
<img alt="left" class="left-modal-control" src="images/chevron-left.png">
<img alt="right" class="right-modal-control" src="images/chevron-right.png">
<div class="row modal-row">
<div class="image-col col-lg-5 col-md-5 col-sm-12 col-xs-12">
<img class="img-responsive" alt="product" src="images/tm-4.png">
</div>
<div class="info-col col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-bottom">
<p>Наши грибы собираются на пике созревания и моментально замораживаются, сохраняя истинный вкус, задуманный природой. Таким образом, Вы можете круглый год наслаждаться вкусными и полезными грибами Ledenica™.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Вес продукта:</p>
<p class="desc">0,400 кг</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Срок годности:</p>
<p class="desc">24 мес</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Условия хранения:</p>
<p class="desc">До -18<sup>o</sup> С</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p class="red">Пищевая ценность в 100г</p>
</div>
<div class="info-table">
<div class="table-content-1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Энергетическая ценность</p>
</div>
<div class="table-content-2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>113 кДж/27 ккал</p>
</div>
<div class="table-content-3 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Белки</p>
</div>
<div class="table-content-4 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>4,5г</p>
</div>
<div class="table-content-5 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Углеводы</p>
</div>
<div class="table-content-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>0,1г</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p><span class="red">Состав:</span> шампиньоны</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p>Запросить прайс-лист</p>
</div>
<form id="contact-form-modal" method="post" action="contact-modal.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="modal-col-first col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group form-group-modal">
<input id="form_email" type="text" name="email" class="form-control form-control-modal" required="required" data-error="Пожалуйста, введите email." placeholder="Email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="modal-col col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="submit" class="btn btn-danger btn-send" value="ПОЛУЧИТЬ ПРАЙС">
</div>
</div>
</form>**
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/contact-modal.js"></script>
My PHP:
<?php
// configure
$from = 'myemail#gmail.com>';
$sendTo = '<myemail#gmail.com>';
$subject = 'New message from online form';
$fields = array('email' => 'email'); // array variable name => Text to appear in email
$okMessage = 'Спасибо.';
$errorMessage = 'Извините, ошибка.';
// let's do the sending
try
{
$emailText = "You have new message from online form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
mail($sendTo, $subject, $emailText, "From: " . $from);
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
My JS:
$(function () {
$('#contact-form-modal').validator();
$('#contact-form-modal').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact-modal.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form-modal').find('.messages').html(alertBox);
$('#contact-form-modal')[0].reset();
}
}
});
return false;
}
})
});
After form submit the 1 Form everything work correct. But if I submit other forms it reloads the window with result "Thank you". So, I can see only "thank you" on white. But I know that my result message must appear without reloading. How can I overwrite the JS to make all my forms correct?
Your Email is empty because your post data has email with a small "e" and in your php you search for Email with an Uppercase "E".
Second in your javascript you check in the "if", if default is prevented... but I don't get where you prevent the default. Change your javascript to
$('#contact-form-modal').on('submit', function (e) {
e.preventDefault();
and than leave out the if-statement.
Otherwise try to make some debug outputs on interessting spots in your code with var_dump in php or console.log in javascript to see what's going on in your code ;)
Related
I need to wrap all divs after each h4 tag so then i can modify the column size depending on the results.
As is:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
To be:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
</div>
What I tried:
$(" h4.hotels-area").each(function(){
$(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});
When I do this it messed up my HTML. I do not have access to the html so i need to do it this way, once i wrap then i will count how many div are into the description-wrap class, but I can't get to wrap.
I thought on wrapping because what i need is to be able to count how many col-md-6 col-sm-12 col-xs-12 padding-banner-left are after each h4 and if the result is an unpaired number the first col-md-6 col-sm-12 col-xs-12 padding-banner-left i will change the cols to col-md-12 without knowing how col-md-6 col-sm-12 col-xs-12 padding-banner-left i have after each h4 i won't be able to achive my goal
You could add a div.description-wrap after each h4 tag inside .bannerPrincipales (with the jQuery.after function).
Then, you could cycle each div inside .bannerPrincipales, and say:
if it has description-wrap class, then it will be the wrapper;
else append it inside wrapper (with the jQuery.append function).
And, finally, you could count the number of divs inside wrapper with the length property.
$(function () {
$('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
let wrapper = null;
$('.bannerPrincipales div').each((i, div) => {
if ($(div).hasClass('description-wrap')) {
wrapper = div;
} else {
$(wrapper).append(div);
}
});
$('.bannerPrincipales .description-wrap').each((i, wrapper) => {
let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
let n = $(wrapper).find('div').length;
console.log(place + ' has ' + n + ' divs');
});
});
.description-wrap {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<button >add</button>
<button >negative</button>
<?php form_submit('name',value); ?>
//so all button which are comes in between from open and form close linked with form_open
<?php form_close(); ?>
//so all button which are comes in between from open and form close linked with form_open
Please check the below code and it works perfect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple CodeIgniter App - Todos</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<a href="Home/new">
<?php echo form_button('add','add'); ?>
<!-- <button type>add</button> -->
</a>
<a href="Home/new">
<?php echo form_button('negative','negative'); ?>
<!-- <button type>negative</button> -->
</a>
<?php echo form_submit('name','btn_name'); ?>//so all button which are comes in between from open and form close linked with form_open
<?php echo form_close(); ?>
</body>
</html>
If you do not want that HTML BUTTON act like Submit, you need to add the tag type="button".
<form>
<button>This button submit</button>
<button type="button">This button DO NOT submit</button>
<!-- Default attribute type value is "submit" -->
</form>
i figure it out why that is happening...
that is happening because of button tag which is in between the form_open tag and form_close tag as i change button tag to div than it is working perfectly....
so there is the conclusion when you submit the form never use any kind of button tag use only div tag ,span tag etc.
This question already has answers here:
Get the value in an input text box
(13 answers)
Closed 5 years ago.
im a beginner on Javascript , i have 3 button ADD TO CART each one has a value , so when i click on one of them , i keep getting the value of first button
this is my HTML CODE
<div class="container main-section">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 product">
<div class="row product-part">
<div class="col-md-12 col-sm-12 colxs-12 img-section">
<img src="'. $photolink["photo"] .'">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-title">
<h1>'. $row["produit"] .'</h1>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-description">
<p>'. $row["description"] .' </p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 product-cart">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-6">
<p>'. $row["price"] .' $</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-6 text-right product-add-cart">
<input type="submit" value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID()" >
</div>
</div>
</div>
</div>
</div>
this is my javascript code
function getID()
{
var val = document.getElementById('productid').getAttribute('data-value');
console.log(val);
}
You must select an element specificly. Using pure JQuery:
function getID(that) {
console.log($(that).attr("data-value"));
}
Then on your HTML:
<input type="submit" value="ADD TO CART" class="btn btn-success" id="productid" data-value="'. $row["id"] .'" onclick="getID(this)">
Let me start by saying I'm a total beginner at JavaScript/jQuery. I've just started learning it because I want to use some JavaScript features for my website.
What I want to achieve is the following when you click on the edit button:
Before:
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
' . $item['productnaam'] . '</h4>
<p class="group inner beschrijving list-group-item-text">
' . $item['productbeschrijving'] . ' <br> Allergieen: '. $item ['allergieen'].'</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
€ ' . $item['productprijs'] . ' </p>
</div>
<div class="col-xs-6 col-md-6" >
'.$status.'
</div>
<div class="col-xs-6 col-md-6">
<input type="button" href="#" name="'.$item['productnaam'].'" value = "Voeg toe"></a>
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
After:
<body>
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '
<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<input type ="text" value="' . $item['productplaatje'] . '">
<div class="caption">
<h4 class="group inner list-group-item-heading">
<input type ="text" value = "' . $item['productnaam'] . '">
</h4>
<p class="group inner beschrijving list-group-item-text">
<input type ="text" value="'. $item['productbeschrijving'] . '">
</p>
<p>
<input type ="text" value = "Allergieen: '. $item ['allergieen'].'">
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
<input type = "text" value="€' . $item['productprijs'] . ' "
</p>
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</body>
I've looked at different scripts on how to replace divs with input, but every time it just doesn't work when I test it myself or it isn't exactly what I wanted.
Edit: will add code in a few min
You can just change the divs contentEditable="true" , then style them they they look like inputs. Then remove contentEditable altogether to accept changes.
HTML
<a style="float:left" data-toggle="modal" data-target="#memberInfo" href="<?php echo $row['id']; ?>" class="table-link clsMemberInfo view"></a>
<!-- Member info Modal -->
<div class="modal fade" role="dialog" id="memberInfo">
</div>
AJAX
$('.view').click(function(e){
e.preventDefault();
var view_id = $(this).attr("href");
datastring = 'memberId='+view_id;
$.ajax({
url: "memberinfo.php",
data: datastring,
type:"POST",
text:"json"
}).done(function(info) {
// console.log(info);
$('#memberInfo').html(info);
});
console.log(view_id);
});
PHP
$sql = "SELECT d.expiry, (SELECT u.expiry from upgrade as u where u.customerId='$memberId' AND d.customerId=u.customerId AND u.cmpId = '$companyId' order by expiry DESC limit 1) as uexp
from details as d where d.customerId ='$memberId' AND d.cmpId = '$companyId' order by expiry DESC limit 1";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
if($row['uexp']>$row['expiry']){
$s = "SELECT d.*, c.*, (SELECT time from freeze where customerFreezeid='$memberId' AND c.cmpId = '$companyId' order by expiry DESC limit 1) as ftime
from upgrade as d, customer as c
where d.customerId = c.id AND c.id='$memberId' AND c.cmpId = '$companyId' order by expiry DESC";
$result = mysqli_query($conn, $s);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
} else {
$s = "SELECT d.*, c.*,
(SELECT time from freeze where customerFreezeid='$memberId' AND c.cmpId = '$companyId' order by expiry DESC limit 1) as ftime
from details as d, customer as c
where d.customerId = c.id AND c.id='$memberId' AND c.cmpId = '$companyId' order by expiry DESC";
$result = mysqli_query($conn, $s);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
}
$expfz = $row['expiry'];
$explode = explode(" ", $expfz);
$expfz1 = $explode[0];
$expfz2 = $explode[1];
echo '
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="example">
<div id="invoice" style="display:none" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"><b>Tax Invoice</b>
</div>
<div id="company" style="display:none" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">'.$companyName.'<br>'.$companyAddress.'
<hr>
</div>
<div class="modal-body text-center">
<b>Name : </b>'.$row['customerName'].'<span id="btnPrint" style="cursor:pointer; float:right" class="glyphicon glyphicon-print"> </span><span id="cmd" style="cursor:pointer; float:right" class="glyphicon glyphicon-download-alt">| </span><br>
<b>Email : </b>'.$row['email'].'<br>
<b>Mobile : </b>'.$row['mobile'].'.<br>
<b>Address : </b>'.$row['address'].'<br>
<b>Emergency Name :</b>'.$row['nameEmg'].'<br>
<b>Emergency Mobile : </b>'.$row['mobileEmg'].'<br>
<hr></hr>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<span><b>Date of joining : </b>'.$row['joining'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<span><b>Period : </b>'.$row['period'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<span><b>Date of expiry : </b>'.$expfz1.'</span>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<hr></hr>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<span><b>Amount Paid : </b>'.$row['paid'].'</span>
</div>
';
if($row['due']==0 || empty($row['due'])) {
echo '
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<span><b>Amount Due : </b>'.$row['due'].'</span>
</div>
'; } else {
echo '<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<span><b>Amount Due : </b>'.$row['due'].' on '.$row['duedate'].'</span>
</div>
';
}
if($row['payment']=="Cheque"){
echo '
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Paid By: </b>'.$row['payment'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Bank Name : </b>'.$row['bank'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Cheque Number: </b>'.$row['cqn'].'</span>
</div>
';
} if($row['payment']=="Credit Card"){
echo '
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Paid By: </b>'.$row['payment'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Bank Name : </b>'.$row['bank'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Credit Card Name: </b>'.$row['ccn'].'</span>
</div>
';
} if($row['payment']=="Debit Card"){
echo '
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<br>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Paid By: </b>'.$row['payment'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Bank Name : </b>'.$row['bank'].'</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
<span><b>Debit Card Name: </b>'.$row['dcn'].'</span>
</div>
';
}
echo '
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<hr></hr>
</div>
<span class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/gym.png" width="50px" height="50px">
<b>Gym : </b>'.$row['gym'].'</span>
<span class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/ca.png" width="50px" height="50px">
<b>Cardio : </b>'.$row['cardio'].'</span>
<span class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/s.png" width="50px" height="50px">
<b>Steam : </b>'.$row['steam'].'</span>
<span class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="images/sauna.png" width="50px" height="50px">
<b>Sauna : </b>'.$row['sauna'].'</span>
<span class="col-lg-3 col-xs-3">
<img src="images/steam.png" width="50px" height="50px">
<b>Spa : </b>'.$row['spa'].'</span>
<span class="col-lg-3 col-xs-3">
<img src="images/diet.png" width="50px" height="50px">
<b>Diet : </b>'.$row['diet'].'</span>
<img src="images/train.png" width="50px" height="50px">
<span><b>Trainer : </b>'.$row['trainer'].'</span><br>
</div>
<div id="rules" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:none">
<hr>
<h6 class="text-center">Rules and Regulations</h6>
<ul style="font-size:10px">
<li>We reserve the right to admission.</li>
<li>Membership fees are non-refundable.</li>
<li>The rates for the facility may be changed at the sole discretion of Management without prior notice.</li>
<li>The management is not responsible for any loss or theft of members belongings.</li>
<li>We advice members not responsible not to carry valuables to the gym.</li>
<li>Smoking, chewing of Beetle Leafis strictly prohibited in the gym premises.</li>
<li>Courteous member conduct is very important in order to provide everyone with a pleasant workout experience. Poor conduct includes, but is not limited to : use of profanity, bad mouthing others and fighting. If a member is found treating anyone disrespectfully, their membership will be terminated without refund and that member waives their right to recourse.</li>
<li>Sports wear is compulsory in the gym.</li>
<li>Members must carry a separate pair of training shoes to be changed into the gym premises to help maintain hygiene.</li>
<li>The Management will maintain a notice board for intimidating the members of any future changes.</li>
<li>The Management expects the members to read it on regular basis. We assume the members read the notice.</li>
<li>We request members to use a deodorant spray.</li>
<li>Taxes are applicable.</li>
</ul>
<hr>
</div>
<div id="signature" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:none;">Authorised Signature <input type="text"> <span style="float:right">Customer Signature <input type="text"></span></div>
</div>
<div class="modal-footer">
<span class="col-lg-3 col-xs-12 col-sm-12 text-center">
FREEZE ACCOUNT
</span>
<span class="col-lg-3 col-xs-12 col-sm-12 text-center">
PREVIEW HISTORY
</span>
<span class="col-lg-3 col-xs-12 col-sm-12 text-center">
RENEW/UPGRADE
</span>
<span class="col-lg-3 col-xs-12 col-sm-12 text-center">
ACCOUNT TRANSFER
</span>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<p></p>
</div>
</div>
</div>
</div>
</div>';
}
I know there are questions related to this but i tried almost everything and nothings working yet
When i click on the a tag it targets a modal the info on the Modal is Displayed by AJAX and data interchanged by JSON
But when i want to open the modal once again the modal backdrop gets darker and darker.