Home>
Do you know how to apply CSS to

value?

Before sending,<textarea>valueis modified with jquery as shown below.

However, the modified character string will be displayed when you click the send button.
It looks a little bad.

Is there any way to hide this skillfully likedisplay: none;this with CSS?

&lt;form name = "post" method = "post" action = "http://example.com/testpost/"&gt;
  &lt;div&gt;
    &lt;p&gt;Reply to:&lt;span&gt;hanako&lt;/span&gt;&lt;/p&gt;
    &lt;textarea name = "message" placeholder = "message"&gt;&lt;/textarea&gt;
    &lt;button type = "submit" name = "submit"&gt;Send&lt;/button&gt;
  &lt;/div&gt;
  &lt;input name = "reply" value = "1" type = "hidden"&gt;
&lt;/form&gt;
// Change "value" of "textarea" before sending
$('body'). on ("click", '# submit', function (e) {
  e.preventDefault ();
  var replyVal = $('# reply'). val ();
  if (replyVal! == 0) {
    var nicename = $('# nicename'). text ();
    var message = $('textarea'). val ();
    // I want to hide this&lt;span&gt;and contents
    $('textarea'). val ('&lt;span&gt;' + nicename + '&lt;/span&gt;' + message);
    $('form'). submit ();
  } else {
    $('form'). submit ();
  }
});


As commented out, the purpose is to//when the submit button is clicked.
Please let me know if you know a good way.

Supplement

Thanks for your grammar violation, but I don't want to change HTML for some reasons, so if you have a good solution, please let me know.

  • Answer # 1

    <textarea>cannot have child elements<span>. It is a grammar violation.


    Sample

    The point is to separatetextareafor display andtextareafor transmission

    <! DOCTYPE HTML>
    <html lang = "en">
        <head>
            <meta charset = "UTF-8">
            <title></title>
            <style type = "text/css">
                .hidden {
                    visibility: hidden;
                    height: 0;
                    width: 0;
                }
            </style>
        </head>
        <body>
            <form action = "" method = "post">
                <p>
                    <!-no name attribute->
                    <input type = "text" id = "nicename" value = "nicename" />
                </p>
                <p>
                    <!-no name attribute->
                    <textarea id = "text" cols = "30" rows = "10">Message</textarea>
                </p>
                <!-Add name attribute->
                <textarea id = "text_sending" name = "text_sending"></textarea>
                <p>
                    <button id = "btn" type = "button">Send</button>
                </p>
            </form>
            <script type = "text/javascript" src = "// code.jquery.com/jquery-3.1.1.min.js"></script>
            <script type = "text/javascript">
                $(function () {
                    var nicename = $('# nicename'). text ();
                    var message = $('# text'). val ();
                    var contents = '<span>' + nicename + '</span>' + message;
                    $("# text"). val (contents);
                    $("# text_sending"). val (message);
                    $("# btn"). on ('click', function () {
                        $('form'). submit ();
                    });
                });
            </script>
        </body>
    </html>