How to assign Session Variables using Jquery and PHP?

Question

I have a autocomplete combobox which holds the list of the suppliers and when an item is selected it will store the ID inside a session and a hidden field.

Here's my current code:

    <script>
        (function( $ ) {
            $.widget( "ui.combobox", {
                _create: function() {
                    var self = this,
                        select = this.element.hide(),
                        selected = select.children( ":selected" ),
                        value = selected.val() ? selected.text() : "";
                    var input = this.input = $( "<input>" )
                        .insertAfter( select )
                        .val( value )
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: function( request, response ) {
                                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                                response( select.children( "option" ).map(function() {
                                    var text = $( this ).text();
                                    if ( this.value && ( !request.term || matcher.test(text) ) )
                                        return {
                                            label: text.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>" ),
                                            value: text,
                                            option: this
                                        };
                                }) );
                            },
                            select: function( event, ui ) {
                                ui.item.option.selected = true;
                                self._trigger( "selected", event, {
                                    item: ui.item.option
                                });
                            },
                            change: function( event, ui ) {
                                if ( !ui.item ) {
                                    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                        valid = false;
                                    select.children( "option" ).each(function() {
                                        if ( $( this ).text().match( matcher ) ) {
                                            this.selected = valid = true;
                                            return false;
                                        }
                                    });
                                    if ( !valid ) {
                                        // remove invalid value, as it didn't match anything
                                        $( this ).val( "" );
                                        select.val( "" );
                                        input.data( "autocomplete" ).term = "";
                                        return false;
                                    }
                                }
                            }
                        })
                        .addClass( "ui-widget ui-widget-content ui-corner-left" );

                    input.data( "autocomplete" )._renderItem = function( ul, item ) {
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "</a>" )
                            .appendTo( ul );
                    };

                    this.button = $( "<button type='button'>&nbsp;</button>" )
                        .attr( "tabIndex", -1 )
                        .attr( "title", "Show All Items" )
                        .insertAfter( input )
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass( "ui-corner-all" )
                        .addClass( "ui-corner-right ui-button-icon" )
                        .click(function() {
                            // close if already visible
                            if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                                input.autocomplete( "close" );
                                return;
                            }

                            // work around a bug (likely same cause as #5265)
                            $( this ).blur();

                            // pass empty string as value to search for, displaying all results
                            input.autocomplete( "search", "" );
                            input.focus();
                        });
                },

                destroy: function() {
                    this.input.remove();
                    this.button.remove();
                    this.element.show();
                    $.Widget.prototype.destroy.call( this );
                }
            });
        })( jQuery );

        $(function() {
            $( "#combobox" ).combobox();
            $( "#toggle" ).click(function() {
                $( "#combobox" ).toggle();
            });
        });
        </script>




<form method="post">
        <p>Choose Supplier:<select name="SupplierDDL" id="combobox">
        <input type="hidden" name="SupplierId">
        <option value=""></option>

        <?php include 'loadSuppliers.php'; ?>
    </select><p> 

    <p>Number of Items:</label><input type="text" name="ItemsQty"/></p>
        <input name="SupplierSubmit" type="submit" value='Submit'>
        </form>



<script>
    $('input[placeholder], textarea[placeholder]').placeholder();
</script>

Also if you could give examples on how to postback using jquery because I might use it in the next part of the application that I'm trying to create.

Sir/Ma'am your answers would be of great help and be very much appreciated.

Answer 1

I understand what you're trying to achieve, but where exactly do you get stuck? Don't you know how to assign session variables in php?

Sessions are stored at server level by php, jquery can't access them (though javascript can access cookies). So just send your form and save the data using the $_SESSION var

In the change event on the combobox, you should do two things. First create a hidden field to add the value, second send the value to a php script where you save your session var;

Add hidden field:

$('#yourform').append('<input type="hidden" name="supplier_id" value="' + $(this).val + '" />'); // add hidden field

Send data to your session save script

$.get('save_session_var.php', {supplier_id: $(this).val});

And finally in save_session_var.php:

$_SESSION['supplier_id'] = $_GET['supplier_id'];