CODEWITHSUNDEEP
javascriptjqueryhtml
john_black
john_black

Reputation: 227

Copying content to another textarea without the tags in jQuery

I'm trying to copy one textarea's value to another just without the HTML tags. What am I doing wrong?

Here is the code:

$(document).ready(function() {
  $("#go").click(function() {
    var content = $("#inputdata").val;
    var text = $(content).text();
    $("#outputdata").val(text);

  });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="go" value="go" />
<table id="content">
  <tr>
    <td>
      input:<br />
      <form id="inputform">
        <textarea id="inputdata" name="inputdata">
    <b>my bold text</b>
    <i>my italic text</i>
    </textarea>
      </form>

    </td>
    <td>
      output:<br />
      <textarea id="outputdata" name="outputdata"></textarea>
    </td>
  </tr>
</table>

The result I'm trying to get is:

my bold text
my italic text

Upvotes: 2

Views: 124

Answers (3)

Sandip Ghosh
Sandip Ghosh

Reputation: 719

Create a dummy element, copy the content in it and then fetch the data from it. It will get exactly what you need.

$(document).ready(function() {
  $("#go").click(function() {
    var content = $("#inputdata").text();
    var dummy = document.createElement('span');
    dummy.innerHTML= content;
    var text = dummy.textContent || dummy.innerText;
    $("#outputdata").val(text);

  });
});

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

Being a jQuery method, you need to use parenthesis with val:

var content = $("#inputdata").val;

should be:

var content = $("#inputdata").val();

http://api.jquery.com/val/

$(document).ready(function() {
  $("#go").click(function() {
    var content = $("#inputdata").val();
    var text = $(content).text();
    $("#outputdata").val(text);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="go" value="go" />
<table id="content">
  <tr>
    <td>
      input:<br />
      <form id="inputform">
        <textarea id="inputdata" name="inputdata">
    <b>my bold text</b>
    <i>my italic text</i>
    </textarea>
      </form>

    </td>
    <td>
      output:<br />
      <textarea id="outputdata" name="outputdata"></textarea>
    </td>
  </tr>
</table>

Upvotes: 2

pokeybit
pokeybit

Reputation: 1032

You forgot the () after .val

$(document).ready(function() {
  $("#go").click(function() {
    var content = $("#inputdata").val();
    var text = $(content).text();
    $("#outputdata").val(text);

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="go" value="go" />
<table id="content">
  <tr>
    <td>
      input:<br />
      <form id="inputform">
        <textarea id="inputdata" name="inputdata">
    <b>my bold text</b>
    <i>my italic text</i>
    </textarea>
      </form>

    </td>
    <td>
      output:<br />
      <textarea id="outputdata" name="outputdata"></textarea>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions