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.
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>
I am trying to make the data that this function generates appear in my CSV file. However, when it creates the CSV file there is no data and it's a blank csv document. Any suggestions?
const fs = require('fs');
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector("div.product_desc_txt > div.body-copy.custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Format them as a csv line
return `${productId};${productPrice}`;
});
// Join all lines into one file
return csvLines.join("\n");
});
fs.writeFileSync("test.csv", csv);
});
This is the code from the source, it basically repeats itself over and over with different item numbers and prices. I just need the item number and price. looped over.
<div class="list-tbl">
<div class="row" data-body-header>
<div class="col-xs-12">
<div class="split-line split-line-header-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2 body-copy">
<div class="style-check">
<input type="checkbox" id = "selectall" name="selectall" value="279114616" class="selectall">
<label for="selectall">
<span>All</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4 body-copy"></div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-xs-6 body-copy">
<span class="hidden visible-lg visible-xl">Item</span>
</div>
<div class="col-xl-2 col-lg-2 text-right body-copy hidden visible-xl">
Price
</div>
<div class="col-xl-1 body-copy hidden visible-xl"></div>
<div class="col-xl-1 col-lg-1 col-md-2 body-copy hidden visible-xl visible-lg">
Quantity
</div>
<div class="col-xl-3 col-lg-4 col-md-4 body-copy hidden visible-xl visible-lg visible-md"></div>
</div>
</div>
</div>
</div>
<input type="hidden" id="isBDAppVar" value="BD" />
<input type="hidden" class="orderItem-2000423036" value="237459854"/>
<div class="row item-row" id = "2000423036" data-body-row>
<div class="col-xs-12">
<div class="split-line split-line-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="style-check marg_chk">
<input type="checkbox" class="checkbox" name="select" id ="select_0" value="0">
<label for="select_0">
<span class="hide">
Select
Item
</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4">
<div class="product-img-holder">
<img class="img-responsive prod-image-coming-soon" title="Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct"
src="https://images.costcobusinessdelivery.com/ImageDelivery/imageService?profileId=12028466&imageId=1055688__1&recipeName=350"
onerror="this.onerror='';this.src='/wcsstore/CostcoGLOBALSAS/images/prod-image-coming-soon.svg';this.alt='Product Image Coming Soon'"
alt="Shoping List Product Image" />
</div>
</div>
<!-- price + linkfee based on region -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html " class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs visible-lg">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
I am developing a web page which has multiple drop down menu. Now i need to display some text area according to the options selected in the drop down. If it is a normal drop down i can do that easily. But here the problem is need to display multiple text areas on multiple selection of that drop down.
Here is my code
<div class="row form-group">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
<spring:message text="Nature of Type" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<select id="nature" type="text" class="form-control"
multiple="multiple" onchange="ChangeNature(this)">
<option>Airticket(Round Trip)</option>
<option value="visa">Visa</option>
<option value="medical">Medical</option>
<option value="resident">Resident Card</option>
<option value="pickupdrop">Airport Pickup/Drop</option>
<option value="accommodation">First 7 Days Free
Accommodation</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
</select> <span class="errorspan" id="nature_er">select the
type</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
id="airticket_amt">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airticket Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter
airticket the Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="visa_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Visa Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
visa amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="medical_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Medical Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
medical amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="residentcard_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Resident Card Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
resident card Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="pickupdrop_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airport Pickup/Drop Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
pickup/drop Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="accommodation_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Free Accommodation Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
free accommodation Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other1_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other1 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other1 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other2_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other2 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other2 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
and here is my script
function ChangeNature(obj) {
var selectValue = obj;
var selected = selectValue.options[selectValue.selectedIndex].value;
/* var visa = document.getElementsByClassName("multihide");
var medical = document.getElementById("medical_amt");
var resident = document.getElementById("residentcard_amt");
var pickupdrop = document.getElementById("pickupdrop_amt");
var acc= document.getElementById("accommodation_amt");
var other1 = document.getElementById("other1_amt");
var other2 = document.getElementById("other2_amt"); */
if(selected ==="visa"){
$("#visa_amt").show();
}
if(selected ==="medical"){
$("#visa_amt").hide();
$("#medical_amt").show();
}
if(selected ==="resident"){
$("#medical_amt").hide();
$("#residentcard_amt").show();
}
if(selected ==="pickupdrop"){
$("#residentcard_amt").hide();
$("#pickupdrop_amt").show();
}
if(selected ==="accommodation"){
$("#pickupdrop_amt").hide();
$("#accommodation_amt").show();
}
else{
$("#accommodation_amt").hide();
}
}
Use a second function.
The first one will be triggered ever time you change the selection of the checkbox. It will change the class of the trigger source (the current active element) and add or remove a class (e.g. selected). After this you start a second function named updateTextAreas.
Inside this Function you get all you elements with the given class (e.g. selected) and walk over the result list. Then you could show the needed text areas and hide all others.
function ChangeNature(obj) {
$(obj).toggleClass('selected');
updateTextAreas();
}
function updateTextAreas(){
// hide everything
$("#visa_amt").hide();
$("#medical_amt").hide();
// get all selected options
$('.selected').each(function(i,e){
if($(e).hasClass("visa")){
$("#visa_amt").show();
}else if($(e).hasClass("medical")){
$("#medical_amt").show();
} [and so on]
});
}
Hope I understand you right.
The problem got solved now. I used the following script.
$('#nature').on('change',function(){
var val = $('#nature').val();
if(val!=null){
arr = val.toString().split(",");
$('.multihide').hide();
for(var i=0;i<arr.length;i++){
if(arr[i]=="airticket"){$("#airticket_amt").show();}
if(arr[i]=="visa"){$("#visa_amt").show();}
if(arr[i]=="medical"){$("#medical_amt").show();}
if(arr[i]=="resident"){$("#residentcard_amt").show();}
if(arr[i]=="pickupdrop"){$("#pickupdrop_amt").show();}
if(arr[i]=="accommodation"){$("#accommodation_amt").show();}
if(arr[i]=="other1"){$("#other1_amt").show();}
if(arr[i]=="other2"){$("#other2_amt").show();}
}
}else{
$('.multihide').hide();
}
});
Thanks to all.
I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.
Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});
This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
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 ;)