Getting the Text of a Check Box and Text Area To Display using jQuery

0 votes

What I am trying to do is get the user information that is entered into a text area, to display as a message depending on the degree someone has. So if I check the box for BA the cursor focuses on the BA text area and depending on what I enter: lets say :Science, the message will display as firstName + "You have the following degrees:
BA in Science." or if I check the MA check box and the cursor .focus(es) on the MA text area and I enter Business then it will display as " firstName + "You have the following degrees:
MA in Business." etc. Any help is appreciated.

HTML CODE:

<div id="mycbxs">
        <br><strong>&nbsp;</strong>
        <br><input type="checkbox" id="BAcbx" value="B"> BA
        <br><input type="checkbox" id="MAcbx" value="M"> MA
        <br><input type="checkbox" id="PHDcbx" value="P"> PHD
    </div>

    <div id="myinputs">
        <br><strong>Discipline</strong>
        <br><input type="text" id="BAText" size="30">
        <br><input type="text" id="MAText" size="30">
        <br><input type="text" id="PHDText"  size="30">

        <br><br>
        <input type="button" id="myclick" value="Submit Degree Info">
        <br>
        <p id="message"></p>
    </div>

jQuery CODE:

      $(document).ready(function(){

 $("#myclick").click(function(){

     var myFirst = $("#first_name").val().trim();
     $("#first_name").val(myFirst);

     var myMessage = myFirst + "." + " You have yet to earn any degrees.";

     if(!myFirst)
     {
     $("#message").text() = "";
     }
     else
     {
       $("#message").text(myMessage);
     } 

 });


 $("input[type='checkbox']").click(function(){

  var radioButtonsChecked = $("#mycbxs input[type ='checkbox']:checked").val();

   $("#myinputs input[type ='text']").val();

  if(radioButtonsChecked == "B") 
   { 
    $("#BAText").focus(); 
   } 
   if(radioButtonsChecked == "M") 
   { 
    $("#MAText").focus(); 
   } 
   if(radioButtonsChecked == "P") 
   { 
    $("#PHDText").focus(); 
   }
 });




 $("#myclick").click(function(){

     var myFirst = $("#first_name").val().trim();
     $("#first_name").val(myFirst);

    $("#myinputs input[type ='text']").val();


     var myDegree = '';

     var radioButtonsChecked = $("#mycbxs input[type ='checkbox']:checked").val();

     var myMessage = myFirst + "." + " You have yet to earn any degrees.";

     if(!myFirst)
     {
     $("#message").text() = "";
     }
     else
     {
       $("#message").text(myMessage);
     } 


    if(radioButtonsChecked  == "B") 
    {
        myDegree = $("#BAText").val();
    }

    if(radioButtonsChecked  == "M") 
    {
        myDegree = $("#MAText").val();
    }

    if(radioButtonsChecked  == "P") 
    {
        myDegree = $("#PHDText").val();
    }

    var myMsg = myFirst + " You have the following degrees:" + "<br>" + "<br>" + myDegree;

    $("#message").html(myMsg);
});


});

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,868 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

How to get the value of a checkbox flipswitch in JQuery Mobile 1.4.5?

I'm using following markup to create a ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
522 views
0 votes
0 answers

Using jQuery to countdown from 90 seconds beginning on the click of an element

Hi I was wondering if anyone can ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
529 views
0 votes
0 answers

How to stretch a GIF to fill the whole div using jQuery Mobile?

I'm using jQuery Mobile to create a ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
799 views
0 votes
1 answer
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 2,971 views
0 votes
1 answer

Error: Failed to load resource: the server responded with a status of 404 (Not Found)

Your files are not under the JSP folder that's ...READ MORE

answered Dec 16, 2020 in Web Development by Gitika
• 65,770 points
88,011 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,315 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,710 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,295 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
3,311 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP