2016-07-08 71 views
3

我想从div容器中取出所有HTML,将它放在隐藏字段中的值中,然后将其显示给具有相同CSS样式但没有textareas标签的用户。Javascript不从文本区域更改

而不是textareas,我想显示来自文本字段(textarea)的值!到现在为止还挺好!

但是,当更改textareas中的信息时,我的javascript代码不会从该字段获取新信息。

我的代码有什么问题?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    </head> 
    <body> 
     <?php 
     if(isset($_POST['save'])){ 
      $scrita = $_POST['hid']; 
      $scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>'); 
      echo $scritaInsert; 
      exit; //just for the test 
     } 
     ?> 
     <form method="POST"> 
      <input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/> 
      <input type="hidden" name="hid" id="hid"/> 
     </form> 
     <div id="container"> 
      <p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p> 
      <p style="text-align: center; color: black; font-size:16px; text-decoration: underline;"> 
       The address 
      </p> 

      <p style="font-weight: bold; color: black;"> 
       To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea> 
      </p> 

      <p style="font-weight: bold; color: black;"> 
       Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea> 
      </p> 

      <p style="text-align: center;font-weight: bold;font-size: 19px;color: black;"> 
       CONTRACT<br> 
      <n style="text-align: center;font-size: 16px;color: black;"> 
       For transport 
      </n><br> 
      <nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea> 
       Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea> 
      </nz> 
     </p> 
    </div> 
    </body> 
</html> 
<script type="text/javascript"> 
    $('#submitContainer').click(function(){ 
     $('.picker').html(''); 
     var content = $('#container').html(); 
     $('#hid').val(content); 
    }); 
</script> 

回答

0

我想你应该使用方法text()html(),因为html()将刚才复制所有,包括HTML标签上的文字,但text()只会复制真实文本。

看看这个fiddle

+0

当我在javascript代码中将html更改为文本时,我松开了我的CSS样式,并且当我在textarea中添加新值时结果相同(代码采用现有值而不是新的值) –

+0

我帮助y ou更新代码,希望这一次我可以软你的问题兄弟:) –

0

我认为你的问题可能是HTML类型斜线:

尝试:

String.prototype.stripSlashes = function(){ 
    return this.replace(/\\(.)/mg, "$1"); 
} 

$('#submitContainer').click(function(){ 
    $('.picker').html(''); 
    var content = $('#container').html(); 
    $('#hid').val(content.stripSlashes()); 
}); 
+0

结果是一样的。当我在textareas中添加新的信息时,代码不会接受它,并显示来自textareas的旧信息 –

0

我已经改变了我的JavaScript下面的代码和它现在正常工作:

<script type="text/javascript"> 
    $('#submitContainer').click(function(){ 
     $('.picker').html(''); 
     $("textarea").each(function() { 
      $(this).text($(this).val()); 
     }); 
     var content = $('#container').html(); 
     $('#hid').val(content); 
    }); 
</script>