javascript - jquery 获取表单 DIV 的数据到 PHP $_POST

Question

我有这个工作的 JQuery，它让用户选择一种颜色并更改图像 + 他/她选择的颜色的名称。我想要的是将 颜色名称 的值获取到 PHP $_POST。我使用 data-caption 来更改颜色的名称。

这是我要获取的div，这是更改名称的占位符。

<div id="caption">Alumina Jade Metallic</div>

这是剩下的 html 代码。

                    <span data-src="car-color/car_AJM.jpg" data-caption="Alumina Jade Metallic"><a href="#?" class = "label" ><img src="../../thumb/th-Alumina-Jade.png">  </a></span>
                    <span  data-src="car-color/car_B.jpg" data-caption="Black Metallic"><a href="#?" class = "label"><img src="../../thumb/th-Black.png"> </a></span>
                    <span  data-src="car-color/car_BRM.jpg" data-caption="Blackish Red Metallic"><a href="#?" class = "label"><img src="../../thumb/th-Black-Red.png"> </a></span>
                    <span  data-src="car-color/car_BMM.jpg" data-caption="Blue Metallic"><a href="#?"class = "label" ><img src="../../thumb/th-Blue-Metal.png"></a></span>
                    <span  data-src="car-color/car_FW.jpg" data-caption="Freedom White"><a href="#?" class = "label"><img src="../../thumb/th-Freedom-White.png"> </a></span>
                    <span  data-src="car-color/car_OM.jpg" data-caption="Orange Metallic"><a href="#?" class = "label"><img src="../../thumb/th-Orange-Metal.png"> </a></span>
                    <span  data-src="car-color/car_RMM.jpg" data-caption="Red Metallic"><a href="#?"class = "label" ><img src="../../thumb/th-Red-Metal.png">  </a></span>
                    <span  data-src="car-color/car_SM.jpg" data-caption="Silver Metallic"><a href="#?" class = "label"><img src="../../thumb/th-Silver-Metal.png">  </a></span>
                    <span  data-src="car-color/car_WP.jpg" data-caption="White Pearl"><a href="#?"class = "label" ><img src="../../thumb/th-White-Pearl.png"> </a></span>

这是我的工作 jQuery :

$('.thumb span').each(function(){
  var _this = $(this);
  var src = _this.data("src");
  var text = _this.data("caption");
  _this.find('a').click(function(){
     $("#image").show( function() {
    $(".img img").attr("src", src);
    $("#caption").text(text);
     });
 });
});

更新 这是我的 ajax 代码，用于将其传递给我的 request.php

$('.car-quote #getQuote').on('click', function(e){
            e.preventDefault();
            var variantOpt = $('#variantOpt').val();
            var fName = $('#fName').val();
            var lName = $('#lName').val();
            var address = $('#address').val();
            var doBirth = $('#doBirth').val();
            var city = $('#city').val();
            var zipCode = $('#zipCode').val();
            var email = $('#email').val();
            var phone = $('#phone').val();
            var remarks = $('#remarks').val();
            var form = new Array({ 'variantOpt':variantOpt, 'fName':fName, 'lName':lName, 'address':address, 'doBirth':doBirth, 'city':city, 'zipCode':zipCode,
                                 'email':email, 'phone':phone, 'remarks':remarks });

            $.ajax({
                type: 'POST',
                url: "/093017/inquiry/mailInqueries/requestaquote.php",
                data: ({'action': 'car-quote', 'form': form})
            }).done(function(data) {
                $('#car-quote .result').html(data);

            $(".car-quote")[0].reset();
            });

这是在我的 request.php

中传递表单时的样子

$action = $_POST['action'];

    $variantOpt = $_POST['form'][0]['variantOpt'];
    $fName = $_POST['form'][0]['fName'];
    $lName = $_POST['form'][0]['lName'];
    $address = $_POST['form'][0]['address'];
    $doBirth = $_POST['form'][0]['doBirth'];
    $city = $_POST['form'][0]['city'];
    $zipCode = $_POST['form'][0]['zipCode'];
    $email = $_POST['form'][0]['email'];
    $phone = $_POST['form'][0]['phone'];
    $remarks = $_POST['form'][0]['remarks'];

Answer 1

使用html 获取div 的内容

var color = $('#caption').html();