I have an AJAX HTML page and a submit PHP page, which sends data from SQL to update HTML on page.
I have a list of films within a PHPMyAdmin MariaDB table. One of the columns is "channel". Channel will either say "NOWTV", "BBC", or "SKYTV". I want the user to be able to select the channel and for this to update.
If I check the array for 1 string - for example: skytv, the SQL pulls the data. However, if I want to change the WHERE clause, based on selection - the filtering does not work.
I've tried ".=where OR" to change the channel selection.
ajax.html
<html>
<style>
body {
padding: 10px;
}
h2 {
margin: 1em 0 0.3em 0;
color: #343434;
font-weight: normal;
font-size: 30px;
line-height: 40px;
font-fnuamily: 'Orienta', sans-serif;
}
#employees {
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size: 12px;
background: #fff;
margin: 10px 10px 0 0;
border-collapse: collapse;
text-align: center;
float: left;
width: 100%;
}
#employees th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 4px 4px;
border-bottom: 1px solid #6678b1;
}
#employees td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 8px 10px;
}
#employees tbody tr:hover td {
color: #009;
}
.slidecontainer {
width: 50%; /* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 50%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #000000; /* Square background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
}
</style>
</head>
<body>
<input type="checkbox" id="nowtv" name="nowtv" >
<label for="nowtv">Now TV</label>
</div>
<div>
<input type="checkbox" id="skytv" name="skytv" >
<label for="skytv">Sky Movies</label>
</div>
<div>
<input type="checkbox" id="iplayer" name="iplayer" >
<label for="iplayer">BBC iPlayer</label>
</div>
<h2>Max Run-Time:</h2>
<div class="slidecontainer">
<input type="range" min="0" max="200" value="0" class="slider" id="runtime">
<p>Runtime: <span id="runtime_"></span></p>
</div>
<table id="employees">
<tbody>
</tbody>
</table>
<script>
var slider = document.getElementById("runtime");
var output = document.getElementById("runtime_");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
/script>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<p id="record_count"></p>
<script>
function makeTable(data){
var tbl_body = "";
for (var i = 0; i < data.length; i++)
{
var tbl_row = "";
var t = i;
for (var j=0; j<4; j++)
{
//tbl_row +=("<td>" + data[i].tmdbid + "</td>");
tbl_row +=("<td><a href='new/" + data[i].tmdbid + "'><IMG SRC='webaddress"+ data[i].poster +"'></a></td>");
i++;
}
tbl_body += "<tr>"+tbl_row+"</tr>"
}
return tbl_body;
}
function getEmployeeFilterOptions(){
var opts = {
checkboxes: [],
sliderValue: null
};
$checkboxes.each(function(){
if(this.checked){
opts.checkboxes.push(this.name);
}
});
var slider = document.getElementById("runtime");
opts.sliderValue = slider.value;
return opts;
}
function updateEmployees(opts){
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: opts,
success: function(records){
console.log(records);
$('#employees tbody').html(makeTable(records));
}
});
}
var $checkboxes = $("input");
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);
});
</script>
</body>
</html>
submit.php
<?php
$pdo = new PDO(
'mysql:host=xxxxxxxx;dbname=xxxxxxxx', 'xxxxxxxx', 'xxxxxxxx'
);
$checkboxes = $_POST["checkboxes"];
$slider_value = $_POST["sliderValue"];
$select = 'SELECT *';
$from = ' FROM streaming';
$where = ' WHERE poster <>"" AND runtime <' . $slider_value . ' AND channel = "X" ';
if (in_array("nowtv", $checkboxes))
{
$where .= ' OR channel = "NOWTV" ';
}
if (in_array("skytv", $checkboxes))
{
$where .= ' OR channel = "SKYTV" ';
}
if (in_array("iplayer", $checkboxes))
{
$where .= ' OR channel = "BBC" ';
}
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
>
The output I am expecting is for the user to be able to select the checkboxes and runtime - to then update the films available.
The current output shows nothing. :(
Related
I am using the following code to show search results. It has two options, one is a text field and another is a dropdown select option. I would like to convert the dropdown field into a checkbox option and allow users to select more than 1 option at a time. How can I do that?
<script>
$(document).ready(function(){
load_data(1);
function load_data(page,query,city)
{
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{page:page, query:query, city:city},
success:function(data)
{
$('#dynamic_content').html(data);
}
});
}
$(document).on('click', '.page-link', function(){
var page = $(this).data('page_number');
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(page, query, city);
});
$('#search_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
$('#city_box').change(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
});
</script>
Current dropdown example:
<form action="" class="row login_form">
<select name="city_box" id="city_box">
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="tokyo">Tokyo</option>
<option value="paris">Paris</option>
</select>
</form>
As per your query there are lot of stuff available. I have used Select2.js. This having so many features. I tried some way to achieve you scenario. Try below code snippet will work for you.
$(function() {
$("#multiple").select2({
closeOnSelect : false,
placeholder : "Placeholder",
allowHtml: true,
allowClear: true,
tags: true
});
});
function iformat(icon, badge,) {
var originalOption = icon.element;
var originalOptionBadge = $(originalOption).data('badge');
return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
}
.select2-container {
min-width: 400px;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
border-radius: 4px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #f77750;
border: 0;
display: inline-block;
padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaeb;
color: #272727;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #f77750;
border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
border-width: 2px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Multiple Select with Checkboxes</h3>
<select id="multiple" class="js-select2" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
I am developing a site which allow uploading multiple images for one id. But I want to upload images into text format into database and real image to my directory. But before uploading image into database I preview images using JavaScript's FileReader.
My problem is, when I click remove in preview image , that image should also be removed from images that I want to upload.
And second, that I don't know how to do this, when I click first time and select some images, then again
I select some images by clicking input field, the images selected second time is being uploaded into database instead of all.
Here are my codes
// image preview
$("#productImage").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$('.image-preview').append("<div class=\"product-image\">" +
"<img class=\"image-thumb\" src=\"" + e.target.result +
"\" title=\"" + file.name + "\" + data-file = \"" + file.name +
"\"/>" +
"<br/><div class=\"remove-image\">❌ Remove</span>" +
"</div>");
$('.remove-image').click(function(e) {
$(this).parent('.product-image').remove();
});
});
fileReader.readAsDataURL(f);
}
});
.form-elements {
display: flex;
flex-direction: column;
justify-content: left;
padding: 10px 0;
}
.form-elements .input-label {
padding: 10px 0;
}
.input-label label {
font-family: sans-serif;
font-size: 20px;
color: #fff;
}
.image-preview {
display: flex;
flex-wrap: wrap;
padding: 10px 0;
margin-bottom: 5px;
}
.image-preview .product-image {
display: block;
margin: 5px 10px;
width: 150px;
text-align: center;
}
.image-preview .product-image .image-thumb {
width: 100%;
border-radius: 10px;
cursor: pointer;
}
.image-preview .product-image .remove-image {
padding: 5px;
margin: 5px 0;
border-radius: 10px;
font-family: sans-serif;
font-size: 15px;
background: #ff3636;
color: #fff;
cursor: pointer;
}
.image-preview .product-image .remove-image:hover {
background: red;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- product images -->
<div class="form-elements outside">
<div class="input-label">
<label for="productName">Select product image(s)</label>
</div>
<div class="image-preview">
<!-- Images will be here -->
</div>
<input type="file" id="productImage" name="productImage[]" multiple />
</div>
PHP code snippet
<?php
//connection
$connect = mysqli_connect('localhost','root','','sahi_chuno_db');
$image = $_FILES['productImage']['name'];
$temp_image = $_FILES['productImage']['tmp_name'];
$product_id = 1;
for ($i=0; $i < count($image); $i++) {
$query = $connect->prepare("INSERT INTO `product_images` (`product_id`, `product_image`)
VALUES(?, ?)");
$query -> bind_param('is',$product_id, $image[$i]);
$run = $query -> execute();
if($run){
//move images to directory
move_uploaded_file($temp_image[$i], "../uploads/$image[$i]");
} else{
echo "Not uploaded";
}
}
?>
You can use
<button onclick = "myFunction()">Remove</button> /Remove button in preview
function myFunction() {
document.getElementById("productImage").value = "";
}
To clear the input field and if it is cleared it will not be uploaded.
Note : For more details Click Here
I need to get json menu from mysql database with three levels. I am getting 1st level and 2nd level. I need to display 3rd level. I have added index page and categories.php and actual treeview and the current result what I am getting now and also extract from database for database records.
How can I get 3rd level from the database to complete the menu as I have shown in the actual menu tree?
categories.php
<?php
include('db.php');
$sql = mysqli_query($db,"select cat_id,product from category where parent_id=0");
// parent_id categories node
$categories = array("Categories" => array());
while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC)) {
$cat_id = $row['cat_id'];
$ssql = mysqli_query($db,"select cat_id,product from category where parent_id='$cat_id'");
// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["product"] = $row["product"];
//$category["media"] = $row["media"];
$category["sub_categories"] = array(); // subcategories again an array
while ($srow = mysqli_fetch_array($ssql,MYSQLI_ASSOC)) {
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["product"] = $srow['product'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}
// pushing sinlge category into parent_id
array_push($categories["Categories"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
?>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<style>
body{background-color:#f2f2f2}
h3{ font-family: "arial","sans-serif"; color: #E47911;margin:0px; padding:0px }
.shadow {
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 3px 5px #999;
box-shadow: 0px 0px 5px #999;
}
#menu_ul, #submenu_ul {
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
padding:15px;
width:170px;
}
#submenu_ul{margin-top:25px; width:270px;}
#menu_ul li, #submenu_ul li
{
color: #333333;
cursor: pointer;
font-family: "arial","sans-serif";
font-size: 12px;
line-height: 16px;
margin: 0;
padding: 10px 0 10px;
}
#menu_ul li:active, #menu_ul li:hover
{
color: #E47911;
font-weight: bold;
background: url("images/arrow.png") no-repeat right;
}
#submenu_ul li:active, #submenu_ul li:hover
{
color: #E47911;
font-weight: bold;
}
#menu_box
{
border-top:solid 3px #333;border-left:solid 1px #dedede;border-right:solid 1px #dedede;border-bottom:solid 1px #dedede;min-height:510px;width:200px;background-color:#fff;margin-left:20px;float:left;position:relative;z-index:300
}
#menu_slider
{
border-top:solid 3px #333;border-left:solid 1px #dedede;border-right:solid 1px #dedede;border-bottom:solid 1px #dedede;min-height:480px;background-color:#fff;margin-left:220px;position:absolute;width:200px;position:relative;z-index:200;display:none;padding:15px
}
.hidebox, .hideul{display:none}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categories, function(i, category)
{
var subjsondata='';
$.each(category.sub_categories, function(i, sub_categories)
{
subjsondata += "<li>"+sub_categories.product+"</li>";
});
var jsondata ="<li id='"+category.cat_id+"' class='category'>"+category.product+"<ul id='hide"+category.cat_id+"' class='hideul' >"+subjsondata+"</ul></li>";
$(jsondata).appendTo("#menu_ul");
});
}
);
$(".category").live('mouseover',function(event){
$("#menu_slider").show();
var D=$(this).html();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
var M=$("#hide"+id).attr("media");
$("#submenu_ul").html(V);
$("#menu_slider h3").html(D);
if(M!='null')
{
$("#menu_slider").css({"width": "200px"});
}
else
{
$("#menu_slider").css({"width": "200px"});
}
$("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');
});
//Document Click
$(document).mouseup(function()
{
$("#menu_slider").hide();
});
//Mouse click on sub menu
$("#menu_slider").mouseup(function()
{
return false
});
//Mouse click on my account link
$("#menu_box").mouseup(function()
{
return false
});
});
</script>
</head>
<body>
<div id='menu_box' class='shadow'>
<ul id='menu_ul'>
</ul>
</div>
<div id='menu_slider' class='sshadow'>
<h3></h3>
<ul id='submenu_ul'>
</ul>
</div>
</body>
</html>
Actual treeview:
This is what I am getting result now.
Extract from Mysql Database:
php:
function getCategories($db,$parent_id = 0){
$categories = [];
$sql = mysqli_query($db,"select cat_id,product from category where parent_id='$parent_id'");
while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC)) {
// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["product"] = $row["product"];
//$category["media"] = $row["media"];
$category["sub_categories"] = getCategories($db,$row["cat_id"]); // subcategories again an array
$categories[] = $category;
}
return $categories;
}
$categories = array("Categories" => getCategories($db,0));
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '' . json_encode($categories) . '';
js:
For js you can use same approach
code:
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<?php
$sql = "select * from enquires2";
$result = mysqli_query($link,$sql);
while ($row = mysqli_fetch_array($result))
{
?>
<tr>
<td>
<span><img src='gridview/view.png' alt='View' id='myBtn<?php echo $row['id']; ?>'></span>
</td>
</tr>
<div id='myModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<?php
}
?>
In this code when I click on id i.e.
id='myBtn<?php echo $row['id']; ?>'
it display only one modal but when I click on new row id it show nothing. so, I want to open multiple modal with different row id. How can I fix this issue ? please help.
Thank You
I'm trying to create a form from the following code, but not having any success. I want to input hidden fields to capture a value of 1 when I put one of the draggable items into the "Most Like Me" field, a value of 2 when the draggable item is in the "2nd Most Like Me", 3 for "3rd Most Like Me", and 4 for "Least Like Me". Sample can be viewed by clicking here. How would I create this using the following code? I use PHP and MySQL as reference for adding to the database.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* Add some margin to the page and set a default font and colour */
body {margin: 30px;font-family: "Georgia", serif;line-height: 1.8em;color: #333;}
/* Give headings their own font */
h1, h2, h3, h4 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* Main content area */
#content {
margin: 80px 70px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear: both;
text-align: center;
margin: 70px;
padding: 10px;
background: #ebedf2;
border: 1px solid #333;
}
.wideBox h1 {
font-weight: bold;
margin: 20px;
color: #666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots {
margin: 50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin: 0 auto;
background: #ffd;
}
#cardSlots, #cardPile {
width: 910px;
height: 120px;
padding: 20px;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
#cardSlots div, #cardPile div {
float: left;
width: 150px;
height: 78px;
padding: 10px;
padding-top: 40px;
padding-bottom: 0;
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 0 10px;
background: #fff;
}
#cardSlots div:first-child, #cardPile div:first-child {
margin-left: 0;
}
#cardSlots div.hovered {
background: #aaa;
}
#cardSlots div {
border-style: dashed;
}
#cardPile div {
background: #666;
color: #fff;
font-size: 20px;
text-shadow: 0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
// JavaScript will go here
$( init );
function init() {
// Create the pile of shuffled cards
{
$('#cardPile div').draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}
// Create the card slots
{
$('#cardSlots div').droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this);
var cardNumber = ui.draggable;
if ( cardNumber == cardNumber ) {
ui.draggable.addClass ( 'correct' );
ui.draggable.draggable ( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="cardPile">
<div>Controlling</div>
<div>Motivating</div>
<div>Realistic</div>
<div>Organized</div>
</div>
<div id="cardSlots">
<div>Most Like Me</div>
<div>2nd Most Like Me</div>
<div>3rd Most Like Me</div>
<div>Least Like Me</div>
</div>
</div>
</body>
</html>
I modified your function:
function handleCardDrop( event, ui ) {
var slotNumber = $(this);
var cardNumber = ui.draggable;
var choice = cardNumber.html();
var aux = 0;
if (choice == 'Controlling')
{
aux = 1;
}
if (choice == 'Motivating')
{
aux = 2;
}
if (choice == 'Realistic')
{
aux = 3;
}
if (choice == 'Organized')
{
aux = 4;
}
var droped= slotNumber.html();
if(droped == 'Most Like Me')
{
$("#uno").val(aux);
}
if(droped == '2nd Most Like Me')
{
$("#dos").val(aux);
}
if(droped == '3rd Most Like Me')
{
$("#tres").val(aux);
}
if(droped == 'Least Like Me')
{
$("#cuatro").val(aux);
}
if ( cardNumber == cardNumber ) {
ui.draggable.addClass ( 'correct' );
ui.draggable.draggable ( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
}
------------------UPDATE 2.0---------------------------
I just add the ajax part, and modified the fiddle:
$("#saveResult").click(function(){
var uno = $("#uno").val();
var dos = $("#dos").val();
var tres = $("#tres").val();
var cuatro = $("#cuatro").val();
var params = {
"uno" : uno,
"dos" : dos,
"tres" : tres,
"cuatro": cuatro
};
$.ajax( {
type: "POST",
url: 'myphpfile.php',
data: params,
success: function( response ) {
$("#result").html(response);
}
} );
});
In the file myphpfile.php:
<?php
$uno = $_POST['uno'];
$dos = $_POST['dos'];
$tres = $_POST['tres'];
$cuatro = $_POST['cuatro'];
//Here the code to insert in your database
?>
UPDATED working fiddle: http://jsfiddle.net/robertrozas/qLhke/25/