How to append values from HTML to jQuery script

Question

So, here is my HTML code and jQuery code. I want to pass the value attribute to jQuery so that I can use it as an parameter for my if else loop but I am unable to do so. Here is my sample code.

HTML Code:

<select id="counting" class="normal_button">
    <option value="" disabled="disabled" selected="selected">value  type</option>
    <option value="1">one</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
   <option value="4">Four</option>  
</select>

jQuery Code:

jQuery(document).ready(function(){
    jQuery("#counting").click(function(){
        if (value == "1") 
        {
            jQuery("#text_area").append("<p>Test</p>");
        }
        else {
            jQuery("#text_area").append("<p>Tests</p>");        
        }
    });
});

So here I want that if the options change then the text appended also changes hence I have used value as my parameter for if condition. Also I am appending text to another div text area, is that fine? Can I do that?

I am new to this so please help me. It's showing me the error value is not defined.

Arjun · Accepted Answer · 2015-08-05 10:15:50Z

1

Is this what you wanted?

jQuery(document).ready(function(){
     jQuery("#counting").bind("change", function(){
          if ($(this).val() == "1") 
          {
               jQuery("#text_area").append("<p>Test</p>");
          }
          else {
               jQuery("#text_area").append("<p>Tests</p>");        
          }
     }); 
 });

I just made 2 changes -

1) used bind("change"), instead of click and

2) used $(this).val() instead of value.

edited Aug 5, 2015 at 10:15

Arjun

2,2371 gold badge19 silver badges26 bronze badges

answered Aug 5, 2015 at 9:48

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

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

9 Comments

kamehamehaaaaaa Over a year ago

i cant see any error but i also can't see the appended item

potatopeelings Over a year ago

check if you have a div or something similar with id = text_area. Here's a fiddle that shows it working Cheers! Note that you have to change the select box to make it do something.

kamehamehaaaaaa Over a year ago

what do you mean by change the select box

potatopeelings Over a year ago

select a value in the select box to trigger the change event.

kamehamehaaaaaa Over a year ago

like can you pleas elaborate i am new to this

|

Shirin Abdolahi · Accepted Answer · 2015-08-05 09:53:37Z

0

when you have select boxes and you want something happen on selecting that selectbox, you can not use .click function. .click function is for when something is clicked. but here you select. so first of all you should use .change function.

and when you want to have value of selected select box, value variable is not exist by itself. you should use $(this).val().

$this is your select box which you select something from it,and $(this).val() returning the selected value.

here is a working plunker

jQuery(document).ready(function(){
   jQuery("#counting").change(function(){
      if ($(this).val() == "1") 
      {
          jQuery("#text_area").append("<p>Test</p>");
      }
      else {
          jQuery("#text_area").append("<p>Tests</p>");        
      }
   });
  });

answered Aug 5, 2015 at 9:53

Shirin Abdolahi

1,0678 silver badges18 bronze badges

8 Comments

kamehamehaaaaaa Over a year ago

i am not able to view text output in the text area

Shirin Abdolahi Over a year ago

@kamehamehaaaaaa where is your text area? in plunker I created there is a text area and you can see text output there

Shirin Abdolahi Over a year ago

@kamehamehaaaaaa do you have any div in your HTML with id="text_area" ? cause you should have one ;)

kamehamehaaaaaa Over a year ago

ya i have a div which is basically named text_area where i see the results

Shirin Abdolahi Over a year ago

@kamehamehaaaaaa no, your div should have id="text_area" not named text_area

|

Pugazh · Accepted Answer · 2015-08-05 09:54:18Z

jQuery(this).val() would give the value of selected option. This needs to be binded on selection change event.

jQuery(document).ready(function() {
  jQuery('#counting').change(function() {
    value = jQuery(this).val();
    if (value == "1") {
      jQuery("#text_area").append("<p>Test</p>");
    } else {
      jQuery("#text_area").append("<p>Tests</p>");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="counting" class="normal_button">
  <option value="" disabled="disabled" selected="selected">value type</option>
  <option value="1">one</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<div id="text_area">

</div>

Collectives™ on Stack Overflow

How to append values from HTML to jQuery script

3 Answers 3

9 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related