I'm still really new to using jquery, and have tried googling my problem, but cant quite figure it out.
I have multiple select boxes on my page, each named gearquan[]
How do I get jquery to get the selected values of each of those select boxes and pass it off as a serialized array?
Here is my html form:
<script src="options.js"></script>
Do you want to add the CDW?<br>
<input type="radio" name="cdwq" id="cdwq" value="yes" checked>Yes<br>
<input type="radio" name="cdwq" id="cdwq" value="no">No<br>
<input type="hidden" name="cdw" id="cdw" value="20">
<h2>Equipment</h2>If you need more than one of an item, select your quantity below:<br><table width="700px" cellspacing="0">
<tr style="border-bottom: 1px solid #000;">
<td style="border-bottom: 1px solid #000;">
<select name="gearquan[]" id=gearquan[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
<td style="border-bottom: 1px solid #000;">HCK</td>
<td width="40%" style="border-bottom: 1px solid #000;">Includes the Sleep Kits for up to 6 people, Kitchen Kit, Outdoor Kit, and Touring Kits.</td>
<td style="border-bottom: 1px solid #000; text-align: right;">$250 each</td>
</tr>
<tr style="border-bottom: 1px solid #000;">
<td style="border-bottom: 1px solid #000;">
<select name="gearquan[]" id=gearquan[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td><td style="border-bottom: 1px solid #000;">Gen</td><td width="40%" style="border-bottom: 1px solid #000;">Runs everything 2000 watt does plus an air conditioner in our larger campers</td><td style="border-bottom: 1px solid #000; text-align: right;">$50 Per Day.<br>$250 Per Week</td></tr></table>
<br>
Choose campground:
<select name="park" id="park" style="width: 150px;">
<option value="NONE"></option>
<option value="fb">Fishing Bridge</option>
<option value="bb">Bridge Bay</option>
<option value="wt">West Thumb</option>
<option value="gv">Grant Village</option>
<option value="ma">Madison</option>
<option value="no">Norris</option>
<option value="ca">Canyon</option>
<option value="to">Tower</option>
<option value="ma">Mammoth</option>
</select><br>
<br>
And Select Your Delivery Type: <select name="deliv" id="deliv" style="width: 175px;"><option value="none">I will be towing it myself.</option>
<option value="both">Deliver and Pickup</option>
<option value="deliver">Deliver Only</option>
<option value="pickup">Pickup Only</option>
<option value="setup">Setup Only</option></select>
</div>
<br><br>
<input type="submit" id="submit" value="Continue" style="background-color: #93161b; border: 1px solid #93161b; border-radius: 2px; box-shadow: 0 1px 1px 0 #000; color: #fff; width: 125px; margin: 20px 0; font-size: 1.5em; padding: 10px 0;"></form>
My script.js file:
$(document).ready(function(){
$("#submit").click(function(){
var values = new Array();
values = $("#gearquan").serialize();
//items = values.serialize;
var cdw = document.getElementById("cdw").value;
var cdwq = document.getElementById("cdwq").value;
var toadd = document.getElementById("toadd").value;
var park = document.getElementById("park").value;
var deliv = document.getElementById("deliv").value;
var dataString = 'gearquan=' +values+ '&cdw='+ cdw +'&cdwq='+ cdwq +'&toadd='+ toadd +'&park='+ park +'&deliv='+ deliv;
$.ajax({
type: "POST",
url: "optionssub.php",
data: dataString,
cache: false,
success: function(result){
//alert(result);
window.location.assign("confirm.php")
}
});
//}
return false;
});
});
And the php file the script passes the values off to:
<?php
session_start();
$_SESSION["gearquan"]=$_POST["gearquan"];
$_SESSION["cdw"]=$_POST["cdw"];
$_SESSION["cdwq"]=$_POST["cdwq"];
$_SESSION["toadd"]=$_POST["toadd"];
$_SESSION["park"]=$_POST["park"];
$_SESSION["deliv"]=$_POST["deliv"];
echo "Success.";
?>
You can get the value of multiple select boxes as array using map()
method.
var values = $('select').map(function() {
return this.value;
});
You are using same id
for multiple select
. I would suggest you use class instead like following.
<select class="gearquan">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
And then use following js
.
var values = $('.gearquan').map(function() {
return this.value;
});
var selectedValues = $('select[name="gearquan[]"] option:selected');
这将从任何名为gearquan[]
select
给出选择值的数组。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.