2016-07-08 101 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>