Link to home
Start Free TrialLog in
Avatar of Caleb Rodriguez
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:

<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>

Open in new window


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

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Are you asking how to do this or do you have a specific question relating to your code.

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.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members 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.