Caleb Rodriguez
asked on
Storing Value of a Draggable item as a global variable within different tabs in jQuery
I have 3 tabs. On tab # 2 I have two draggable items and one droppable. My two draggable items are "good" or "bad". On tab 3 I have a button and a textarea. Upon the click of the button it will determine if you feel good or bad. What I want to achieve is: when I am on tab #2 and I drag an item into the drop area, lets say I drag and drop the "good" item, I then tab over to tab # 3 and click the button which asks " how do you feel", since I dragged and dropped the "good", when I click the "how do you feel button" it will display "good" within the text area on tab #3. Likewise, if on tab 2 I drag and drop the BAD and then tab over to tab#3 and click the "how do you feel button" then it will display as "bad" inside the textarea. Please help!! Thank you.
HTML:
JQUERY:
HTML:
<div id="tabs-1">
<h2>Sign Up</h2>
<form id="myform">
<br>
<label for="first_name">First Name:</label><br>
<input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
<br>
<br>
<label for="last_name">Last Name:</label><br>
<input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
<br>
<br>
<label for="last_name">Start Date:</label><br>
<input type="text" id="datepicker" name="datepicker" required> <span class="error" id="date_error"></span>
<br>
<br>
<span class="error" id="all_error"></span>
<p><input type="button" id="button" value="Creat an Account"></p>
<p id="message">
</p>
</div>
<div id="tabs-2">
<div id="gplan" class="ui-widget-content, draggable">
<p>Great Plan!</p>
</div>
<br>
<br>
<div id="pplan" class="ui-widget-content, draggable">
<p>Poor Plan!</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop Your Plan Here</p>
</div>
</div>
<div id="tabs-3">
<div id="effect" class="ui-widget-content ui-corner-all">
<p><input type="button" id="feelings" value="Show My Feelings"></p>
<h2><textarea id="howdoyoufeel" name="feelings" rows="4" cols="30">How Do You Feel Now?
</textarea></h2>
</div>
</div>
</div>
JQUERY:
$(document).ready(function(){
$("#tabs").tabs();
$( "#datepicker" ).datepicker({showOtherMonths: true});
$("#button").click(function(){
var myFirstName = $("#first_name").val().trim();
var myLastName = $("#last_name").val().trim();
var myStartDate = $("#datepicker").val()
if(!myFirstName)
{
$("#first_error").html("You must Enter a First Name");
$('#first_name').focus();
}
else
{
$("#first_error").html("");
}
if(!myLastName)
{
$("#last_error").html("You must Enter a Last Name");
}
else
{
$("#last_error").html("");
}
if(!myStartDate)
{
$("#date_error").html("Please Enter The Start Date");
}
else
{
$("#date_error").html("");
}
if(!myStartDate || !myLastName || !myFirstName)
{
$("#all_error").html("<strong>Please Correct Errors and Try Again</strong>");
}
else if(myStartDate && myLastName && myFirstName)
{
$("#all_error").html("");
$("myform").submit();
}
if(myStartDate && myFirstName && myLastName)
{
$("#message").css('color', 'green');
var myMessage = "<h3>Success " + myFirstName + " " + myLastName + "<br>"
+ "Use the Start Date as your Password" + "</h3>" ;
$("#message").html(myMessage);
return false;
}
else if(!myStartDate || !myFirstName || !myLastName)
{
//$("#all_error").html("<strong>Please Correct Errors and Try Again</strong>");
$("#message").html("");
}
}); //END OF CLICK
$(function() {
$( ".draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
if (ui.draggable.attr("id") == "gplan")
{
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Great Plan Picked!" );
}
if (ui.draggable.attr("id") == "pplan")
{
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Poor Plan Picked!" );
}
}
}); //end of droppable
//});//end of $(function(){
window.onload = function (){
$("#feelings").click(function(){
var gPlan = $("#gplan").val()
var pPlan = $("#pplan").val()
if(!gPlan && !pPlan)
{
$("textarea").html("I don't know").effect("bounce", 1000);
}
if(pPlan)
{
$("textarea").html("GOOD");
}
if(gPlan)
{
$(this).html("BAD");
}
}); // end of feelings click
}
});//END OF ONLOAD.
});//end of ready
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Which part of what you want to do have not managed to do in your code?
Can you set up a link where we can see a working version of what you have so far.