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

Question

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);
});


});

trincot · Accepted Answer · 2017-10-29 00:09:30Z

2

Some issues:

$("#message").text() = ""; is invalid syntax. It should read $("#message").text("");
There are some backticks ` at wrong places; maybe a typo in your question
There are two click handlers for the same button, which in principle does not have to be a problem, but here they both set the message. So the first handler really is irrelevant.
The CSS selector input[type ='text']:checked does not match anything as text input elements cannot be checked.

Some things could also be written in a more efficient and concise manner:

$(document).ready(function(){
    var degree = { B: $("#BAText"), M: $("#MAText"), P: $("#PHDText") };
    
    $("#mycbxs input[type='checkbox']").click(function(){
        if ($(this).is(":checked")) degree[$(this).val()].focus(); 
    });

    $("#myclick").click(function(){
        var myFirst = $("#first_name").val().trim();
        $("#first_name").val(myFirst);
        var $checked = $("#mycbxs input[type='checkbox']:checked");
        var myDegrees = $checked.map(function () {
            return $(this).attr("name");
        }).get().concat($checked.map(function () {
            return degree[$(this).val()].val();
        }).get()).join(', ');
        var myMsg = !myFirst ? "Please enter your name."
                : myDegrees ? myFirst + ". You have the following degrees: " + myDegrees
                : myFirst + ". You have yet to earn any degrees.";
        $("#message").text(myMsg);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first_name" value="John"> 
<div id="mycbxs">
    <input type="checkbox" id="BAcbx" value="B" name="BA"> BA
    <br><input type="checkbox" id="MAcbx" value="M" name="MA"> MA
    <br><input type="checkbox" id="PHDcbx" value="P" name="PHD"> PHD
</div>

<div id="myinputs">
    <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>
    <input type="button" id="myclick" value="Submit Degree Info">
    <span id="message"></span>
</div>

edited Oct 29, 2017 at 0:09

answered Oct 28, 2017 at 23:06

trincot

357k38 gold badges282 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TRS7 Over a year ago

this works well, the only thing is when I type in a field of study (math) it should say " myFirst + ". You have the following degrees: BA, MA, PHD + myDegrees. These values come from <div id="mycbxs"> input tags. How do I get these values to appear before the typed in field of study?

trincot Over a year ago

I updated the code. Let me know if that is the desired output.

TRS7 Over a year ago

the code still does not make the values from the first div inputs appear.

trincot Over a year ago

When I check all checkboxes, and fill in all inputs (with "a", "b", "c") , I get "BA, MA, PHD, a, b, c". Is that not what you want? Or do you want those texts to also display when none of the checkboxes are checked? Then I misunderstood, because the code with the .focus() seemed to suggest that those input boxes had a connection with certain textboxes, which only made sense if the corresponding checkbox was checked.

TRS7 Over a year ago

You coded correctly and it helped immensely. Upvote. Thank you trincot.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related