Search code examples
jquery-uijquery-slider

Sending Jquery UI slider values to database


I have a ui slider element that I am using to let people rate a product, the purpose is to have this slider along with a button to insert the value into a MySQL table (sort of voting)

my slider looks like

$("#slider-range-max4").slider({
                range: "max",
                min: 1,
                max: 10,
                value: 0,
                slide: function (event, ui) {
                    $("#slider-range-max-amount4").text(ui.value);
                }
            });

            $("#slider-range-max-amount1").text($("#slider-range-max1").slider("value"));

How can I use a button to send the value selected by the user to mysql, do I have to embed the code into a form ?

Thanks


Solution

  • use ajax like bellow and send the value to php

    $(function() {
    $( "#slider-range-max" ).slider({
    range: "max",
    min: 1,
    max: 10,
    value: 2,
    slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
    }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    
        $.ajax({
    
            type:"POST",
            url:"your.php",
            data:"vote="+$( "#slider-range-max" ).slider( "value" ),
            success:function(response){
            alert(voted);
    
           } 
    
        })
    });
    

    In PHP

    <?php
    
    $vote="";
    
    if(isset($_POST['vote'])){$vote=$_POST['vote']}
    
    //now do your job with MySql here
    ?>