How to preserve newlines in a textarea when passing by POST?

In my web page, I am passing the value of a textarea to PHP via the POST Method. That value is supposed to be written into a file, but in the $_POST key which contains the value, it has no line breaks, so when it is written to the file, there are no line breaks (as if some one replaced n with nothing).

Is there some PHP/JS function that replaces JS textarea newlines into PHP newlines that work in files?

Edit:

My code is supposed to be a file editor. Here it is:

<!DOCTYPE html>
<html>
    <head>
        <title>File Editor</title>
        <meta charset="UTF-8"/>
        <style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
    </head>
    <body>
        <h1>File Editor</h1>
        <?php
        if(isset($_POST["save"],$_POST["extra"]))
          file_put_contents($_POST["save"],$_POST["extra"]);
        if(isset($_POST["delete"]))
          unlink($_POST["delete"]);
        if(!isset($_POST["filename"],$_POST["submit"])){
        ?>
        <form action="editor.php" method="post">
            <label for="filename" id="n">Enter a file to edit: </label>
            <input type="text" name="filename" placeholder="Enter file name to edit"/>
            <button type="submit" name="submit">Submit</button>
        </form>
        <?php }else{ ?>
        <textarea><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
        <span style="display:none"><?php echo $_POST["filename"]; ?></span>
        <form action="editor.php" method="post" style="display:none" id="a">
            <input name="close" id="v" />
            <input name="extra" id="e" />
        </form><br/>
        <button id="save">Save</button>
        <button id="close">Close file</button>
        <button id="delete" style="color:red">Delete file</button>
        <script>
            function submit(v,x,c){
                document.getElementById("v").name=v;
                document.getElementById("v").value=x;
                document.getElementById("e").value=c;
                document.getElementById("a").submit();
            }
            document.getElementById("save").onclick=function(){
                submit("save",document.getElementsByTagName("span")[0].innerHTML,document.getElementsByTagName("textarea")[0].value.replace(/n/g,"rn"));
            }
            document.getElementById("close").onclick=function(){submit("close");}
            document.getElementById("delete").onclick=function(){
                if(confirm("Are you sure you want to delete this file?"))submit("delete",document.getElementsByTagName("span")[0].innerHTML);
            }
        </script><br/><br/>
        <?php } ?> </body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
    <head>
        <title>File Editor</title>
        <meta charset="UTF-8"/>
        <style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
    </head>
    <body>
        <h1>File Editor</h1>
        <?php
        if(isset($_POST["save"],$_POST["extra"]))
          file_put_contents($_POST["save"],$_POST["extra"]);
        if(isset($_POST["delete"]))
          unlink($_POST["delete"]);
        if(!isset($_POST["filename"],$_POST["submit"])){
        ?>
        <form action="editor.php" method="post">
            <label for="filename" id="n">Enter a file to edit: </label>
            <input type="text" name="filename" placeholder="Enter file name to edit"/>
            <button type="submit" name="submit">Submit</button>
        </form>
        <?php }else{ ?>
        <textarea><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
        <span style="display:none"><?php echo $_POST["filename"]; ?></span>
        <form action="editor.php" method="post" style="display:none" id="a">
            <input name="close" id="v" />
            <input name="extra" id="e" />
        </form><br/>
        <button id="save">Save</button>
        <button id="close">Close file</button>
        <button id="delete" style="color:red">Delete file</button>
        <script>
            function submit(v,x,c){
                document.getElementById("v").name=v;
                document.getElementById("v").value=x;
                document.getElementById("e").value=c;
                document.getElementById("a").submit();
            }
            document.getElementById("save").onclick=function(){
                submit("save",document.getElementsByTagName("span")[0].innerHTML,document.getElementsByTagName("textarea")[0].value.replace(/n/g,"rn"));
            }
            document.getElementById("close").onclick=function(){submit("close");}
            document.getElementById("delete").onclick=function(){
                if(confirm("Are you sure you want to delete this file?"))submit("delete",document.getElementsByTagName("span")[0].innerHTML);
            }
        </script><br/><br/>
        <?php } ?> </body>
</html>
​

Answer

I see that the purpose of your javascript code is only to fill in any input values. This can be done by utilizing <form> directly. Most likely, copying your data into a <input tye="text"> (text is the default type) will mangle your newlines.

Something like this should be equivalent and without the presented issue:

<!DOCTYPE html>
<html>
    <head>
        <title>File Editor</title>
        <meta charset="UTF-8"/>
        <style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
    </head>
    <body>
        <h1>File Editor</h1>
<?php
if(isset($_POST["save"],$_POST["extra"]))
    file_put_contents($_POST["filename"],$_POST["extra"]);
if(isset($_POST["delete"]))
    unlink($_POST["filename"]);
if(!isset($_POST["filename"],$_POST["submit"])){
?>
<form action="editor.php" method="post">
    <label for="filename" id="n">Enter a file to edit: </label>
    <input type="text" name="filename" placeholder="Enter file name to edit"/>
    <button type="submit" name="submit">Submit</button>
</form>
<?php }else{ ?>
<span style="display:none"><?php echo $_POST["filename"]; ?></span>
<form action="editor.php" method="post">
    <textarea name="extra"><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
    <br/>
    <input type="hidden" name="filename" value="<?= $_POST['filename'] ?>">
    <button name="save">Save</button>
    <button name="close">Close file</button>
    <button name="delete" style="color:red">Delete file</button>
</form>
<script>
    document.getElementById("delete").onclick=function(e){
        if(!confirm("Are you sure you want to delete this file?")) e.preventDefault();
    }
</script>
<br/><br/>
<?php } ?> 
    </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
    <head>
        <title>File Editor</title>
        <meta charset="UTF-8"/>
        <style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
    </head>
    <body>
        <h1>File Editor</h1>
<?php
if(isset($_POST["save"],$_POST["extra"]))
    file_put_contents($_POST["filename"],$_POST["extra"]);
if(isset($_POST["delete"]))
    unlink($_POST["filename"]);
if(!isset($_POST["filename"],$_POST["submit"])){
?>
<form action="editor.php" method="post">
    <label for="filename" id="n">Enter a file to edit: </label>
    <input type="text" name="filename" placeholder="Enter file name to edit"/>
    <button type="submit" name="submit">Submit</button>
</form>
<?php }else{ ?>
<span style="display:none"><?php echo $_POST["filename"]; ?></span>
<form action="editor.php" method="post">
    <textarea name="extra"><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
    <br/>
    <input type="hidden" name="filename" value="<?= $_POST['filename'] ?>">
    <button name="save">Save</button>
    <button name="close">Close file</button>
    <button name="delete" style="color:red">Delete file</button>
</form>
<script>
    document.getElementById("delete").onclick=function(e){
        if(!confirm("Are you sure you want to delete this file?")) e.preventDefault();
    }
</script>
<br/><br/>
<?php } ?> 
    </body>
</html>
​

Also as mentioned, you will probably need to format the newlines for html when displaying.

When needing to pass the same or hidden data you can use <input type="hidden" name=".." value="..">. This is used to pass the filename. The desired action is passed with the button press. The name of button you press will be passed in the request.

Edit:

Advertisement

Answer