CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
jmv
jmv

Reputation: 415

jquery getting the data of form DIV to PHP $_POST

i have this working JQuery that let the user choose a color and changes the image + the name of the color that he/she have chosen. what i want is to get the value of the name of the color to PHP $_POST. i used data-caption to be able to change the name of the color.

this is the div that i want to get and this is the placeholder for changing the name.

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

this is the rest of the html code.

                    <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>

and this is my working 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);
     });
 });
});

UPDATE this is my ajax code to pass it to my 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();
            });

and this is how it looks like when the form is passed in my 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'];

Upvotes: 0

Views: 79

Answers (1)

Abhilash Nayak
Abhilash Nayak

Reputation: 704

Fetch the contents of the div by using html

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

Upvotes: 2

Related Questions