【发布时间】：2017-06-17 10:56:20
【问题描述】：
我正在尝试选择巴士座位。 为此，我想发送选定的座位信息，相当于下一个模式。 当我尝试这样做时，它会发送对象 [object] 这是我的模板代码
<div class="row">
<div class=" col-sm-6">
<div class="jquery-script-center">
<div class="jquery-script-ads">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="jquery-script-clear"></div>
</div>
<div class="wrapper">
<div class="container">
<h1>Select your seat</h1>
<div id="seat-map">
<div class="front-indicator">Front</div>
</div>
<div class="booking-details">
<div class="row">
<div class="col-sm-12">
<h2>Booking Details</h2>
<h3> Selected Seats (<span id="counter">0</span>):</h3>
<ul data-id="id-40" id="selected-seats">5
</ul>
Total: <b><span id="total">0</span>  Rupees</b>
</div>
<div class="col-sm-12">
<button type="button" class="open-myModal btn btn-info btn-lg continue" data-toggle="modal"
data-target="#myModal">Book Seats
</button>
<script type="text/javascript">
$(document).on("click", ".open-myModal", function () {
var myBookId = $('#counter');
var wer = $.parseJSON(JSON.stringify(myBookId));
alert(myBookId);
$(".modal-body #seats").val( myBookId );
});
</script>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title text-center">Fill Booking Details</h4>
</div>
<div class="modal-body">
<form method="post" action="{% url 'initiate' %}">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="package_name"
class="col-2 col-form-label">Package Name</label>
<div class="col-10">
<input class="form-control" type="text"
id="package_name" name="package_name" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name"
class="col-2 col-form-label">Your Name</label>
<div class="col-10">
<input class="form-control" type="text"
id="name" name="name" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="mobile"
class="col-2 col-form-label">Mobile</label>
<div class="col-10">
<input class="form-control" type="text"
id="mobile" name="mobile" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email"
class="col-2 col-form-label">Email</label>
<div class="col-10">
<input class="form-control" type="email"
id="email" name="email" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="address"
class="col-2 col-form-label">Address</label>
<div class="col-10">
<input class="form-control" type="text"
id="address" name="address" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city"
class="col-2 col-form-label">City</label>
<div class="col-10">
<input class="form-control" type="text"
id="city" name="city" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="package_name"
class="col-2 col-form-label">State</label>
<div class="col-10">
<input class="form-control" type="text"
id="state" name="state" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="pincode"
class="col-2 col-form-label">Pincode</label>
<div class="col-10">
<input class="form-control" type="text"
id="pincode" name="pincode" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="amount"
class="col-2 col-form-label">Amount</label>
<div class="col-10">
<input class="form-control" type="text"
id="amount" name="amount" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="seats"
class="col-2 col-form-label">Seats</label>
<div class="col-10">
<input class="form-control" type="text"
id="seats" name="seats" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="travel_date"
class="col-2 col-form-label">Travel Date</label>
<div class="col-10">
<input class="form-control" type="text"
id="travel_date" name="travel_date" required>
</div>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-block btn-success">Confirm</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="legend"></div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="{% static 'js/jquery.seat-charts.js' %}"></script>
<!-- <script src="jquery.seat-charts.js"></script> -->
<script>
var firstSeatLabel = 1;
$(document).ready(function () {
var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total'),
sc = $('#seat-map').seatCharts({
map: [
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'eeeee',
],
seats: {
e: {
price: 650,
classes: 'economy-class', //your custom CSS class
category: 'Selected Seat'
}
},
naming: {
top: false,
getLabel: function (character, row, column) {
return firstSeatLabel++;
},
},
legend: {
node: $('#legend'),
items: [
['e', 'available', 'Available Seat'],
['f', 'unavailable', 'Already Booked']
]
},
click: function () {
if (this.status() == 'available') {
//let's create a new <li> which we'll add to the cart items
$('<li>' + this.data().category + ' Seat # ' + this.settings.label + ': <b>$' + this.data().price + '</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
/*
* Lets update the counter and total
*
* .find function will not find the current seat, because it will change its stauts only after return
* 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
*/
$counter.text(sc.find('selected').length + 1);
$total.text(recalculateTotal(sc) + this.data().price);
return 'selected';
} else if (this.status() == 'selected') {
//update the counter
$counter.text(sc.find('selected').length - 1);
//and total
$total.text(recalculateTotal(sc) - this.data().price);
//remove the item from our cart
$('#cart-item-' + this.settings.id).remove();
//seat has been vacated
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
//this will handle "[cancel]" link clicks
$('#selected-seats').on('click', '.cancel-cart-item', function () {
//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
sc.get($(this).parents('li:first').data('seatId')).click();
});
//let's pretend some seats have already been booked
sc.get(['7_1', '7_2']).status('unavailable');
});
function recalculateTotal(sc) {
var total = 0;
//basically find every selected seat and sum its price
sc.find('selected').each(function () {
total += this.data().price;
});
return total;
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
<div class="col-sm-6 position">
<img src="{% static 'img/image102.png' %}" height="450" alt="logo"/>
</div>
</div>
id = selected seat”的行显示了选择的座位。
我编写了这个脚本，它在点击预订座位按钮时触发
<script type="text/javascript">
$(document).on("click", ".open-myModal", function () {
var myBookId = $('#counter');
var wer = $.parseJSON(JSON.stringify(myBookId));
alert(myBookId);
$(".modal-body #seats").val( myBookId );
});
</script>
它正在向我展示这个
[object Object]
请帮我解决这个问题。
提前致谢。
【问题讨论】：
-
alert(myBookId.value()) ?
-
乔纳斯什么都没发生
标签： javascript jquery