#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    1
    Rep Power
    0

    Get content of dropdown and sortable list


    Hi,

    currently I work on some project.
    \The project is simple, the user vists page, sees the dorp down list and sortable list of some plans.

    Then the user chooses one of the items form the drop down list and also using sortable list ordeds the items accoridng to his/her priority.

    Finally the user submits his/her chosen value from th drop down list and ordered priorities using simple text box, which is sent to predefined mail.


    I made two select drop down list using javascript and simple sortable list, but as far as I am new to JS and I could not identify how to tell the code to get the chosen value from the dop down list and ordered priority by the user and submit them autoamtically with comment written in the text box by the user.

    I know the for mailing purposes PHP must be used, but first I have to find out how to get the last content chose by the user?

    Please help on this issue, any help will be appreciated.



    Code:
    <head>
    
    <style>
    
    
    		.connected, .sortable, .exclude, .handles {
    	
    			width: 100%;
    		
    
    		   /*-webkit-touch-callout: none;
    			-webkit-user-select: none;
    			-khtml-user-select: none;
    			-moz-user-select: none;
    			-ms-user-select: none;
    			user-select: none  */
    		}
    		.sortable.grid {
    			overflow: hidden;
    		}
    		.connected li, .sortable li, .exclude li, .handles li {
    			list-style: none;
    			border: 1px solid #CCC;
    			background: #F6F6F6;
    			font-family: "Tahoma";
    			color: #1C94C4;
    			margin: 5px;
    			padding: 5px;
    			height: 45px;
    			width:100%;
    		
    			 
    		}
    		.handles span {
    			cursor: move;
    		}
    		li.disabled {
    			opacity: 0.5;
    		}
    		.sortable.grid li {
    			line-height: 80px;
    			float: left;
    			width: 80px;
    			height: 80px;
    			text-align: center;
    		}
    		li.highlight {
    			background: #FEE25F;
    		}
    		#connected {
    			width: 440px;
    			overflow: hidden;
    			margin: auto;
    		}
    		.connected {
    			float: left;
    			width: 200px;
    		}
    		.connected.no2 {
    			float: right;
    		}
    		li.sortable-placeholder {
    			border: 1px dashed #CCC;
    			background: none;
    		}
    		</style>
    
    <script>
    (function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
    	var method = String(options);
    	options = $.extend({
    		connectWith: false
    	}, options);
    	return this.each(function() {
    		if (/^enable|disable|destroy$/.test(method)) {
    			var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
    			if (method == 'destroy') {
    				items.add(this).removeData('connectWith items')
    					.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
    			}
    			return;
    		}
    		var isHandle, index, items = $(this).children(options.items);
    		var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
    		items.find(options.handle).mousedown(function() {
    			isHandle = true;
    		}).mouseup(function() {
    			isHandle = false;
    		});
    		$(this).data('items', options.items)
    		placeholders = placeholders.add(placeholder);
    		if (options.connectWith) {
    			$(options.connectWith).add(this).data('connectWith', options.connectWith);
    		}
    		items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    			if (options.handle && !isHandle) {
    				return false;
    			}
    			isHandle = false;
    			var dt = e.originalEvent.dataTransfer;
    			dt.effectAllowed = 'move';
    			dt.setData('Text', 'dummy');
    			index = (dragging = $(this)).addClass('sortable-dragging').index();
    		}).on('dragend.h5s', function() {
    			dragging.removeClass('sortable-dragging').show();
    			placeholders.detach();
    			if (index != dragging.index()) {
    				items.parent().trigger('sortupdate', {item: dragging});
    			}
    			dragging = null;
    		}).not('a[href], img').on('selectstart.h5s', function() {
    			this.dragDrop && this.dragDrop();
    			return false;
    		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
    			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
    				return true;
    			}
    			if (e.type == 'drop') {
    				e.stopPropagation();
    				placeholders.filter(':visible').after(dragging);
    				return false;
    			}
    			e.preventDefault();
    			e.originalEvent.dataTransfer.dropEffect = 'move';
    			if (items.is(this)) {
    				if (options.forcePlaceholderSize) {
    					placeholder.height(dragging.outerHeight());
    				}
    				dragging.hide();
    				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
    				placeholders.not(placeholder).detach();
    			} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
    				placeholders.detach();
    				$(this).append(placeholder);
    			}
    			return false;
    		});
    	});
    };
    })(jQuery);
    
    </script>
    
    </head>
    <body>
    
    <ul class="sortable">
        
                <li> Item 1
                <li> Item 2
                <li> Item 3
                <li>Item 4
                <li> Item 5
                <li>Item 6
                <li> Item 7
                <li> Item 8
                <li> Item 9
                <li>Item 10
                </ul>                    
    <script>
        $('.sortable').sortable();
      </script>
    
    </body>
    Thank you.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,151
    Rep Power
    183
    Try this..., I added an alert() to give you an example of how you get the last list item, that was dropped/selected (note: you will see my addition in red colored text):
    Code:
    <html>
    <head>
    
    <style>
    
    
    		.connected, .sortable, .exclude, .handles {
    	
    			width: 100%;
    		
    
    		   /*-webkit-touch-callout: none;
    			-webkit-user-select: none;
    			-khtml-user-select: none;
    			-moz-user-select: none;
    			-ms-user-select: none;
    			user-select: none  */
    		}
    		.sortable.grid {
    			overflow: hidden;
    		}
    		.connected li, .sortable li, .exclude li, .handles li {
    			list-style: none;
    			border: 1px solid #CCC;
    			background: #F6F6F6;
    			font-family: "Tahoma";
    			color: #1C94C4;
    			margin: 5px;
    			padding: 5px;
    			height: 45px;
    			width:100%;
    		
    			 
    		}
    		.handles span {
    			cursor: move;
    		}
    		li.disabled {
    			opacity: 0.5;
    		}
    		.sortable.grid li {
    			line-height: 80px;
    			float: left;
    			width: 80px;
    			height: 80px;
    			text-align: center;
    		}
    		li.highlight {
    			background: #FEE25F;
    		}
    		#connected {
    			width: 440px;
    			overflow: hidden;
    			margin: auto;
    		}
    		.connected {
    			float: left;
    			width: 200px;
    		}
    		.connected.no2 {
    			float: right;
    		}
    		li.sortable-placeholder {
    			border: 1px dashed #CCC;
    			background: none;
    		}
    		</style>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script>
    (function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
    	var method = String(options);
    	options = $.extend({
    		connectWith: false
    	}, options);
    	return this.each(function() {
    		if (/^enable|disable|destroy$/.test(method)) {
    			var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
    			if (method == 'destroy') {
    				items.add(this).removeData('connectWith items')
    					.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
    			}
    			return;
    		}
    		var isHandle, index, items = $(this).children(options.items);
    		var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
    		items.find(options.handle).mousedown(function() {
    			isHandle = true;
    		}).mouseup(function() {
    			isHandle = false;
    
    		});
    		$(this).data('items', options.items)
    		placeholders = placeholders.add(placeholder);
    		if (options.connectWith) {
    			$(options.connectWith).add(this).data('connectWith', options.connectWith);
    		}
    		items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    			if (options.handle && !isHandle) {
    				return false;
    			}
    			isHandle = false;
    			var dt = e.originalEvent.dataTransfer;
    			dt.effectAllowed = 'move';
    			dt.setData('Text', 'dummy');
    			index = (dragging = $(this)).addClass('sortable-dragging').index();
    		}).on('dragend.h5s', function() {
    			dragging.removeClass('sortable-dragging').show();
    			placeholders.detach();
    			if (index != dragging.index()) {
    				items.parent().trigger('sortupdate', {item: dragging});
    			}
    			dragging = null;
    		}).not('a[href], img').on('selectstart.h5s', function() {
    			this.dragDrop && this.dragDrop();
    			return false;
    		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
    			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
    				return true;
    			}
    			if (e.type == 'drop') {
    				e.stopPropagation();
    				placeholders.filter(':visible').after(dragging);
                                    alert($(".sortable li").eq(dragging.index()).html());
    				return false;
    			}
    			e.preventDefault();
    			e.originalEvent.dataTransfer.dropEffect = 'move';
    			if (items.is(this)) {
    				if (options.forcePlaceholderSize) {
    					placeholder.height(dragging.outerHeight());
    				}
    				dragging.hide();
    				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
    				placeholders.not(placeholder).detach();
    			} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
    				placeholders.detach();
    				$(this).append(placeholder);
    			}
    			return false;
    		});
    	});
    };
    })(jQuery);
    
    </script>
    
    </head>
    <body>
    
    <ul class="sortable">
        
                <li> Item 1
                <li> Item 2
                <li> Item 3
                <li>Item 4
                <li> Item 5
                <li>Item 6
                <li> Item 7
                <li> Item 8
                <li> Item 9
                <li>Item 10
                </ul>                    
    <script>
        $('.sortable').sortable();
      </script>
    
    </body>
    </html>
    Now..., all you have to do, is create a hidden text field and insert the content, formed by the alert() example code, into the hidden text field and when your form is submitted; you will get the hidden text field value, with your PHP.

IMN logo majestic logo threadwatch logo seochat tools logo