I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
Related
So i want to take a couple of values from an HTML input-form, and basically be able to generate a csv file to download for the user when they click a button which will consist of the data they entered into the form. However, I am confused about how i would go about this and can't find a good guide online.
I also would like to customize how the csv format will be if possible, hope somehow knows what iam trying to do! thanks.
Edit: iam not asking to do this in just html, i assume javascript is best option
MY HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by Mathews Joy. The source code is licensed
MIT. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<script src="index.js"></script>
</html>
document.querySelector("#download").addEventListener('click', generateCSV);
function generateCSV(e){
e.preventDefault();
const formdata = new FormData(document.getElementById('grade-form'));
const formObj = Object.fromEntries(formdata);
const len = Object.keys(formObj).length/2;
let formValues = '';
for(let i=1; i<= len; i++){
// comma separated values and break line
formValues += formObj['grade'+i] +','+formObj['credit'+i]+ "\r\n";
}
downloadCSV(formValues);
}
function downloadCSV(formValues){
const columnNames = "Grade (%), Weight (Credits)";
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
csvContent += formValues + "\r\n";
const encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my-form-data.csv");
document.body.appendChild(link);
link.click();
// link.remove();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" name="grade1" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit1" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade2" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit2" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade3" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit3" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade4" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit4" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade5" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit5" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade6" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit6" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade7" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit7" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by Mathews Joy. The source code is licensed
MIT. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<!--<script src="index.js"></script>-->
</html>
Takes all input names as columnNames and append to csv content as the first row (column names)
const columnNames = Object.keys(formObj).map(key => key.toUpperCase()).join(",");
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
Take out all form values and append to csv content.
Lets say user has entered address value as New Braunfels, TX, 78130
Since its commma separated, for this CSV will create 3 column entries New Braunfels, TX, and 78130.
To handle this we will replace , with so that it will add it in one column
const formValues = Object.values(formObj).map(val => val.replaceAll(',', ' ')).join(",");
csvContent += formValues + "\r\n";
function downloadCSV(){
const formEl = document.forms.userForm;
const formData = new FormData(formEl);
const formObj = Object.fromEntries(formData);
const columnNames = Object.keys(formObj).map(key => key.toUpperCase()).join(",");
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
const formValues = Object.values(formObj).map(val => val.replaceAll(',', ' ')).join(",");
csvContent += formValues + "\r\n";
// Set encoded csvContent as `href` attribute and also set download attribute to set the file name
const encodedUri = encodeURI(csvContent);
const link = document.querySelector("#downloadRef");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my-form-data.csv");
}
<form id="userForm">
<div><label>Name<input type="text" name="name"></label></div>
<div><label>Age<input type="number" name="age"></label></div>
<div>
Gender
<label>Male<input type="radio" name="gender" value="male"></label>
<label>Female<input type="radio" name="gender" value="female"></label>
</div>
<div><label>Address<textarea name="address"></textarea></label></div>
<button onclick="downloadCSV()">
<a id="downloadRef"style="text-decoration:none" href="#">Create CSV</a>
</button>
</form>
After setting csvContent as href attribute, the click event will be taken care of by Event capturing
*This snippet will not download CSV file here, run code on your host
I am trying to use check boxes in order to filter my results at an html page. Through a django view a pass my data in a list, and then through a loop like this:
</div>
{% for r in rows %}
<div class="res_show">
<div class="btitle">
<p style="text-align:left"><b>{{r.name}}</b></p>
</div>
<div class="baddress">
<p>{{r.address}}</p>
</div>
<div class="reviewstar">
{% if user.is_authenticated %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% else %}
<p style="text-align:left"><span class="fa fa-star checked"></span> {{r.stars}} ({{r.r_count}})</p>
{% endif %}
</div>
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
<div class="diraddress">
<p style="text-align:left">{{r.duration}}' {{r.distance}} χλμ <b>{{r.open}}</b></p>
</div>
<hr style="border:3px solid #333333">
</div>
i want to use this class for filtering:
<div class="b_category">
<p style="text-align: left"> <b>{{r.category}}</b></p>
</div>
Category has 4 possible values: cafe, bar, nigh_club, reastaurant
I have found the following code but i can't figure out what i should change in order to work in my code:
http://jsfiddle.net/x1av5809/
Category may contain more tha one values seperated by comma, for example
bar or cafe, bar
An example of use would be choosing the bar check box and showing only results that contain category bar. I i choose both bar and cafe check boxes i should show results that contain bar or cafe category
Thanks in advance
You can loop through your checked checkboxes and then using b:contains.. check the element have that checked values or not depending on this hide/show divs .
Demo Code :
$("input[name='filterStatus']").change(function() {
//check if the checkbox checked length is > 0
if ($("input[name='filterStatus']:checked").length > 0) {
$(".res_show").hide() //hide all divs
$("input[name='filterStatus']:checked").each(function() {
var values = $(this).val() //get valeu of checked checkboxess
$(".b_category b:contains(" + values + ")").closest(".res_show").show() //show same
})
} else {
$(".res_show").show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b_category">
<input type="checkbox" name="filterStatus" value="Cafe" /><label>Cafe</label>
<input type="checkbox" name="filterStatus" value="Restaurant" /><label>Restaurant</label>
<input type="checkbox" name="filterStatus" value="Bar" /><label>Bar</label>
<input type="checkbox" name="filterStatus" value="Night club" /><label>Night club</label>
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some1</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somethins</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Night club</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>some4</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Bar</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Cafe</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
<div class="res_show">
<div class="btitle">
<a href="/show_business/{{r.b_id}}/">
<p style="text-align:left"><b>somes</b></p>
</a>
</div>
<div class="baddress">
<p>123,abc</p>
</div>
<div class="reviewstar">
<a href="/apply_review/{{r.b_id}}/">
<p style="text-align:left"><span class="fa fa-star checked"></span> 5 </p>
</a>
</div>
<div class="b_category">
<p style="text-align: left"> <b>Restaurant</b></p>
</div>
<div class="diraddress">
<a href="/show_directions/{{r.id}}/">
<p style="text-align:left">123 χλμ <b>12:30</b></p>
</a>
</div>
<hr style="border:3px solid #333333">
</div>
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});
I try to make draggable &sortable content with jQuery UI when i use:
helper:clone property
it's work perfectly, but i don't want to clone elements.
I want move them and when i use default helper then elements are not sortable.
Elements are on the stack in one place, instead of move other elements to make empty place form dragged element
See those Html and script below
This works for 2 categories
<div class="content">
<div class="category" data-category="1">
<div class="noteCategory">
<h3>Cat 1</h3>
</div>
<div id="categorycontent1" class="categoryContent">
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-01
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text
</div>
</div>
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-02
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 2
</div>
</div>
</div>
</div>
<div class="category" data-category="2">
<div class="noteCategory">
<h3>Cat 2</h3>
</div>
<div id="categorycontent2" class="categoryContent">
<div class="note cnote" data-id="5" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-04
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 22
</div>
</div>
<div class="note cnote" data-id="8" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-06
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 23
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#categorycontent1, #categorycontent2").sortable({
connectWith: ".categoryContent"
}).disableSelection();
});
</script>
Hope this helps