php - echo select value without submit

Question

I have a clothing website using snipcart which currently has no built in size or color selector so i need to do it myself by putting it in the description so we can know what to send. Anyway, i need the selected value of the color and size to be echoed in the button data.

This is my code:

<?php 
    echo"<h4 class='ct3'>COLOR</h4>
<select id='color' name='color'>
$colorsHTML;
</select>

<h4 class='ct3'>SIZE</h4>
<select name='size' id='size'>
$sizesHTML;
</select>

<br>
<br>
<button
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
    data-item-id='2'
    data-item-name='$name'
    data-item-price='$price'
    data-item-weight='0'
    data-item-url=''
    data-item-image='$image'
    data-item-description='$description'>
        ADD TO CART
</button>";
?>

I need the color and size to be echoed in the button's data so it will look like this:

    <?php
echo"<h4 class='ct3'>COLOR</h4>
    <select id='color' name='color'>
    $colorsHTML;
    </select>

    <h4 class='ct3'>SIZE</h4>
    <select name='size' id='size'>
    $sizesHTML;
    </select>

    <br>
    <br>
    <button
        class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
        data-item-id='2'
        data-item-name='$name'
        data-item-price='$price'
        data-item-weight='0'
        data-item-url=''
        data-item-image='$image'
        data-item-description='$description  COLOR=blue SIZE=XL'>
            ADD TO CART
    </button>";
?>

I've tried this: but i think i would need a code for it to change the button data when the value for the select input is changed

<button
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;'
    data-item-id='2'
    data-item-name='$name'
    data-item-price='$price'
    data-item-weight='0'
    data-item-url=''
    data-item-image='$image'
    data-item-description='$description COLOR = <script type='text/javascript'>
    $('#color').select(function() {
       var model=$('#color').val();
      alert(model);
     });</script>  SIZE = <script type='text/javascript'>
    $('#size').select(function() {
       var model=$('#size').val();
      alert(model);
     });
</script>'>
        ADD TO CART
</button>

@NishantNair I think the only way is to put the selected value in the button data-item-desription on change — ItzBulkDev, Jan 18 '17 at 06:44
Have you tried anything or just waiting for us to write you code? — u_mulder, Jan 18 '17 at 06:49
I've tried to echo a jquery code inside the data-item-description but its just echos the jquery code so i need help — ItzBulkDev, Jan 18 '17 at 06:51
@u_mulder okay, updated the post to show what i did, check at the bottom — ItzBulkDev, Jan 18 '17 at 07:01

Mayank Pandeyz · Answer 1 · 2017-01-18T07:20:18.477

0

Your requirement can only be achieved by some client side scripting language like JS or Jquery like:

Html:

<select id="size">
  <option value="small">Small</option>
  <option value="large">Large</option>
</select>

<div id="response">
</div>

Jquery:

$(document).ready(function(){
    $('#size').change(function(){
    $('#response').html($(this).val());
    // $('#response').attr('data-item-description', $(this).val());
  });
});

Working Fiddle

Updated Fiddle

Note: Don't forget to include jquery library

edited Jan 18 '17 at 07:20

answered Jan 18 '17 at 06:54

Mayank Pandeyz

25,704
4
40
59

ok but is there a way to insert it into my data-item-description instead of just echoing in a div? – ItzBulkDev Jan 18 '17 at 07:05

score 0 · Answer 2 · answered Jan 18 '17 at 07:13

0

For setting data-properties of an element there's a special .data() function in jquery:

$( document ).ready( function() {

    $( "#size" ).change( function() { 
        // get value of a selected option
        var val = $( this ).val(); 
        // set data-attribute of a button
        $( "button" ).data( "color", val );
    } );

    $( "#color" ).change( function() { 
        // get value of a selected option
        var val = $( this ).val(); 
        // set data-attribute of a button
        $( "button" ).data( "size", val );
    } );
} );

Note, that size and color will be data-attributes. This means that in your button they will look like:

<button data-item-description='$description'  data-color='blue' data-size='XL'>

answered Jan 18 '17 at 07:13

u_mulder

54,101
5
48
64

is there a way to put the color and size in the description with the $description variable? – ItzBulkDev Jan 18 '17 at 07:22
Yes there is a way, but if you want to add color and size to a `description` this means that sometimes you need to __remove__ previously selected color and size. In this case this is a job for regular expressions. So I advise you to use distinct data attributes. – u_mulder Jan 18 '17 at 07:29
the reason i cant use new data types is because snipcart doesnt support these data types so putting it in the description is the only solution – ItzBulkDev Jan 18 '17 at 07:36
Did you see the custom fields offered by Snipcart? https://docs.snipcart.com/configuration/custom-fields might be a better way. If not, you should be able to change the description by using `$('button').data('item-description', newDescription)`. – Charles Ouellet Jan 23 '17 at 21:21
So, use this custom attributes. – u_mulder Jan 24 '17 at 06:46

php - echo select value without submit

2 Answers2